I'm getting that error when I build using this script:
webpack --colors --progress --watch --config --jsx-loader webpack.config.js
Here's my package.json file:
{
"dependencies": {
"autoprefixer": "^6.0.3",
"node-libs-browser": "^0.5.3",
"object-assign": "4.0.1",
"underscore": "1.8.3",
"react": "0.14.7",
"react-dom": "0.14.7",
"react-router": "2.0.0",
"history": "^1.17.0",
"superagent": "^1.8.0",
"react-addons-css-transition-group": "0.14.7",
"react-bootstrap": "0.28.2",
"react-select": "^1.0.0-beta9",
"moment": "2.11.2",
"truncate": "2.0.0",
"superagent-promise-plugin": "2.1.0",
"rrule": "2.1.0"
},
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.11.6",
"css-loader": "^0.23.1",
"eslint": "^3.2.2",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.22.0",
"isparta-instrumenter-loader": "^1.0.1",
"jsx-loader": "0.13.2",
"less": "^2.3.1",
"less-loader": "^2.2.3",
"livereload": "^0.5.0",
"null-loader": "^0.1.1",
"postcss-loader": "^0.9.1",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"webpack": "^1.12.13",
"webpack-livereload-plugin": "0.4.0"
},
"babel": {
"presets": [
"stage-0",
"es2015",
"react"
]
}
}
And my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin')
module.exports = {
output: {
path: __dirname,
filename: "bundle.js",
},
resolve: {
extensions: ['', '.js', '.jsx'],
root: [
path.resolve('./../../../../../../Javascripts/modules')
],
moduleDirectories:
[
'./../../../../../../Javascripts/modules'
]
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.less$/,
loader: "style!css!less"
},
{ test: /\.html$/, loader: 'raw', exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')] },
{
test: /(\.jsx|\.js)$/,
loader: 'babel',
exclude: [/(node_modules|bower_components)/]
},
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: [/node_modules/, path.resolve('./../../../../../../Javascripts/modules')]
}
]
},
eslint: {
configFile: './src/js/.eslintrc'
},
entry: "./src/index.js",
plugins: [
new LiveReloadPlugin()
]
};
Any idea how to resolve that error? Based on my Google searches, it's a package versioning issue, but that's all I've been able to figure out.
You might be missing the react babel presets npm package.
Try this:
npm i --save-dev babel-preset-react
I ended up rolling back to Babel 5, and this issue went away. Not a great answer for those who might find this later on, but it works fine for my app.
Related
Having this error Uncaught ReferenceError: regeneratorRuntime is not defined when trying to make a api call using superagent.
Currently i am using react 17, webpack 5 along with css modules and all latest packages.
package.json
{
"dependencies": {
"date-fns": "^2.16.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"superagent": "^6.1.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#dr.pogodin/babel-plugin-react-css-modules": "^6.0.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"eslint": "^7.16.0",
"html-webpack-plugin": "^5.0.0-beta.1",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"postcss": "^8.2.1",
"postcss-scss": "^3.0.4",
"sass": "^1.30.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"
}
}
babel.config.js
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
[
"#dr.pogodin/babel-plugin-react-css-modules",
{
webpackHotModuleReloading: true,
autoResolveMultipleImports: true,
filetypes: {
".scss": {
syntax: "postcss-scss",
},
},
generateScopedName:
process.env.NODE_ENV === "development"
? "[path]___[name]__[local]___[hash:base64:5]"
: "[hash:base64:5]",
},
],
],
};
webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(css|sass|scss)$/,
exclude: /node_modules/,
use: [
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
auto: (resourcePath) =>
resourcePath.indexOf("assets/stylesheets") === -1,
localIdentName: isDev
? "[path]___[name]__[local]___[hash:base64:5]"
: "[hash:base64:5]",
},
sourceMap: isDev,
},
},
"sass-loader",
],
}
],
},
For Babel 7, install these two dependencies:
npm install --save #babel/runtime
npm install --save-dev #babel/plugin-transform-runtime
And, in .babelrc, add:
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-transform-runtime"]
]
}
I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}
I'm upgrading from Webpack 3 > 4 and am currently experiencing the following issue when loading a simple page that previously worked without issue:
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\Data\%MYPROJECTDIRECTORY%\node_modules\ieee754\index.js'.
The webpack -w watch files command seems to bundle them without issue. I don't get any other console errors, although there are a few peer dependency issues that i am warned of when doing an npm install, none of them are being used in this particular component I am seeking to render to test the overall upgrade success.
Here are some of my files:
//Webpack.config.js
module.exports = {
entry: [
'babel-polyfill',
'./Scripts/App.js',
],
output: {
filename: 'Scripts/ReactBundle/bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query:
{
presets: ['react', 'es2017', 'es2015', 'stage-2'],
plugins: ['transform-class-properties']
}
},
]
},
optimization: {
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: false,
}
}
//this was in my Webpack v3 config, but I've removed it for testing.
//resolve: {
// modules: [
// "node_modules"
// ],
// extensions: ['.Webpack.js', '.web.js', '.js', '.jsx'],
// mainFields: ["main"]
//},
and
//package.json
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"scripts": {
"webpack": "webpack --config Webpack.config.js -w"
},
"dependencies": {
"autosuggest-highlight": "^3.1.1",
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"fast-clone": "^1.5.3",
"fast-levenshtein": "^2.0.6",
"ieee754": "^1.1.12",
"material-ui": "1.0.0-beta.30",
"material-ui-icons": "1.0.0-beta.17",
"npx": "^10.2.0",
"prop-types": "^15.6.1",
"react": "^16.7.0",
"react-alert": "^4.0.4",
"react-alert-template-basic": "^1.0.0",
"react-autosuggest": "^9.3.2",
"react-bootstrap-typeahead": "^3.2.4",
"react-datepicker": "^2.0.0",
"react-dom": "^16.7.0",
"react-draggable": "^3.0.4",
"react-dropzone": "^4.2.3",
"react-pdf-js": "^3.0.4",
"react-redux": "^5.0.7",
"react-resizable": "^1.7.5",
"react-table": "^6.8.0",
"react-tooltip": "^3.4.1",
"react-transition-group": "^2.5.3",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2",
"redux-thunk": "^2.2.0",
"stable": "^0.1.8",
"style-loader": "^0.20.3",
"typeface-roboto": "0.0.45",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"redux-devtools": "^3.4.1"
}
}
I've had limited success researching this issue, but attempted to install the package ieee754 both globally and locally to no success. I suspect something that was part of my previous config for webpack 3 is screwing up some new defaults in Webpack 4. Any help is much appreciated!
I have a quick question. I just took over a React Boilerplate project. It uses Material UI && Bootstrap. But bootstrap is only added as a development dependency. How will the boilerplate behave/work in production mode? I don't see how.
Package.json:
"devDependencies": {
"babel-core": "^6.4.5",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.0.1",
"babel-preset-stage-0": "^6.3.13",
"bootstrap": "^3.3.5",
"bootstrap-loader": "^1.2.0-beta.1",
"bootstrap-sass": "^3.3.6",
"bootstrap-webpack": "0.0.5",
"eslint": "^3.4.0",
"eslint-config-airbnb": "13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^3.0.1",
"eslint-plugin-react": "^6.1.2",
"webpack": "^1.12.11",
"webpack-dev-middleware": "^1.5.0",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^1.0.2"
},
"dependencies": {
"autoprefixer": "6.5.3",
"axios": "^0.15.3",
"classnames": "^2.2.3",
"css-loader": "^0.26.1",
"csswring": "^5.1.0",
"deep-equal": "^1.0.1",
"expect": "^1.13.4",
"exports-loader": "^0.6.2",
"expose-loader": "^0.7.1",
"express": "^4.13.4",
"express-open-in-editor": "^1.1.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"gapi": "0.0.3",
"history": "^4.4.1",
"http-proxy": "^1.12.0",
"imports-loader": "^0.6.5",
"jasmine-core": "^2.4.1",
"jquery": "^3.1.0",
"jwt-decode": "^2.1.0",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-mocha": "^1.1.1",
"karma-webpack": "^1.7.0",
"less": "^2.5.3",
"less-loader": "^2.2.2",
"lodash": "^4.5.1",
"material-ui": "^0.20.2",
"material-ui-upload": "^1.2.1",
"mocha": "^3.0.2",
"morgan": "^1.6.1",
"node-sass": "^4.9.3",
"postcss-import": "^9.0.0",
"postcss-loader": "^1.1.1",
"q": "^1.4.1",
"qs": "^6.1.0",
"rc-datepicker": "^4.0.1",
"react": "^15.3.1",
"react-addons-css-transition-group": "^15.3.1",
"react-calendar-component": "^1.0.0",
"react-date-picker": "^5.3.28",
"react-datepicker": "^0.37.0",
"react-document-meta": "^2.0.0-rc2",
"react-dom": "^15.1.0",
"react-dropzone": "^5.1.0",
"react-forms": "^2.0.0-beta33",
"react-hot-loader": "^1.3.0",
"react-loading-order-with-animation": "^1.0.0",
"react-onclickoutside": "^5.3.3",
"react-redux": "^4.3.0",
"react-router": "3.0.0",
"react-router-redux": "^4.0.0",
"react-tap-event-plugin": "^2.0.1",
"react-transform-hmr": "^1.0.1",
"redux": "^3.2.1",
"redux-form": "^6.0.1",
"redux-logger": "2.7.4",
"redux-thunk": "^2.1.0",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"yargs": "^6.5.0"
}
From bootstrap, we use mainly the grid and pull commands, for buttons. I don't get it though. Also, this is quite the complicated and old boilerplate.
Also another thing is that my scss doesn't get applied whatever method I use.. Inline, scss, css. I don't get it though. His webpack config is way too complicated, and I don't get it. Can someone help me.
Here is the webpack for Development:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'bootstrap-loader',
'webpack-hot-middleware/client',
'./src/index',
],
output: {
publicPath: '/dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader!sass',
},{
test: /\.css$/,
loader: 'style!css?localIdentName=[path][name]--[local]!postcss-loader',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"',
},
__DEVELOPMENT__: true,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
}),
],
};
The webpack for Production:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['bootstrap-loader/extractStyles'],
output: {
publicPath: 'dist/',
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!postcss-loader!sass',
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new ExtractTextPlugin('bundle.css'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
};
The common one:
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssImport = require('postcss-import');
const merge = require('webpack-merge');
const development = require('./dev.config');
const production = require('./prod.config');
require('babel-polyfill').default;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, '../src'),
build: path.join(__dirname, '../dist'),
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: [
PATHS.app,
],
output: {
path: PATHS.build,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.jsx', '.js', '.json', '.scss', '.css'],
modulesDirectories: ['node_modules', PATHS.app],
},
module: {
loaders: [{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports?jQuery=jquery',
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff',
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff2',
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream',
}, {
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-otf',
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file',
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml',
}, {
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/,
}, {
test: /\.png$/,
loader: 'file?name=[name].[ext]',
}, {
test: /\.jpg$/,
loader: 'file?name=[name].[ext]',
}],
},
postcss: (webpack) => (
[
autoprefixer({
browsers: ['last 2 versions'],
}),
postcssImport({
addDependencyTo: webpack,
}),
]
),
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(development, common);
}
if (TARGET === 'build' || !TARGET) {
module.exports = merge(production, common);
}
If you could help me understand this. And also answer my question would be great thank you!!
I'm getting the following error from Webpack:
Invalid HMR message Followed by a string of very detailed JSON.
There really aren't any resources that I can find to better debug this. Any tips?
Bonus if anyone can give me insight to why require can't be found when it's used throughout the app no problem.
Here are some details:
Running Node/Babel
Using Webpack
NPM dependencies:
"dependencies": {
"babel-core": "^6.7.2",
"babel-polyfill": "^6.7.4",
"body-parser": "~1.12.0",
"cookie-parser": "~1.3.4",
"css-modules-require-hook": "^4.0.0",
"cuid": "^1.3.8",
"debug": "~2.1.1",
"express": "~4.12.2",
"fs": "0.0.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"serve-favicon": "~2.2.0",
"webpack": "^1.12.13"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-register": "^6.7.2",
"cross-env": "^1.0.7",
"css-modules-require-hook": "^4.0.0",
"eslint": "^2.6.0",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.10.0"
}
Webpack config:
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = {
devtool: 'cheap-source-map',
entry: ['webpack-hot-middleware/client',
'./index.js',
],
target: 'node',
output: {
path: __dirname,
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style!css?modules',
},
{
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
query: {
presets: ['react-hmre'],
},
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true)
}
})
],
externals: nodeModules
};
Set your target from node to web for the client.js.
If you are bundling a server side React app, you can add to the top of server file:
require('css-modules-require-hook')({
generateScopedName: '[name]--[local]',
prepend: []
});
So that the css-files required in SSR react components work.
You will want to set target to 'web' because your intention is to compile for the web.
You should set the engine to node (which is what I'm assuming you were trying to do using target).
target: "web",
engines: {
node: "4.x"
},