Develop Reference

Once there is error, webpack-dev-server will stop working and browser is not auto updated again even after error is fixed

I am using Webpack 5 to build a static HTML boilerplate. Everything works fine, Webpack is compiled successfully and browser is updated whenever I make change to HTML, SCSS/CSS or JS file in my source code.
The problem happens if there is error in the code, WDS will stop working and browser will display an error message in the console, for example:
Even after I fix the error and Webpack says that it is compiled successfully, WDS still does not work and the browser keeps stuck at the error. I have to reload the browser manually to make it work again.
Can anyone please help me? What should I do to make browser updated again after error is fixed?
I found the same question webpack-dev-server stops compiling after a syntax error, requires restart, but there is no proper answer to it so I have to ask another one.
This is my webpack.common.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const fs = require('fs');
// Prepare plugins
const plugins = [
new MiniCssExtractPlugin({
filename: './style/main.css?v=[contenthash]',
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'body',
filename: 'index.html',
minify: {
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}),
];
// Create more HtmlWebpackPlugin
const files = fs.readdirSync(path.resolve('.', 'src/pages'), 'utf8');
files.forEach((file) => {
const page = new HtmlWebpackPlugin({
template: `src/pages/${file}`,
inject: 'body',
filename: `pages/${file}`,
minify: {
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
});
plugins.push(page);
});
module.exports = {
entry: './src/scripts/index.js',
output: {
path: path.resolve('.', 'build'),
filename: './js/bundle.js?v=[contenthash]',
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
exclude: [/node_modules/],
},
{
test: /\.(s?css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-hot-loader',
'css-loader',
'sass-loader',
'import-glob-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
plugins: () => [require('autoprefixer')],
},
},
},
],
},
{
test: /\.(gif|png|jpe?g|svg|woff|eot|ttf|woff2)$/,
// use: 'url-loader',
type: 'asset/resource',
},
{
test: /\.html$/i,
loader: 'html-loader', // export HTML as string. HTML is minimized when the compiler demands.
options: {
sources: false,
},
},
],
},
plugins,
};
This is my webpack.dev.js:
const path = require('path');
const { merge } = require('webpack-merge');
const WebpackNotifierPlugin = require('webpack-notifier');
const ESLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve('.', 'src'), // source of static assets
port: 1802, // port to run dev-server
hot: true, // hot reload
watchContentBase: true,
// open: true, // immediately open browser to show localhost:1802 when start script
},
plugins: [
new ESLintPlugin({}),
new StylelintPlugin({ fix: true }),
new WebpackNotifierPlugin({ onlyOnError: true }),
],
});
This is my package.json
{
"name": "static-web-boilerplate",
"version": "1.0.0",
"description": "Simple boilerplate for developing static web projects",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env ENV=development webpack serve --config webpack/webpack.dev.js --progress",
"start:prod": "npm run build && serve build",
"build": "cross-env ENV=production webpack --config webpack/webpack.prod.js --progress --stats-error-details"
},
"author": "Hau Pham",
"license": "ISC",
"dependencies": {
"#babel/runtime": "^7.14.6",
"autoprefixer": "^10.2.6",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"copy-webpack-plugin": "^9.0.1",
"css-minimizer-webpack-plugin": "^3.0.2",
"eslint-webpack-plugin": "^2.5.4",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^1.6.1",
"serve": "^12.0.0",
"stylelint-webpack-plugin": "^2.2.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack-merge": "^5.8.0",
"webpack-notifier": "^1.13.0"
},
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/plugin-transform-runtime": "^7.14.5",
"#babel/preset-env": "^7.14.7",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"cross-env": "^7.0.3",
"css-hot-loader": "^1.4.4",
"css-loader": "^5.2.6",
"eslint": "^7.29.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-stylelint": "^13.1.1",
"eslint-import-resolver-webpack": "^0.13.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-html": "^6.1.2",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-prettier": "^3.4.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"import-glob-loader": "^1.1.0",
"node-sass": "^6.0.1",
"postcss-loader": "^6.1.0",
"prettier": "^2.3.2",
"sass-loader": "^12.1.0",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-standard": "^22.0.0",
"stylelint-config-standard-scss": "^1.1.0",
"stylelint-scss": "^3.19.0",
"terser-webpack-plugin": "^5.1.4",
"url-loader": "^4.1.1",
"webpack": "^5.41.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}

After many hours of research, I have found the solution. According to comment on webpack-dev-server github page, updating webpack-dev-server to version 4 should fix this. I tried and it did fix the issue!
(At the time of this answer, the newest version 4 is 4.0.0-beta.3)

React Development and Build version not working in IE 11 and Edge - Webpack/Babel

Development and build version not working in IE 11 and Edge. Here are my webpack config and package json file.
I have used below repo.
https://github.com/kriasoft/react-starter-kit
I have been trying to fix this issue using various babel packages and webpack configurations.
Arrow function seems not to be working.
Here's the error.
webpack.config.js
/**
* React Starter Kit (https://www.reactstarterkit.com/)
*
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
*
* This source code is licensed under the MIT license found in the
* LICENSE.txt file in the root directory of this source tree.
*/
import fs from 'fs';
import path from 'path';
import webpack from 'webpack';
import WebpackAssetsManifest from 'webpack-assets-manifest';
import nodeExternals from 'webpack-node-externals';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import overrideRules from './lib/overrideRules';
import pkg from '../package.json';
const ROOT_DIR = path.resolve(__dirname, '..');
const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args);
const SRC_DIR = resolvePath('src');
const BUILD_DIR = resolvePath('build');
const isDebug = !process.argv.includes('--release');
const isVerbose = process.argv.includes('--verbose');
const isAnalyze =
process.argv.includes('--analyze') || process.argv.includes('--analyse');
const reScript = /\.(js|jsx|mjs)$/;
const reStyle = /\.(css|less|styl|sass|sss|scss)$/;
const reImage = /\.(bmp|gif|jpg|jpeg|png|svg)$/;
const staticAssetName = isDebug
? '[path][name].[ext]?[hash:8]'
: '[hash:8].[ext]';
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
console.log('isDebug', isDebug)
const config = {
context: ROOT_DIR,
mode: isDebug ? 'development' : 'production',
output: {
path: resolvePath(BUILD_DIR, 'public/assets'),
publicPath: '/assets/',
pathinfo: isVerbose,
filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
chunkFilename: isDebug
? '[name].chunk.js'
: '[name].[chunkhash:8].chunk.js',
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
// Allow absolute paths in imports, e.g. import Button from 'components/Button'
// Keep in sync with .flowconfig and .eslintrc
modules: ['node_modules', 'src'],
},
module: {
// Make missing exports an error instead of warning
strictExportPresence: true,
rules: [
// Rules for JS / JSX
{
test: reScript,
include: [SRC_DIR, resolvePath('tools')],
loader: 'babel-loader',
options: {
// https://github.com/babel/babel-loader#options
cacheDirectory: isDebug,
// https://babeljs.io/docs/usage/options/
babelrc: false,
configFile: false,
presets: [
// A Babel preset that can automatically determine the Babel plugins and polyfills
// https://github.com/babel/babel-preset-env
[
'#babel/preset-env',
{
targets: {
browsers: pkg.browserslist,
},
forceAllTransforms: !isDebug, // for UglifyJS
modules: false,
useBuiltIns: false,
debug: false,
},
],
// Flow
// https://github.com/babel/babel/tree/master/packages/babel-preset-flow
'#babel/preset-flow',
// JSX
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
['#babel/preset-react', { development: isDebug }]
],
plugins: [
'relay',
// Experimental ECMAScript proposals
'#babel/plugin-proposal-class-properties',
'#babel/plugin-syntax-dynamic-import',
// Treat React JSX elements as value types and hoist them to the highest scope
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
...(isDebug ? [] : ['#babel/transform-react-constant-elements']),
// Replaces the React.createElement function with one that is more optimized for production
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
...(isDebug ? [] : ['#babel/transform-react-inline-elements']),
// Remove unnecessary React propTypes from the production build
// https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
...(isDebug ? [] : ['transform-react-remove-prop-types']),
],
},
},
// Rules for Style Sheets
{
test: reStyle,
rules: [
// Convert CSS into JS module
{
issuer: { not: [reStyle] },
use: 'isomorphic-style-loader',
},
// Process external/third-party styles
{
exclude: SRC_DIR,
loader: 'css-loader',
options: {
sourceMap: isDebug,
},
},
// Process internal/project styles (from src folder)
{
include: SRC_DIR,
loader: 'css-loader',
options: {
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: {
localIdentName: isDebug
? '[name]-[local]-[hash:base64:5]'
: '[hash:base64:5]',
},
},
},
// Apply PostCSS plugins including autoprefixer
{
loader: 'postcss-loader',
options: {
config: {
path: './tools/postcss.config.js',
},
},
},
// Compile Less to CSS
// https://github.com/webpack-contrib/less-loader
// Install dependencies before uncommenting: yarn add --dev less-loader less
// {
// test: /\.less$/,
// loader: 'less-loader',
// },
// Compile Sass to CSS
// https://github.com/webpack-contrib/sass-loader
// Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
// {
// test: /\.(scss|sass)$/,
// loader: 'sass-loader',
// },
],
},
// Rules for images
{
test: reImage,
oneOf: [
// Inline lightweight images into CSS
{
issuer: reStyle,
oneOf: [
// Inline lightweight SVGs as UTF-8 encoded DataUrl string
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
// Inline lightweight images as Base64 encoded DataUrl string
{
loader: 'url-loader',
options: {
name: staticAssetName,
limit: 4096, // 4kb
},
},
],
},
// Or return public URL to image resource
{
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
],
},
// Convert plain text into JS module
{
test: /\.txt$/,
loader: 'raw-loader',
},
// Convert Markdown into HTML
{
test: /\.md$/,
loader: path.resolve(__dirname, './lib/markdown-loader.js'),
},
// Return public URL for all assets unless explicitly excluded
// DO NOT FORGET to update `exclude` list when you adding a new loader
{
exclude: [reScript, reStyle, reImage, /\.json$/, /\.txt$/, /\.md$/],
loader: 'file-loader',
options: {
name: staticAssetName,
},
},
// Exclude dev modules from production build
...(isDebug
? []
: [
{
test: resolvePath(
'node_modules/react-deep-force-update/lib/index.js',
),
loader: 'null-loader',
},
]),
],
},
// Don't attempt to continue if there are any errors.
bail: !isDebug,
cache: isDebug,
// Specify what bundle information gets displayed
// https://webpack.js.org/configuration/stats/
stats: {
cached: isVerbose,
cachedAssets: isVerbose,
chunks: isVerbose,
chunkModules: isVerbose,
colors: true,
hash: isVerbose,
modules: isVerbose,
reasons: isDebug,
timings: true,
version: isVerbose,
},
// Choose a developer tool to enhance debugging
// https://webpack.js.org/configuration/devtool/#devtool
devtool: isDebug ? 'cheap-module-inline-source-map' : 'source-map',
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = {
...config,
name: 'client',
target: 'web',
entry: {
client: ['#babel/polyfill', './src/client.js'],
},
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': true,
__DEV__: isDebug,
}),
// Emit a file with assets paths
// https://github.com/webdeveric/webpack-assets-manifest#options
new WebpackAssetsManifest({
output: `${BUILD_DIR}/asset-manifest.json`,
publicPath: true,
writeToDisk: true,
customize: ({ key, value }) => {
// You can prevent adding items to the manifest by returning false.
if (key.toLowerCase().endsWith('.map')) return false;
return { key, value };
},
done: (manifest, stats) => {
// Write chunk-manifest.json.json
const chunkFileName = `${BUILD_DIR}/chunk-manifest.json`;
try {
const fileFilter = file => !file.endsWith('.map');
const addPath = file => manifest.getPublicPath(file);
const chunkFiles = stats.compilation.chunkGroups.reduce((acc, c) => {
acc[c.name] = [
...(acc[c.name] || []),
...c.chunks.reduce(
(files, cc) => [
...files,
...cc.files.filter(fileFilter).map(addPath),
],
[],
),
];
return acc;
}, Object.create(null));
fs.writeFileSync(chunkFileName, JSON.stringify(chunkFiles, null, 2));
} catch (err) {
console.error(`ERROR: Cannot write ${chunkFileName}: `, err);
if (!isDebug) process.exit(1);
}
},
}),
...(isDebug
? []
: [
// Webpack Bundle Analyzer
// https://github.com/th0r/webpack-bundle-analyzer
...(isAnalyze ? [new BundleAnalyzerPlugin()] : []),
]),
],
// Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
},
},
},
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
// https://webpack.js.org/configuration/node/
// https://github.com/webpack/node-libs-browser/tree/master/mock
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = {
...config,
name: 'server',
target: 'node',
entry: {
server: ['#babel/polyfill', './src/server.js'],
},
output: {
...config.output,
path: BUILD_DIR,
filename: '[name].js',
chunkFilename: 'chunks/[name].js',
libraryTarget: 'commonjs2',
},
// Webpack mutates resolve object, so clone it to avoid issues
// https://github.com/webpack/webpack/issues/4817
resolve: {
...config.resolve,
},
module: {
...config.module,
rules: overrideRules(config.module.rules, rule => {
// Override babel-preset-env configuration for Node.js
if (rule.loader === 'babel-loader') {
return {
...rule,
options: {
...rule.options,
presets: rule.options.presets.map(preset =>
preset[0] !== '#babel/preset-env'
? preset
: [
'#babel/preset-env',
{
targets: {
node: pkg.engines.node.match(/(\d+\.?)+/)[0],
},
modules: false,
useBuiltIns: false,
debug: false,
},
],
),
},
};
}
// Override paths to static assets
if (
rule.loader === 'file-loader' ||
rule.loader === 'url-loader' ||
rule.loader === 'svg-url-loader'
) {
return {
...rule,
options: {
...rule.options,
emitFile: false,
},
};
}
return rule;
}),
},
externals: [
'./chunk-manifest.json',
'./asset-manifest.json',
nodeExternals({
whitelist: [reStyle, reImage],
}),
],
plugins: [
// Define free variables
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
'process.env.BROWSER': false,
__DEV__: isDebug,
}),
// Adds a banner to the top of each generated chunk
// https://webpack.js.org/plugins/banner-plugin/
new webpack.BannerPlugin({
banner: 'require("source-map-support").install();',
raw: true,
entryOnly: false,
}),
],
// Do not replace node globals with polyfills
// https://webpack.js.org/configuration/node/
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
};
export default [clientConfig, serverConfig];
package.json
{
"name": "web",
"version": "0.0.0",
"private": true,
"engines": {
"node": ">=8.16.2",
"npm": ">=6.4.1"
},
"browserslist": [
">1%",
"ie 11"
],
"dependencies": {
"#babel/polyfill": "^7.7.0",
"#date-io/moment": "^1.3.11",
"#material-ui/core": "^4.7.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.33",
"#material-ui/pickers": "^3.2.8",
"#material-ui/styles": "^4.6.0",
"aws-sdk": "^2.580.0",
"axios": "^0.19.0",
"babel-plugin-relay": "^7.1.0",
"body-parser": "^1.19.0",
"classnames": "^2.2.6",
"clsx": "^1.0.4",
"cookie-parser": "^1.4.3",
"dotenv": "^8.2.0",
"express": "^4.16.3",
"express-graphql": "~0.8.0",
"express-jwt": "^5.3.1",
"express-session": "^1.17.0",
"fs": "0.0.1-security",
"graphql": "^14.5.8",
"history": "^4.10.1",
"isomorphic-style-loader": "^5.1.0",
"jsonwebtoken": "^8.3.0",
"material-ui-color-picker": "^3.2.0",
"node-fetch": "^2.2.0",
"normalize.css": "^8.0.1",
"passport": "^0.4.0",
"passport-facebook": "^3.0.0",
"passport-local": "^1.0.0",
"pg": "^7.14.0",
"pretty-error": "^2.1.1",
"prismjs": "^1.17.1",
"prop-types": "^15.6.2",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-cookie": "^4.0.1",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"react-material-ui-form-validator": "^2.0.9",
"react-page-loading": "^1.0.2",
"react-perfect-scrollbar": "^1.5.3",
"react-relay": "^7.1.0",
"react-router-dom": "^5.1.2",
"reconnecting-websocket": "^4.2.0",
"relay-runtime": "^7.1.0",
"sequelize": "^5.21.2",
"serialize-javascript": "^2.1.0",
"source-map-support": "^0.5.9",
"sqlite3": "^4.0.8",
"striptags": "^3.1.1",
"subscriptions-transport-ws": "^0.9.16",
"universal-router": "^8.3.0",
"validate.js": "^0.13.1",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/node": "^7.7.0",
"#babel/plugin-proposal-class-properties": "^7.7.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-transform-react-constant-elements": "^7.0.0",
"#babel/plugin-transform-react-inline-elements": "^7.0.0",
"#babel/preset-env": "^7.7.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.7.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.18",
"browser-sync": "^2.24.7",
"chokidar": "^3.3.0",
"css-loader": "^3.2.0",
"cssnano": "^4.1.10",
"enzyme": "^3.6.0",
"eslint": "^5.6.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^6.6.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-loader": "^3.0.2",
"eslint-plugin-css-modules": "^2.9.1",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^23.0.4",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.11.1",
"execa": "^3.3.0",
"file-loader": "^4.2.0",
"flow-bin": "^0.112.0",
"front-matter": "^3.0.2",
"glob": "^7.1.6",
"husky": "^3.0.9",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.9.0",
"lint-staged": "^9.4.3",
"log-symbols": "^3.0.0",
"markdown-it": "^10.0.0",
"mkdirp": "^0.5.1",
"node-sass": "^4.13.0",
"null-loader": "^3.0.0",
"opn-cli": "^5.0.0",
"pixrem": "^5.0.0",
"pleeease-filters": "^4.0.0",
"postcss": "^7.0.2",
"postcss-calc": "^7.0.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"postcss-pseudoelements": "^5.0.0",
"prettier": "^1.19.1",
"puppeteer": "^2.0.0",
"raw-loader": "^3.1.0",
"react-deep-force-update": "^2.1.3",
"react-dev-utils": "^9.1.0",
"react-error-overlay": "^6.0.3",
"react-test-renderer": "^16.12.0",
"relay-compiler": "^7.1.0",
"relay-config": "^7.1.0",
"rimraf": "^3.0.0",
"sass-loader": "^8.0.0",
"stylelint": "^12.0.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-order": "^3.1.1",
"svg-url-loader": "^3.0.2",
"terminate": "^2.1.2",
"url-loader": "^2.2.0",
"wait-on": "^3.3.0",
"webpack": "^4.19.1",
"webpack-assets-manifest": "^3.0.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-middleware": "^3.3.0",
"webpack-hot-middleware": "^2.24.2",
"webpack-node-externals": "^1.7.2"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --no-ignore --fix",
"git add --force"
],
"*.{json,md,graphql}": [
"prettier --write",
"git add --force"
],
"*.{css,less,styl,scss,sass,sss}": [
"stylelint --fix",
"git add --force"
]
},
"scripts": {
"lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
"lint-css": "stylelint \"src/**/*.{css,less,styl,scss,sass,sss}\"",
"lint": "yarn run lint-js && yarn run lint-css",
"fix-js": "yarn run lint-js --fix",
"fix-css": "yarn run lint-css --fix",
"fix": "yarn run fix-js && yarn run fix-css",
"flow": "flow",
"flow:check": "flow check",
"test": "jest",
"test-watch": "yarn run test --watch --notify",
"test-cover": "yarn run test --coverage",
"coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
"clean": "babel-node tools/run clean",
"copy": "babel-node tools/run copy",
"bundle": "babel-node tools/run bundle",
"build": "babel-node tools/run build",
"build-stats": "yarn run build --release --analyse",
"deploy": "babel-node tools/run deploy",
"render": "babel-node tools/run render",
"serve": "babel-node tools/run runServer",
"start": "babel-node tools/run start relay",
"relay": "relay-compiler --src ./src --schema ./schema.graphql"
}
}

It was related to query-string package.
Issue has been resolved.
Ref: https://stackoverflow.com/a/49985749/7398574

Webpack intermittent react Jenkins build with javascript errors

My project environment is , React with redux and redux-saga , webpack
Jenkins is used for CI/CD
since a month , we are getting a strange issue, the Jenkins (webpack) build & deployment is successful however when I access the portal it shows a blank page because of below Javascript error
Uncaught ReferenceError: saga is not defined
at Module.1148 (main.44c97d10353333934fe5.bundle.js:1)
at __webpack_require__ (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at Object.646 (main.44c97d10353333934fe5.bundle.js:1)
at __webpack_require__ (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at checkDeferredModules (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at Array.webpackJsonpCallback [as push] (manifest.6a34ff8be70a737e5aa6.bundle.js:1)
at vendor.fef8d73f71dc764a97a1.bundle.js:1
when looked at the failing file in code base the sagas.js file has "export default sagas" , so the s in sagas is truncated during build process hence the javascript error
After re-running the same build in Jenkins then it is producing a clean build and application works normally without above error
and strangely this behaviour doesn't occur on every build it is intermittent
another error similar to this is
built version of utag.js with errors
actual version of utag.js from code base
The main issue is I couldn't replicate the issue locally , I have run the webpack build on the branch which resulted in javascript error - but no luck , everytime webpack produced a clean build locally
Here are my config files
Package.json
{
"name": "portal",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "webpack-dev-server --open --inline --progress --env development --config webpack/dev.config.js",
"build:prod": "webpack --env production --config webpack/prod.config.js",
"build:test": "webpack --env test --config webpack/prod.config.js",
"stylelint": "stylelint '**/*.scss', '**/*.css'",
"stylelint:silentexit": "stylelint '**/*.scss', '**/*.css'; exit 0",
"jslint": "eslint . --fix",
"jslint:silentexit": "eslint .; exit 0",
"test": "npm run jslint && npm run test:unit",
"test:unit": "jest --colors",
"test:watch": "jest --watch --passWithNoTests",
"test:coverage": "jest --coverage -u --colors",
"storybook": "start-storybook -p 9001 -c .storybook",
"generateSvgIconComponents": "styled-svg src/icons/*.svg --size=small:18x18 --size=medium:24x24 --size=large:36x36"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"dependencies": {
"#babel/polyfill": "^7.4.4",
"#rebass/components": "^4.0.0-1",
"acorn": "^6.2.0",
"babel-plugin-react-css-modules": "^5.2.6",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.3",
"connected-react-router": "^6.5.2",
"fixed-data-table-2": "^0.8.26",
"glamor": "^2.20.40",
"history": "^4.9.0",
"html-webpack-plugin": "^3.2.0",
"javascript-excel": "^1.0.3",
"jspdf": "^1.5.3",
"jspdf-react": "^1.0.10",
"lodash": "^4.17.14",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"qs": "^6.6.0",
"react": "^16.8.2",
"react-bootstrap": "^0.32.4",
"react-compound-slider": "^2.3.0",
"react-csv": "^1.1.1",
"react-data-export": "^0.5.0",
"react-draggable": "^4.0.3",
"react-list-drag-and-drop": "^0.9.1",
"react-markdown": "^4.2.2",
"react-pdf": "^4.1.0",
"react-redux": "^6.0.1",
"react-router-dom": "^5.0.1",
"react-tooltip": "^3.10.0",
"react-virtualized": "^9.21.1",
"redux": "^4.0.1",
"redux-actions": "^2.6.4",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"styled-components": "^4.3.1",
"styled-system": "^4.2.4",
"validate.js": "^0.13.1",
"webpack-merge": "^4.2.2",
"whatwg-fetch": "^3.0.0",
"xlsx": "^0.14.3"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-transform-react-jsx-source": "^7.5.0",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#storybook/react": "^4.1.18",
"babel-eslint": "^10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-root-import": "^6.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.23.0",
"clean-webpack-plugin": "^2.0.2",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^2.1.1",
"deep-freeze": "0.0.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.14.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-react": "^7.13.0",
"faker": "^4.1.0",
"html-loader": "^0.5.5",
"jest": "^24.8.0",
"jest-enzyme": "^7.0.1",
"jest-react-hooks-mock": "^1.1.0",
"node-fetch": "^2.6.0",
"pdf2json": "^1.1.8",
"react-dom": "^16.7.0",
"redux-mock-store": "^1.5.3",
"redux-saga-testing": "^1.0.5",
"sinon": "^7.3.2",
"style-loader": "^0.23.1",
"styled-svg": "^2.4.7",
"stylelint": "^9.10.1",
"stylelint-config-standard": "^18.3.0",
"svg-url-loader": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.1.3",
"webpack": "4.41.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
}
}
webpack/base.config.js
'use strict'
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const dirName = __dirname.replace('webpack','');
const util = require('./util');
// cleans 'dist' folder everytime before a new build
const cleanPLugin = env => (new CleanWebpackPlugin({
root: path.join(dirName, util.getRootContext(env) ),
verbose: true,
dry: false
}));
const AnalyzerPlugin = new BundleAnalyzerPlugin(
{
analyzerMode: 'none'
}
);
const copyWebpackPlugin = env => ( new CopyPlugin([ {
from : path.join(dirName, 'src/assets/static'),
to : path.join(dirName, `dist/${util.getRootContext(env)}/assets`)
}, {
from : path.join(dirName, 'src/assets/pages'),
to : path.join(dirName, `dist/${util.getRootContext(env)}`)
}
]));
const HTMLPlugin = new HtmlWebpackPlugin({
template: path.join(dirName, 'src/scripts/index.html'),
chunksSortMode: 'none'
});
module.exports = (env) => {
// BUILDING WEBPACK
const config = {};
config.plugins = [cleanPLugin(env), AnalyzerPlugin, HTMLPlugin, copyWebpackPlugin(env)]
config.entry = ["whatwg-fetch", "babel-polyfill", path.join(dirName, '/src/scripts/index.js')]
config.output = {
path: path.join(dirName, '/dist'),
filename: '[name].build.js',
chunkFilename: '[name].bundle.js',
}
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif|woff|ttf|woff2)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
{
test: /\.(css|less)$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
config.resolve = {
extensions: [ '.js', '.jsx', '.json', '.css' ],
alias: {
DesignSystem: path.resolve(dirName, 'src/design-system/'),
Icons: path.resolve(dirName, 'src/icons/'),
Scripts: path.resolve(dirName, 'src/scripts/'),
CMS: path.resolve(dirName, 'cms/'),
}
}
config.node = { fs: 'empty' }
return config
}
webpack/prod.config.js
const merge = require('webpack-merge');
const baseConfig = require('./base.config.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const util = require('./util');
const dirName = __dirname.replace('webpack','');
module.exports = env => (merge(baseConfig(env),
{
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial'
}
}
},
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
ecma: 8,
mangle: false,
keep_classnames: true,
keep_fnames: true
}
})
]
},
output: {
path: path.join(dirName, `./dist/${util.getRootContext(env)}`),
publicPath: `/${util.getRootContext(env)}/`,
chunkFilename: '[name].[chunkhash].bundle.js',
filename: '[name].[chunkhash].bundle.js'
},
mode: 'production'
}
));
npm run build:prod is the command which runs this build
Any tips or help would be greatly appreciated.
Thanks!!

How to remove ESlint error no-unresolved from importing 'react'

no-unresolved https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
After installing eslint-import-resolver-webpack
My .eslintrc config
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"],
"semi": ["error", "always"],
"react/jsx-filename-extension": 0,
"react/prop-types": 0,
"react/no-find-dom-node": 0,
"jsx-a11y/label-has-for": 0
},
"globals": {
"document": true,
"window": true
},
"env": {
"jest": true
},
"settings": {
"import/resolver": "webpack"
}
}
My package.json
{
"name": "coinhover",
"version": "0.0.1",
"main": "index.js",
"author": "Leon Gaban",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server",
"dev": "webpack-dev-server",
"production": "webpack -p",
"build": "webpack -p",
"test": "eslint app && jest",
"test:fix": "eslint --fix app"
},
"now": {
"name": "coinhover",
"engines": {
"node": "7.4.x"
},
"alias": "coinhover.io"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.16.1",
"babel-runtime": "6.11.6",
"jsonwebtoken": "^7.4.1",
"prop-types": "^15.5.10",
"ramda": "^0.24.1",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "next",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.5.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"enzyme": "^2.8.2",
"enzyme-to-json": "^1.5.1",
"eslint": "^4.3.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-addons-test-utils": "15.0.0-rc.2",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.5",
"style-loader": "^0.18.1",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
Webpack
import fs from 'fs'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'
import chalk from 'chalk'
const coinhover = path.resolve(__dirname, "coinhover")
const src = path.resolve(__dirname, "public/src")
const log = console.log
// https://gist.github.com/leongaban/dc92204454b3513e511645af98107775
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/public/src/index.html',
filename: 'index.html',
inject: 'body'
})
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: "coinhover.css",
disable: false,
allChunks: true
})
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: "public/src/static", to: "static" }])
const PATHS = {
app: src,
build: coinhover,
}
const LAUNCH_COMMAND = process.env.npm_lifecycle_event
const isProduction = LAUNCH_COMMAND === 'production'
process.env.BABEL_ENV = LAUNCH_COMMAND
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"],
publicPath: coinhover
})
}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
resolve: {
modules: ['node_modules', path.resolve(__dirname, 'public/src')]
}
}
const developmentConfig = {
devServer: {
publicPath: "",
contentBase: path.join(__dirname, "dist"),
// hot: false,
quiet: true,
inline: true,
compress: true,
stats: "errors-only",
open: true
},
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
// new webpack.HotModuleReplacementPlugin()
]
}
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
}
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`)
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
)

You can add an option to ignore case:
"rules": {
"import/no-unresolved": [
2,
{ "caseSensitive": false }
]
}
This thread at github also describes how the linter was checking case for parts of the path which come before the folder containing package.json. If you for example have the path:
C:/Workspace/app and you navigate to it using cd C:/workspace/app (lowercase workspace), the linter would also give an error on the imports. Looks like it should now be fixed, but perhaps you are still using an older version.

Try installing eslint-import-resolver-webpack and adding this to your .eslintrc:
"settings": {
"import/resolver": "webpack"
}

Try
resolve: {
modules: [path.resolve(__dirname, 'public/src'), 'node_modules', path.resolve('node_modules')],
}

it helped me
If you would like to enable this rule, then:
Enable the rule within your config: 'import/no-unresolved': 'error'
Install and configure the TypeScript import resolver: eslint-import-resolver-typescript

The problem is that your webpack config is written in ES6 format, which doesn't play well with eslint-import-resolver-webpack.
So, you either refactor your webpack.config.js using ES5 syntax, or you get rid of eslint-import-resolver-webpack.
See here for the full solution: eslint plugin docs

SyntaxError: Unexpected token

I am trying to configure my application (https://github.com/freeCodeCamp/meeting-for-good) for testing. I am using jest. However, I get an error when I run my test. It looks like path to my AboutDialog component is failing to transpile.
zach#zach-VirtualBox:~/Documents/Code/fcc-for-good/meeting-for-good$ npm run test
> meeting-for-good#1.0.12 test /home/zach/Documents/Code/fcc-for-good/meeting-for-good
> cross-env NODE_ENV=test jest
FAIL __tests__/test.js
● Test suite failed to run
/home/zach/Documents/Code/fcc-for-good/meeting-for-good/client/components/AboutDialog/about-dialog.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.AboutDialog {
^
SyntaxError: Unexpected token .
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (client/components/AboutDialog/AboutDialog.js:7:20)
at Object.<anonymous> (__tests__/test.js:2:20)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 8.204s
Ran all test suites.
I am trying to import my AboutDialog component to my test.
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import cssModules from 'react-css-modules';
import PropTypes from 'prop-types';
import styles from './about-dialog.css';
const inlineStyles = {
modal: { content: { width: '630px', maxWidth: '630px' }, bodyStyle: { paddingTop: 10, fontSize: '25px' } },
};
const AboutDialog = (props) => {
const { cbOpenModal, openModal } = props;
const actions = [
<FlatButton label="close" primary onTouchTap={() => cbOpenModal()} />,
];
return (
<Dialog
contentStyle={inlineStyles.modal.content}
bodyStyle={inlineStyles.modal.bodyStyle}
actions={actions}
modal
styleName="AboutDialog"
open={openModal}
>
<h1 styleName="titleStyle">Meeting for Good</h1>
<h6 styleName="versionStyle">Version {process.env.versionNumber}</h6>
<h4 styleName="descStyle">THE BEST MEETING COORDINATION APP</h4>
<h6>Created by campers from FreeCodeCamp</h6>
<h6> License and GitHub Repository</h6>
</Dialog>
);
};
AboutDialog.propTypes = {
cbOpenModal: PropTypes.func.isRequired,
openModal: PropTypes.bool.isRequired,
};
export default cssModules(AboutDialog, styles);
My test. If I remove the AboutDialog import from my test , the test suite runs.
import React from 'react';
import AboutDialog from '../client/components/AboutDialog/AboutDialog';
import { shallow } from 'enzyme';
describe('Test', () => {
it('should test', () => {
});
});
My .babelrc file.
{
"presets": ["react", "es2015", "stage-1"],
"plugins": [
"transform-decorators-legacy",
"react-hot-loader/babel",
["transform-runtime", { "polyfill": false, "regenerator": true }]
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
My package.json
{
"name": "meeting-for-good",
"version": "1.0.12",
"description": "Schedule events with ease!",
"homepage": "https://github.com/FreeCodeCamp/meeting-for-good/#readme",
"main": "index.js",
"scripts": {
"clean": "rimraf build",
"build:server": "babel -d ./build ./server -s",
"build:client": "cross-env NODE_ENV=production babel-node ./tools/build.js",
"build": "npm run clean && npm run copy && npm run build:server && npm run build:client",
"start": " node ./build/app.js",
"copy": "node tools/copy.js",
"serve": "npm run clean && npm run copy && npm run build:server && npm run dev",
"dev": "cross-env NODE_ENV=development node -r dotenv/config ./build/app.js",
"test": "cross-env NODE_ENV=test jest",
"heroku-postbuild": "npm run build",
"postinstall": "node tools/postInstall.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/FreeCodeCamp/meeting-for-good"
},
"author": "Jean Philip de Rogatis <jrogatis#rogatis.eti.br>",
"contributors": [
{
"name": "Aniruddh Agarwal",
"email": "aaniruddh99#gmail.com"
},
{
"name": "Bob Sutton",
"email": "anischyros#gmail.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/FreeCodeCamp/meeting-for-good/issues"
},
"engines": {
"node": "^8.0.0",
"npm": "^5.0.0"
},
"dependencies": {
"autobind-decorator": "^2.1.0",
"babel-cli": "^6.22.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.2.1",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-1": "^6.22.0",
"babel-runtime": "^6.25.0",
"bluebird": "^3.5.0",
"body-parser": "^1.17.2",
"chai": "^4.1.0",
"chalk": "^2.0.1",
"chroma-js": "^1.3.3",
"chunk-manifest-webpack2-plugin": "^1.0.1",
"clipboard": "^1.6.1",
"compression": "^1.7.0",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"copy-webpack-plugin": "^4.0.1",
"cpy-cli": "^1.0.1",
"cross-env": "^5.0.1",
"css-loader": "^0.28.1",
"cssnano": "^3.10.0",
"dialog-polyfill": "^0.4.6",
"dotenv": "^4.0.0",
"ejs": "^2.5.5",
"email-templates": "^2.5.6",
"es6-promise": "^4.1.1",
"express": "^4.15.3",
"express-session": "^1.15.4",
"express-sessions": "^1.0.6",
"extract-text-webpack-plugin": "^2.1.0",
"fast-json-patch": "^2.0.4",
"favicons-webpack-plugin": "0.0.7",
"file-loader": "^0.11.1",
"google-calendar": "^1.3.2",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.29.0",
"image-webpack-loader": "^3.3.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jstimezonedetect": "^1.0.6",
"lodash": "^4.17.2",
"material-ui": "^0.18.5",
"mocha": "^3.4.2",
"moment": "^2.18.1",
"moment-range": "^3.0.3",
"mongoose": "^4.11.3",
"morgan": "^1.8.2",
"nodemailer": "^4.0.1",
"nodemailer-ses-transport": "^1.5.0",
"nprogress": "^0.2.0",
"offline-plugin": "^4.8.3",
"opbeat": "^4.14.2",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"passport": "^0.3.2",
"passport-facebook": "^2.1.1",
"passport-google-oauth": "^1.0.0",
"passport-oauth2-refresh": "^1.0.0",
"pngquant-bin": "^3.1.1",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-update": "^15.5.2",
"react-css-modules": "^4.3.0",
"react-day-picker": "^5.5.1",
"react-dom": "^15.6.0",
"react-ga": "^2.2.0",
"react-hot-loader": "^3.0.0-beta.7",
"react-infinite": "^0.11.0",
"react-input-range": "^1.2.1",
"react-masonry-component": "^5.0.3",
"react-moment-proptypes": "^1.4.0",
"react-notification-system": "^0.2.14",
"react-router": "^3.0.2",
"react-tap-event-plugin": "^2.0.1",
"react-tooltip": "^3.3.0",
"react-transform-hmr": "^1.0.4",
"request": "^2.81.0",
"rimraf": "^2.6.1",
"shelljs": "^0.7.7",
"style-loader": "^0.18.1",
"url-loader": "^0.5.7",
"webpack": "^2.7.0",
"webpack-assets-manifest": "^0.7.0",
"webpack-bundle-analyzer": "^2.8.3",
"webpack-config": "^7.0.0",
"write-file-webpack-plugin": "^4.0.0",
"yargs": "^8.0.1"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"babel-preset-jest": "^20.0.3",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.8.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.0.1",
"jest": "^20.0.4",
"jest-css-modules": "^1.1.0",
"react-dom": "^15.6.1",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1",
"webpack-hot-middleware": "^2.18.2"
},
"jest": {
"transform": {
".*": "<rootDir>/node_modules/babel-jest"
}
}
}
My webpack config for development.
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCSS = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const WebpackAssetsManifest = require('webpack-assets-manifest');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const cssNano = require('cssnano');
const packageJSON = require('./package.json');
const noVisualization = process.env.ANALYSE_PACK.toString() === 'false';
const lintCode = process.env.LINT_CODE.toString() === 'false';
const VENDOR_LIBS = [
'autobind-decorator',
'bluebird',
'clipboard',
'chroma-js',
'es6-promise',
'fast-json-patch',
'immutable',
'isomorphic-fetch',
'jstimezonedetect',
'lodash',
'material-ui',
'moment',
'moment-range',
'nprogress',
'react',
'react-addons-update',
'react-day-picker',
'react-tap-event-plugin',
'react-dom',
'react-css-modules',
'react-infinite',
'react-input-range',
'react-masonry-component',
'react-notification-system',
'react-router',
];
module.exports = {
context: __dirname,
entry: {
bundle: [
'react-hot-loader/patch',
'webpack-hot-middleware/client?reload=true',
'./client/main.js',
],
vendor: VENDOR_LIBS,
},
output: {
path: path.resolve('./build/client'),
publicPath: '/client/',
filename: '[name].[hash].js',
},
module: {
rules: [
(!lintCode ? {
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
},
} : {}),
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
use: 'file-loader',
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1000,
},
},
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 4,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
},
],
},
{
test: /\.css$/,
exclude: [/node_modules/, /no-css-modules/],
use: [{
loader: 'style-loader?sourceMap',
},
{
loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
},
],
},
{
test: /\.css$/,
include: [/node_modules/, /no-css-modules/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader?sourceMap',
use: 'css-loader',
}),
},
],
},
plugins: [
(!noVisualization ?
new BundleAnalyzerPlugin({
analyzerMode: 'static',
}) : null),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.GOOGLE_ANALYTICS_ID': JSON.stringify(process.env.GOOGLE_ANALYTICS_ID),
'process.env.GOOGLE_ANALYTICS_DEBUG': JSON.stringify(process.env.GOOGLE_ANALYTICS_DEBUG),
'process.env.versionNumber': JSON.stringify(packageJSON.version),
}),
new ExtractTextPlugin('vendor.css'),
new OptimizeCSS({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: cssNano,
cssProcessorOptions: {
discardComments: {
removeAll: true,
},
canPrint: true,
},
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.[hash].js',
minChunks: 'Infinity',
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new WriteFilePlugin({
test: /\.(html|ejs)$/,
}),
new FaviconsWebpackPlugin({
logo: './client/assets/favicons/logo.png',
icons: {
appleStartup: false,
},
background: 'transparent',
persistentCache: true,
inject: true,
}),
new HtmlWebpackPlugin({
title: 'Meeting for Good',
template: 'html-loader!./client/index.html',
filename: '../index.html',
inject: 'body',
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new WebpackAssetsManifest({
writeToDisk: true,
merge: true,
done(manifest) {
console.log(`The manifest has been written to ${manifest.getOutputPath()}`);
},
apply(manifest) {
manifest.set('manifest_version', '2');
manifest.set('start_url', '/?homescreen=1');
manifest.set('version', '1');
manifest.set('default_locale', 'en');
manifest.set('description', 'THE BEST MEETING COORDINATION APP');
manifest.set('display', 'fullscreen');
manifest.set('short_name', 'MeetingFG');
manifest.set('name', 'Meeting For Good');
manifest.set('background_color', '#FBFFFB');
manifest.set('theme_color', '#FBFFFB');
},
}),
].filter(p => p),
resolve: {
extensions: ['.js', '.css'],
},
devtool: 'source-map',
};

I figured it out. I just needed to use jest-css-modules (https://www.npmjs.com/package/jest-css-modules).
So I just have to add to make package.json
"jest": {
"transform": {
".*": "<rootDir>/node_modules/jest-css-modules"
}
}