Webpack production build: Unexpected token - reactjs

I have been trying to deploy my production build with webpack but I can't get it done. I almost read and tried everything and can't make it work.
This is the last error that I have:
My webpack configuration looks like this:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const staticSourcePath = path.join(__dirname, 'static');
const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'dist');
module.exports = {
devtool: 'cheap-module-source-map',
entry: {
// base: path.resolve(staticSourcePath, 'src/sass/base.scss'),
app: path.resolve(sourcePath, 'index.prod.jsx')
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
publicPath: '/'
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
sourcePath,
path.resolve(__dirname, 'node_modules')
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[chunkhash].js',
minChunks(module) {
return module.context && module.context.indexOf('node_modules') >= 0;
}
}),
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
compress: {
warnings: false
}
}
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})
],
context: staticSourcePath
}
}),
new webpack.HashedModuleIdsPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
path: buildPath,
excludeChunks: ['base'],
// filename: 'index.html',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
}
}),
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'all',
fileBlacklist: [/\.(css|map)$/, /base?.+/]
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer'
}),
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.jsx$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.(js|jsx)$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react", "env"],
plugins: [
"transform-object-rest-spread",
"transform-class-properties"
]
}
},
{
test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
use: 'file-loader?name=assets/[name]-[hash].[ext]'
},
{
test: /\.(png|gif|jpg|svg)$/,
use: [
'url-loader?limit=20480&name=assets/[name]-[hash].[ext]'
],
include: staticSourcePath
}
]
}
};
I tried changing the presets of babel. I don't know if it could be a problem with the library query-string but even when I don't use it the error persists.
I also tried almost all configurations from https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/104 and can't make it work :C....
I hope someone can help me I have been fighting with this error since weekend and im near to kill myself T_T

Already tried babel-polyfill and dont work :(
Just updated to webpack 4 and solved my problem. To many people have this kind of error with webpack < 4.
I will leave my webpack 4 configuration here for those who had suffered like me
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
resolve: {
extensions: ['.js', '.jsx']
},
output: {
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
devServer: {
// host: '0.0.0.0', /******* Para ver en lan*/
// disableHostCheck: true,/****** Para ver en lan */
historyApiFallback: true,
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
]
};
package.json
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"compression-webpack-plugin": "^1.1.11",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.7",
"mini-css-extract-plugin": "^0.2.0",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.1.1"
},
.babelrc
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties",
"transform-regenerator"
]
}

In my experience, it's usually Uglify being too aggressive.
I noticed that in your answer, you've swapped out Uglify for compression-webpack-plugin. That's probably what made the bug go away.
In your original package.json, I'd change the Uglify config to
new UglifyJsPlugin({
sourceMap:true,
cache: true,
parallel: true,
uglifyOptions:{
ecma:8
}
}),
First, you want to see Uglify's warnings. It'll tell you if there's code that's likely to get clobbered by the minification / obfuscation algorithm. If there are, you may have to play with the compress, mangle, toplevel or keep_fnames options depending on how your code is structured. https://github.com/mishoo/UglifyJS2#minify-options
I understand that this might show a lot of warnings from 3rd party libraries. There's a couple things you can do:
Find alternative libs that minify correctly (they'll probably be higher quality anyways).
Import the already minified versions of the lib from /dist instead of from /src and then exclude the lib from the Uglify plugin
The settings for cache and parallel just make the minification run a bit faster.

Sometimes such a problem may be a result of the non-transpiled packages (excluded from transpiling).
To solve this you should include these packages to transpiled code:
rules: [
...
test: /\.jsx?$/,
exclude(resource) {
return (
/node_modules/.test(resource)
&& !/node_modules\/(query-string|strict-uri-encode|split-on-first)/.test(resource)
);
},
...
]

Related

React webpack-dev-server HMR causes full page reload

I'm new to custom webpack world and have a custom webpack configration with webpack-dev-server's HMR. HMR working as expected by the console logs.
But after seeing [HMR] App is up to date. in logs, i also see Navigated to http://0.0.0.0:9000/ message from Chrome. And then whole page reloads itself
I only edited TempPerformance.tsx .
My App.tsx is a class based component but it's children are functional components.
Webpack related packages that i use:
"webpack": "5.71.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.8.0",
"webpack-dotenv-plugin": "2.1.0",
"webpack-merge": "5.8.0"
"ts-loader": "9.2.6",
"terser-webpack-plugin": "5.2.5",
"sass-loader": "12.4.0",
"style-loader": "3.3.1",
"inline-source-map": "0.6.2",
"html-loader": "3.0.1",
"clean-webpack-plugin": "4.0.0",
"compression-webpack-plugin": "9.2.0",
"node-polyfill-webpack-plugin": "1.1.4",
My webpack.common.js
const path = require("path");
const { DefinePlugin, ProvidePlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
entry: {
main: "./src/index.tsx",
signup: "./src/signup.tsx",
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: "css-loader",
options: {
url: true,
modules: {
auto: (resourcePath) => {
const filename = resourcePath.replace(/^.*[\\\/]/, "");
return (
resourcePath.endsWith("palette.scss") ||
/\.module\.\w+$/i.test(filename)
);
},
},
},
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "./[name].[ext]",
outputPath: "fonts",
publicPath: "/assets/fonts",
},
},
],
},
{
test: /\.(png|jpeg|png)$/,
use: [
{
loader: "file-loader",
options: {
name: "./[name].[ext]",
outputPath: "images",
publicPath: "/assets/images",
},
},
],
},
{
test: /\.html$/,
loader: "html-loader",
},
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["#svgr/webpack"],
},
],
},
plugins: [
new DefinePlugin({
"process.env": {
VERSION: JSON.stringify(require("./package.json").version),
API_HOST: JSON.stringify(process.env.API_HOST),
A_PRODUCT: JSON.stringify(process.env.A_PRODUCT),
},
}),
new ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: path.resolve(__dirname, "public", "assets"),
dangerouslyAllowCleanPatternsOutsideProject: true,
}),
new NodePolyfillPlugin(),
],
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".scss"],
fallback: {
process: require.resolve("process"),
stream: require.resolve("stream-browserify"),
"readable-stream": require.resolve("readable-stream"),
path: require.resolve("path-browserify"),
zlib: require.resolve("browserify-zlib"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
assert: require.resolve("assert"),
module: false,
dgram: false,
dns: "mock",
fs: false,
http2: false,
net: false,
tls: false,
child_process: false,
},
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "public", "assets/"),
publicPath: "/assets/",
},
snapshot: {
managedPaths: ["/node_modules/#types/*"],
},
// node : {
// }
};
My webpack.dev.js
const { DefinePlugin } = require("webpack");
const WebpackMerge = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = WebpackMerge.merge(common, {
mode: "development",
devtool: "inline-source-map",
plugins: [
new DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development")
})
],
devServer: {
static: "./public",
compress: true,
host: "0.0.0.0",
port: 9000,
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:5000"
},
hot: true,
liveReload: false
}
});
I'm expecting only the component i edited should refresh, not the whole page. When I use NextJs/cra or vite i can be able to do that. What's the thing I'm doing wrong?
Thank you.

ReactJs Image Not found on production mode

I have pushed my app on my repo.
The images are imported to the path:
react-blog-app/blob/gh-pages/static/media/_resized_300.353f8ae3.jpg
However on the page the images are not found.
The URL is pointing to
react-blog-app/static/media/_resized_300.353f8ae3.jpg
I have added 'contentBane' on config.json
{
"apiEndpoint": "https://jsonplaceholder.typicode.com/posts" ,
"devServer": {
"contentBase": "./build"
}
}
Do you have any suggestion to fix this issue?
Thanks in advance.
I think you didn't add file-loader to module.rules. the code below is minimal webpack configuration for react app.
webpack.config.js
require("dotenv").config();
const path = require("path");
const webpack = require("webpack");
// Plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "production",
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
resolve: { extensions: ["*", ".js", ".jsx"] },
// externals: {
// "react-js": "React",
// "react-dom": "ReactDOM"
// },
module: {
rules: [
{
test: /\.(js|jsx|es6|es|mjs)$/,
include: path.resolve(__dirname, "src"),
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.ejs",
filename: "index.html",
title: "My React App",
inject: "body",
scriptLoading: "defer",
cache: true
}),
new webpack.ProgressPlugin()
],
devtool: "source-map",
devServer: {
hot: true,
port: 8000,
open: true
}
};
.babelrc
{
"presets": ["#babel/preset-react"],
"env": {
"development": {
"presets": [["#babel/preset-react", { "development": true }]]
}
}
}
package.json
"scripts": {
"start:dev": "cross-env NODE_ENV=development \"webpack-dev-server\"",
"build": "webpack"
}

webpack-dev-server exits with status code 1

I have three files webpack.config.base, webpack.config.dev, webpack.config.prod with respective code:
** webpack.config.base**
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const parentDir = path.join(__dirname, '../');
module.exports = {
entry: [
path.join(parentDir, 'index.js'),
],
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
use: [
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
'url-loader?limit=10000',
],
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
}),
},
],
},
output: {
path: `${parentDir}/dist`,
filename: 'bundle.js',
},
plugins: [
new ExtractTextPlugin({
filename: 'main.css',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
};
** webpack.config.dev**
const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require('path');
const parentDir = path.join(__dirname, '../');
const config = require('./webpack.config.base.js');
module.exports = merge(config, {
devServer: {
inline: true,
colors: true,
progress: true,
hot: true,
open: true,
bail: true,
quiet: true,
contentBase: parentDir,
port: 7070,
historyApiFallback: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
});
Production:
const webpack = require('webpack');
const config = require('./webpack.config.base.js');
config.plugins = config.plugins.concat([
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
]);
module.exports = config;
Script in package.json is
"dev": "./node_modules/.bin/webpack-dev-server --mode development --config ./webpack/webpack.config.dev.js",
On using npm run dev webpack dev server exits with status code-1. can anybody please tell where I'm getting wrong? Versions I am using is:
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
Thanks in advance. I have tried using this same in single file and it runs well, but when divided like this in three different files that time it creates this error. All these files are in webpack folder at root directory.
These three options were creating an issue:
bail: true,
quiet: true,
colors: true
I removed and now working fine. If anybody can update why it was so will be great for further understanding.

Webpack 3.10.0 and babel-polyfill issue at runtime

I'm currently using Webpack 3.10.0 along with following babel packages.
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "~6.13.2",
"babel-preset-react": "~6.11.1",
My issue is, during runtime I get the following error on the browser console and the page doesn't load.
bundle.js:737 Uncaught Error: Cannot find module "babel-polyfill"
at webpackMissingModule (bundle.js:737)
at Object.<anonymous> (bundle.js:737)
at __webpack_require__ (bundle.js:679)
at bundle.js:725
at bundle.js:728
My webpack.config.js looks as below.
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: {
bundle: ['babel-polyfill', './Main.js'],
bundleIntegrated: ['babel-polyfill', './MainInt.js']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../assets/myproject')
},
target: 'web',
devServer: {
inline: true,
port: 3000,
proxy: {
'/myct/**': {
target: 'http://localhost:9000',
secure: false,
changeOrigin: true
}
}
},
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: ['.js', '.jsx'],
alias: {
config: path.join(__dirname, 'config/config.dev')
}
},
module: {
rules: [
{
test: /.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: "eslint-loader",
}
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|__tests__)/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
],
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader",
],
},
{
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
use: [
{
loader: "file-loader?name=../assets/mastering/fonts/[name].[ext]",
},
],
},
],
}
}
I have imported babel-polyfill into Main.js and MainInt.js files as instructed in https://babeljs.io/docs/usage/polyfill/ and I haven't used new webpack.optimize.ModuleConcatenationPlugin().
Any ideas on how to resolve this issue. Thanks in advance :)
I found the issue. Thank you everyone for your help.
Giving the full path in filename fixed the issue.
output: {
path: path.resolve(__dirname, '../assets/myproject'),
filename: '../assets/myproject/[name].js',
},

extract-text-webpack-plugin error on production file

i have a problem with extract-text-webpack-plugin when i execute webpack to production. the error is this:
sh-3.2# yarn build
yarn build v0.24.5
$ webpack --config webpack.config.prod.js -p --watch --progress
10% building modules 1/1 modules 0 active
Webpack is watching the files…
78% advanced chunk optimization/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:188
chunk.sortModules();
^
TypeError: chunk.sortModules is not a function
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3083:16
at eachOfArrayLike (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1003:9)
at eachOf (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1051:5)
at Object.eachLimit (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:3145:5)
at Compilation.<anonymous> (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
at Compilation.applyPluginsAsyncSeries (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/tapable/lib/Tapable.js:142:13)
at Compilation.seal (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:570:8)
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compiler.js:474:16
at /Users/bcgarcia/Documents/tutoriales/redux/node_modules/tapable/lib/Tapable.js:225:11
at _addModuleChain (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:472:11)
at processModuleDependencies.err (/Users/bcgarcia/Documents/tutoriales/redux/node_modules/webpack/lib/Compilation.js:443:13)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
error Command failed with exit code 1.
here is my webpack.config file to production:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
entry: [
path.join(__dirname, 'src', 'index.jsx')
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: { loader: 'babel-loader'}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2)$/,
use: 'url-loader?prefix=font/&limit=5000'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) || 'development' }
}),
new webpack.optimize.OccurrenceOrderPlugin(true),
new extractTextWebpackPlugin(path.join(__dirname, 'build', 'styles.css')),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
title: "redux tuto",
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html'
}),
new webpack.optimize.UglifyJsPlugin({
compress: { warning: false },
mangle: { except: ['$super', 'exports', 'require'] }
}),
],
target: 'web',
devServer: {
host: '0.0.0.0',
hot: false,
port: 8081,
inline: true,
contentBase: path.join(__dirname, './build'),
historyApiFallback: true,
}
}
and the versions of packages are the next:
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.18.2",
"webpack": "2.2.1",
"webpack-dev-server": "2.4.0"
anyone knows wich is the problem ? i have updated node and the error persist.
thanks in advance.

Resources