I have been trying many different configurations but I now feel like I have been staring at this problem for too long and can't figure it out anymore. I am trying to use webpack file-loader for simple images, while a normal configuration works like a charm in dev, I encounter the error mentioned in the title any time I run npm run start with SSR. To provide additional info here are the rules in my webpack config:
const path = require('path');
const webpack = require('webpack');
const config = {
context: __dirname,
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/ClientApp.jsx'
],
devtool: 'cheap-eval-source-map',
output: {
path: path.join(__dirname, '/public/'),
filename: 'bundle.js',
publicPath: '/public/'
},
devServer: {
hot: true,
contentBase: path.join(__dirname, '/public/'),
publicPath: '/public/',
historyApiFallback: true
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
},
{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.jsx?$/,
loader: 'babel-loader'
}
]
}
};
if (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'server') {
config.entry = './src/ClientApp.jsx';
config.devtool = false;
config.plugins = [];
}
module.exports = config;
Here are me dependencies:
"scripts": {
"build": "cross-env NODE_ENV=production webpack -p",
"build:dev": "cross-env NODE_ENV=development webpack -d",
"dev": "webpack-dev-server",
"lint": "eslint **/*.{js,jsx} --quiet",
"start": "cross-env NODE_ENV=production node server/server.js",
"watch": "webpack --watch"
},
"dependencies": {
"babel-plugin-dynamic-import-webpack": "^1.0.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-register": "^6.24.1",
"compression": "^1.7.0",
"express": "^4.15.3",
"lodash": "^4.17.4",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-perf": "^15.4.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"styled-components": "^2.1.2",
"webpack": "^3.4.1"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.0.3",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.3.0",
"eslint-config-react": "^1.1.7",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-prettier": "^2.1.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "^0.11.2",
"prettier": "^1.5.3",
"react-hot-loader": "^3.0.0-beta.6",
"svg-inline-loader": "^0.8.0",
"webpack-dev-server": "^2.6.1"
}
Just for completion my public folder is structured like this public/js and public/images, and webpack properly outputs the images in this folder. I feel like I made a distraction error somewhere, so please let me know if you need any additional info to help me figure this out. This is a brand new setup so every package is at its latest version.
EDIT
I actually noticed that unless I run webpack -p first (which creates the public/images folder with the used images inside), in dev mode the console tells me it can't find any image, the dev build doesn't throw any error but there's something off with the paths, I can only make it work if I do not specify any path. In production this configuration "works" but I get the Unexpected character error.
