I use React with Webpack-Dev-Server for local Development.
Every now and then I get this error:
"react_devtools_backend.js:6 [WDS] Errors while compiling. Reload prevented."
After the error occurs, no code-change is being updated on the browser.
package.json:
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/plugin-transform-runtime": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"#material-ui/core": "^4.10.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"}
"dependencies": {
"#material-ui/styles": "^4.9.14",
"clsx": "^1.1.0"}
webpack.config.js:
module.exports = {
mode: "development",
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["#babel/plugin-transform-runtime"],
},
},
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
devServer: {
contentBase: path.join(__dirname, "dist"),
},
};
This issue seems to happen with eslint-loader where hot module replacement is used along with emitWarning: false (which is the default value):
This is how I fixed it (just added emitWarning option and set to true):
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true,
},
},
Docs here: https://github.com/webpack-contrib/eslint-loader#emitwarning-default-false
Related
Getting this error with loadable components after building using webpack.
I have tried lots of solutions from stackoverflow but nothing works for me.
ERROR in ../src/pages/EngineeringUI/index.js 9:14
Module parse failed: Unexpected token (9:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import PageLoader from '#xyz/atoms/PageLoader';
| const LoadableEngineeringUI = loadable(() => import('./EngineeringUI'), {
> fallback: <PageLoader />,
| });
| export default LoadableEngineeringUI;
# ./src/web/NestedRouter.js 29:0-132 142:29-42
# ./src/web/MainRouter.js 4:0-42 18:15-27
# ./src/web/App.js 26:0-38 77:95-105
# ./src/web/index.js 4:0-24 7:50-53
# ./src/index.js
here is my devDependancies:-
"devDependencies": {
"#babel/core": "^7.3.4",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-syntax-dynamic-import": "^7.7.4",
"#babel/polyfill": "^7.7.0",
"#babel/preset-env": "^7.7.4",
"#babel/preset-flow": "^7.7.4",
"#babel/preset-react": "^7.7.4",
"#loadable/babel-plugin": "^5.13.2",
"#loadable/webpack-plugin": "^5.15.2",
"ajv": "^8.11.2",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "6.3.13",
"cheerio": "^1.0.0-rc.12",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^3.2.1",
"cz-conventional-changelog": "^3.0.2",
"exports-loader": "^0.6.4",
"file-loader": "^5.1.0",
"html-loader": "^0.5.1",
"less-loader": "^4.0.5",
"react-app-rewired": "2.1.8",
"script-loader": "^0.7.1",
"semantic-ui": "^2.4.2",
"standard-version": "^7.0.1",
"style-loader": "^1.0.1",
"terser-webpack-plugin": "^2.3.5",
"url-loader": "^3.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.11.1"
},
also added these rules in webpack.config.js file-
module: {
rules: [{
test: /\.m?(js|ts)x?$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'packages/apis/src'),
path.resolve(__dirname, 'packages/atoms/src'),
path.resolve(__dirname, 'packages/molecules/src'),
path.resolve(__dirname, 'packages/organisms/src'),
path.resolve(__dirname, 'packages/pages/src'),
path.resolve(__dirname, 'packages/units/src'),
path.resolve(__dirname, 'packages/themes/themes'),
path.resolve(__dirname, 'packages/store/src'),
],
resolve: {
fullySpecified: false,
},
use: {
loader: 'babel-loader',
// options: {
// presets: ['#babel/preset-env', '#babel/preset-react', '#babel/preset-flow', {
// 'plugins': ['#babel/plugin-proposal-class-properties']
// }]
// },
},
},
{
test: /\.xlsx$/,
loader: "xlsx-loader"
},
{
test: /\.html$/,
use: {
loader: 'html-loader',
options: {
attrs: false,
},
},
},
{
test: /\.less$/,
use: [{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: {
loader: 'url-loader',
options: {
name: 'fonts/[contenthash].[ext]',
},
},
},
{
test: /\.(jpg|jpeg|png|svg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: 'img/[contenthash].[ext]',
},
},
},
],
},
I have tried lots of solution from stack overflow like adding presets options but nothing work for me
i am configuring the webpack 4 in my react project (create-react-app)
i have installed all the require loaders/file to configure my webpack, but there is always some different error, (some time its about sass-loader/css-loader/style-loader)
Now am dealing with (eot,woff,woff2,ttf) files error.
i don't know, i am conflicting the versions of node-sass/webpack/loaders or what.
please help me to configuring webpack in my project.
i am attaching the configuration files and errors screen.
Here is my devdependencies in my package-json file.
"devDependencies": {
"#babel/core": "^7.17.9",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.5",
"css-loader": "^3.6.0",
"file-loader": "^6.2.0",
"laravel-echo": "^1.11.2",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"node-sass": "^4.14.1",
"pusher-js": "^7.0.3",
"raw-loader": "^4.0.2",
"react-error-overlay": "6.0.9",
"sass": "^1.51.0",
"sass-loader": "^7.1.0",
"style-loader": "^1.3.0",
"ts-loader": "^9.2.8",
"url-loader": "^4.1.1",
"webpack": "^4.42.0",
"webpack-cli": "^4.9.2"
}
webpack.config.js file
const path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/dist/",
},
// ...add the babel-loader and preset
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
// {
// test: /\.(scss|css|sass)$/,
// use: ["sass-loader", "style-loader", "css-loader"],
// },
{
test: /\.(scss|css|sass)$/,
use: [
// style-loader
{
loader: "style-loader",
},
// css-loader
{
loader: "css-loader",
options: {
modules: true,
},
},
// sass-loader
{
loader: "sass-loader",
options: {
modules: true,
},
},
],
},
{
test: /\.(woff2|woff|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: "file-loader",
// options: {
// name: "[name].[ext]",
// outputPath: "fonts/",
// },
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
},
],
},
],
},
// ...add resolve to .jsx extension
resolve: {
extensions: ["*", ".js", ".jsx"],
},
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
Kindly check your themes scss and comment imports one by one and try to make build. In my case scss files were causing issues.
I've started some project in React, using this template:
CoreUI React
It doesn't ship with the properties transform plugin, so i installed it. My babelrc file looks like this:
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
My dev dependencies:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
}
I didn't change anything in the webpack config file(should i?)
Part of my webpack config file:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
}]
},
Once i try to compile, using the dev server, i get the nasty error, referring to a property defined in one of my class-based components.
I know this issue was raised here before, but non of the posts seemed to be revolving around a similar setup to mine, so i didn't find the solution there.
Idea, anybody?
You have to remove the options.presets key from the babel-loader config, because otherwise, Babel picks up these presets and ignores your .babelrc file.
Alternatively, you could provide the entire configuration in webpack.config:
options: {
cacheDirectory: true,
presets: ["react", "env"],
plugins: [
"transform-class-properties",
"transform-object-rest-spread"
]
}
I use React+Webpack. I got the error, You may need an appropriate loader to handle this file type. After it, SyntaxError: Unexpected token at ../../acorn.js.
Why is it related to acorn.js? Also, I don't how to solve it. I think I already installed loaders that I needed. webpack.config.dev.js is working well, but when trying building webpack.config.prod.js I got this error.
Let me show my codes...
webpack.config.prod.js
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.gif$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
},
{
test: /\.json?$/,
loader: 'json'
}
]
},
resolve: {
root: [
path.resolve('./src'),
path.resolve('./style')
],
extensions: ['', '.js', '.jsx', '.css']
},
plugins: [
new HtmlWebpackPlugin({
tempalte: './public/index.html'
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
],
package.json
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.1",
"file-loader": "^0.10.0",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"lodash": "^4.17.4",
"path": "^0.12.7",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-bootstrap-table": "^3.1.7",
"react-dnd": "^2.2.3",
"react-dnd-html5-backend": "^2.2.3",
"react-dom": "^15.4.2",
"react-js-pagination": "^2.0.2",
"react-modal": "^1.7.3",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-slick": "0.14.5",
"react-toastr": "^2.8.2",
"redux": "^3.6.0",
"redux-form": "^6.5.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"slick-carousel": "^1.6.0"
}
Your module loader only transpile the .jsx files, change the test expression to transpile the .js files as well
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
Installed Rodal modals for React but when i add
import 'rodal/lib/rodal.css';
i get an error -> "ERROR in ./~/rodal/lib/rodal.css
Module parse failed"
Looking around it appears to be a babel.config.js issues but even when copying some of other peoples answers, the problem persists.
Below is the babel.config.js file
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Add package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"repository": "",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.26.2",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"npm": "^4.3.0",
"react-addons-test-utils": "^0.14.7",
"style-loader": "^0.13.2",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-preset-stage-1": "^6.1.18",
"classnames": "^2.2.5",
"flexboxgrid": "^6.3.1",
"lodash": "^3.10.1",
"material-design-icons": "^3.0.1",
"material-ui": "^0.17.0",
"next": "^2.0.0-beta",
"react": "^15.4.2",
"react-carousel": "^3.3.0",
"react-dom": "^15.4.2",
"react-flexbox-grid": "^0.10.2",
"react-instantsearch": "^3.2.1",
"react-instantsearch-theme-algolia": "^3.2.1",
"react-redux": "^4.0.0",
"react-router": "^3.0.2",
"react-slick": "https://github.com/johntron/react-slick/archive/0.14.6-patch.tar.gz",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.0.4",
"redux-promise": "^0.5.3",
"rodal": "^1.4.0"
}
}
The component calling it is
import React, { Component } from 'react';
import Rodal from 'rodal';
import 'rodal/lib/rodal.css';
export default class ModalButton extends Component {
render () {
return (
<div>
<h2>Hello</h2>
</div>
);
}
}
EDIT: Working Version for anyone else who needs this.
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Your error means that webpack does not know how to parse css files.
To resolve this problem you need to npm install --save-dev style-loader css-loader and in your webpack file include those loaders as follows
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
and include .css extension
resolve: {
extensions: ['', '.js', '.jsx', '.css']
}