I have a React app I'm porting to Webpack, and I can successfully launch it using webpack-dev-server.
Unfortunately I have to navigate to the public directory to load the app:
localhost:10000/public/
...which interferes with React router. Is it possible to have it mount to / instead? I.e:
localhost:10000/
The publicPath directive in output doesn't seem to influence this.
// webpack.config.js
module.exports = {
devServer: {
inline: true,
port: 10000 // Defaults to 8080
},
entry: {
app: ['./src/app.jsx']
},
devtool: 'source-map',
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: path.resolve(__dirname, "public/scripts"),
publicPath: '/scripts/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
"es2015",
"stage-0",
"react"
],
plugins: [
"transform-flow-strip-types"
]
}
}
]
}
};
Try setting the contentBase to public folder
https://webpack.github.io/docs/configuration.html#devserver
Related
I have a React app that I wrote with Webpack (without using CRA), and I am trying to implement server-side rendering to it. I wrote two webpack config files (one for server and one for client), in my original webpack config I had loaders for most of the types im going to use (ts, js, css, image formats and ttf), so my new config files had the same loaders but each one had a different output path (server under dist and client under dist/public).
However, with this I was having the same font in both output path, so I removed from one of them and then from both config files, the font loader, and still I was getting the fonts on both directories. Below are my webpack configurations.
To note that I downloaded a font and placed it under my src folder and using it in my index.css which is imported in App.tsx (which is used in both client.tsx and server.tsx).
webpack.config.server.ts:
import path from 'path';
import webpack from 'webpack';
import nodeExternals from 'webpack-node-externals';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const config: webpack.Configuration = {
mode: 'development',
entry: path.resolve(__dirname, '..', 'src', 'server.tsx'),
output: {
path: path.join(__dirname, '..', 'dist'),
filename: 'server.js',
clean: true
},
target: 'node',
externals: [ nodeExternals() ],
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json' ]
},
module: {
rules: [
{
test: /\.jsx?$/i,
exclude: /node_modules/i,
use: 'babel-loader'
},
{
test: /\.tsx?$/i,
exclude: /node_modules/i,
use: 'ts-loader'
},
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}/*,
{
test: /\.ttf$/i,
type: 'asset/resource'
}*/
]
},
plugins: [
new MiniCssExtractPlugin()
]
};
export default config;
webpack.config.client.ts:
import path from 'path';
import webpack from 'webpack';
const config: webpack.Configuration = {
mode: 'development',
entry: path.resolve(__dirname, '..', 'src', 'client.tsx'),
output: {
path: path.join(__dirname, '..', 'dist', 'public'),
filename: 'bundle.js',
clean: true
},
target: 'web',
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json' ]
},
module: {
rules: [
{
test: /\.jsx?$/i,
exclude: /node_modules/i,
use: 'babel-loader'
},
{
test: /\.tsx?$/i,
exclude: /node_modules/i,
use: 'ts-loader'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource'
}/*,
{
test: /\.ttf$/i,
type: 'asset/resource'
}*/
]
}
};
export default config;
This is the build directory (with font commented and uncommented).
I find it a bit redundant for both configs to generate the same font, is there something missing in my configuration I should add? I am still trying to figure out how to properly implement server-side rendering so my configuration files may not be the best configurations.
I have a main style.scss file which attempts to import other .scss files into itself. when I compile the code using npm start, I get this error:
ERROR in ./style/style.scss
Module build failed: SyntaxError: C:/Users/XYZ/React/react-project/style/style.scss:
Unexpected token, expected ( (1:8)
#import "_base";
^
I've tried putting it in brackets:
#import("_base");
and
#import("_base.scss");
and I get this error:
ERROR in ./style/style.scss Module build failed:
SyntaxError: C:/Users/XYZ/React/react-project/style/style.scss:
Leading decorators must be attached to a class declaration (1:21)
> 1 | #import("_base.scss");
^
Here is my webpack.config.js:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
],
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
},
resolve: {
extensions: ['', '.js', '.jsx', '.scss']
},
devServer: {
historyApiFallback: true,
contentBase: './',
host: 'localhost',
port: 8080
}
};
I am new to scss and all of the tutorials I have found online tell me to import the files this way. What could be wrong?
Fixed the issue - I migrated to Webpack 2 and changed my webpack.config.js to:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', ["es2015", { "modules": false }], 'stage-1']
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.scss']
},
devServer: {
historyApiFallback: true,
contentBase: './',
host: 'localhost',
port: 8080
}
};
The errors I get below are shown in the console after I refresh on a nested route (register/email-confirmation). Whereas non-nested routes do not get this error.
I think the main problem is that it's searching for bundle.js and the image in the nested route path, as opposed to the root path.
The errors in my console:
GET http://localhost:3002/register/bundle.js net::ERR_ABORTED
Refused to execute script from 'http://localhost:3002/register/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
GET http://localhost:3002/register/a5e694be93a1c3d22b85658bdc30008b.png 404 (Not Found)
My webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BUILD_PATH = path.resolve( __dirname, "./client/build" );
const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
const PUBLIC_PATH = "/";
...
module.exports = {
devtool: 'eval-source-map',
context: SOURCE_PATH,
entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /server/],
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
plugins: [
'transform-decorators-legacy',
'transform-es2015-destructuring',
'transform-es2015-parameters',
'transform-object-rest-spread'
]
}
}
},
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
],
},
output: {
path: BUILD_PATH,
filename: "bundle.js",
},
devServer: {
compress: true,
port: 3002,
historyApiFallback: true,
contentBase: BUILD_PATH,
publicPath: PUBLIC_PATH,
},
plugins: [
new webpack.DefinePlugin(appConstants),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'client/src/index.html'),
inject: true
}),
],
watch: true,
}
I don't know about this bug, but I highly recommend using fuse-box
fuse-box is the future of the build systems, within few minutes you will be running your project with high speed hot reload and many others utitilites...
check this react example seed, it's incredibly amazing..
Bootstrap styles not rendering when everything is setup fine. I have install react-bootstrap and imported bootstrap css, but i cannot get the style to render. I can make it work through a create-react-app boilerplate. I suspect that it has something to do with my bootstrap. this is my webpack.config file:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
devtool: 'cheap-module-eval-source-map',
entry: './dev/js/index.js',
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-0']
},
exclude: /node_modules/
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=25000'
}
]
},
output: {
path: 'src',
filename: 'js/bundle.min.js'
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin()
]
};
I'm running into an interesting error with my react build. My configuration runs perfectly fine on my Mac, but I get the following error when running on my Windows 10 computer:
ERROR in ./~/react-toolbox/lib/app_bar/theme.css
Module parse failed: C:\cygwin64\home\username\projectname\node_modules\react-toolbox\lib\app_bar\theme.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| :root {
| --palette-red-50: rgb(255, 235, 238 );
| --palette-red-100: rgb(255, 205, 210);
# ./~/react-toolbox/lib/app_bar/index.js 16:13-35
# ./src/containers/app/app.js
# ./src/index.js
# multi react-hot-loader/patch ./src/index.js
Here's my Webpack 2 Config
'use strict'
const webpack = require('webpack')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const postcssImport = require('postcss-import')
const postcssCssnext = require('postcss-cssnext')
// configure source and distribution folder paths
const publicFolder = 'public'
const buildFolder = 'build'
module.exports = {
entry: {
'app': [
'react-hot-loader/patch',
'./src/index.js'
]
},
resolve: {
//Allows us to leave off the file extension when importing
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: '/node_modules/',
loader: 'eslint-loader',
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader'
},
{
test: /\.css$/,
include: [
/(node_modules)\/react-toolbox/,
path.join(__dirname, 'src')
],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: 'inline',
plugins: function() {
return [
postcssImport({ addDependencyTo: webpack }),
postcssCssnext({
browsers: ['last 2 versions', '> 5%'],
compress: true,
})
]
},
},
}
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name].bundle.css',
allChunks: true
}),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'index.html'),
to: path.join(__dirname, buildFolder, 'index.html')
}]),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'demo.html'),
to: path.join(__dirname, buildFolder, 'demo.html')
}]),
new CopyWebpackPlugin([{
from: path.join(__dirname, publicFolder, 'demo.js'),
to: path.join(__dirname, buildFolder, 'demo.js')
}]),
new webpack.NamedModulesPlugin()
],
output: {
path: path.resolve(__dirname, buildFolder),
filename: '[name].js',
publicPath: '/'
},
devtool: 'eval',
devServer: {
// files are served from this folder
contentBase: path.join(__dirname, 'build'),
// support HTML5 History API for react router
historyApiFallback: true,
// listen to port 5000, change this to another port if another server
// is already listening on this port
port: 5000,
//match the output 'publicPath'
publicPath: '/',
//Proxies to match requests to our Django API endpoints
proxy: {
'/api': {
target: 'http://localhost:4000'
}
},
hot: true
}
}
And for good measure, here's my .babelrc config
{
"presets": [
[ "es2015", { "modules": false } ],
"latest",
"react"
],
"plugins": ["react-hot-loader/babel", "syntax-dynamic-import"],
"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
}
No idea why the error occurs when compiling on Windows 10 but works perfectly on my Mac. I can't seem to find any current info regarding this issue for either PostCSS or Webpack 2.
Any ideas?
just remove
include: [
/(node_modules)\/react-toolbox/,
path.join(__dirname, 'src')
]
from test: /\.css$/ rule