Webpack error when running "webpack" command - reactjs

I am getting the following error:
[HMR] Waiting for update signal from WDS...
when I run "webpack" in the terminal
my webpack config js file is as follow:
var webpack = require('webpack');
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}]
},
resolve: {
extensions: ['', '.js']
},
output: {
path: 'dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
and my package.json as follow:
{
"name": "hwr",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"react-hot-loader": "^1.3.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"history": "^3.0.0",
"react": "^15.3.0",
"react-dom": "^15.3.0",
"react-router": "^2.6.1"
}
}
Where does that error comes from?

It's not an error, you enabled the Hot Module Replacement (hence the [HMR]) feature in your Webpack build. That's just one of the log messages that come from the HMR feature. Sounds like you don't want to turn HMR on? In that case, you should remove 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server' entries from your entry points, the react-hot loader and in your loaders entry, the new webpack.HotModuleReplacementPlugin() from plugins and hot: true from your dev server settings.

Related

Webpack live reload says "nothing changed" even if I modify a file. Why?

I have a react project and I'm using Webpack (webpack-dev-server) for my development.
Everything compiles well, and when I make a change in my file (for the first time), the live reloading works well.
BUT, after changing the same file twice (or more), the live reloading stop working. In the console it says "nothing changed" even when I made a change.
Looks like the webpack-dev-server memory doesn't pick up the change. Any idea why?
Webpack Config
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin } = require("webpack");
module.exports = {
target: "web",
mode: "development",
entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
devtool: "inline-source-map",
devServer: {
historyApiFallback: true,
hot: true,
port: 8080,
static: "./dist",
watchFiles: "src/**/*,js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js",
},
resolve: { extensions: ["*", ".js", ".jsx"] },
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /(node_modules)/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"],
},
},
],
},
{
test: /\.css$/,
// exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
title: "Development",
}),
new ProvidePlugin({
React: "react",
}),
],
};
Package.json
{
"name": "timerfrontend",
"version": "1.0.0",
"main": "index.js",
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve",
"create": "webpack -w",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"#apollo/client": "^3.5.6",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-hooks": "^4.0.0",
"#auth0/auth0-react": "^1.8.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"bootstrap": "^5.0.1",
"dayjs": "^1.10.5",
"npm-force-resolutions": "^0.0.10",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"regenerator-runtime": "^0.13.9",
"svg-url-loader": "^7.1.1"
},
"description": "",
"resolutions": {
"react": "17.0.2",
"graphql": "16.1.0"
}
}
I found the solution (hint: its weird)
I realized that my Webpack live reloading was working on my other components (except the I had issue with).
I finally resolved to deleting that component and create a new one (exact copy) and then it worked perfectly!?
I still don't know why Webpack didn't like this component specifically...
It was happening to me, I checked the files and class names, they have to be exactly the same, including caps and lowercase letters
In my case, the file I was modified is not being use anywhere in project, so webpack does not recognize it.
After import and use it in the code, then it work fine

Module not found: Error: Cannot resolve module 'babel-loader' in 'C:\Users\durgat\reactApp'

{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
Please help me to solve this issue , i am still getting this issue after doing many changes like , i degraded the babel to lowest version & i installed npm using this command and also i did many changes but there is no result.
And webpack.config.js file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
i think this could help as i dont know what is webpack file configration
but you can give it try in your webpack file
resolveLoader: {
root: path.join(__dirname, 'node_modules')
}
please share your webpack.config file

ERROR from UglifyJs Unexpected token keyword, expected punc

I'm getting the following error when trying to run npm install on my project: ERROR in bundle.js from UglifyJs
Unexpected token keyword «function», expected punc «,»
I'm aware it's because I'm trying to use an ES6 feature, but I think something is wrong with my setup which is why it isn't getting compiled to ES5 by Babel.
I've looked at a number of problems on SO regarding the issue, and I've incorporated some of those answers, but none has solved the problem.
Here is my package.json:
{
"name": "my-project",
"version": "0.0.1",
"engines": {
"node": "8.9.1"
},
"private": true,
"scripts": {
"dev": "webpack --progress --colors --watch",
"postinstall": "NODE_ENV=prod webpack -p"
},
"dependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.1.18",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"body-parser": "^1.18.2",
"express": "^4.16.2",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-player": "^1.1.2",
"react-render": "^1.2.1",
"webpack": "^3.11.0",
"yargs": "^11.0.0"
},
"babel": {
"plugins": [
"transform-react-jsx"
],
"presets": [
"es2015",
"react"
]
},
"devDependencies": {
"uglifyjs-webpack-plugin": "^1.2.0"
}
}
and my webpack.config.babel.js
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
context: __dirname + "/static",
entry: {
client: ['./App.js']
},
output: {
filename: 'bundle.js',
path: __dirname + "/static/build"
},
resolve: {
extensions: ['*', '.js']
},
plugins: [
new UglifyJSPlugin({
include: /\.min\.js$/
})
],
module: {
loaders: [
{
test: /(\.js$)/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: [
'react',
['es2015', {'modules': false}]
]
}
}
]
}
};

Automatically generated Webpack config failing

My project is running a VERY old version of React and I would like to drag it into 16. I went through the "best practice" tutorial on how to get 16 up and running and ended up with these two machine generated files,
package.json
{
"name": "asset_iq",
"version": "1.0.0",
"description": "New application for the old dealer net",
"main": "bundle.js",
"directories": {
"doc": "docs",
"test": "test"
},
"scripts": {
"start": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js"
},
"keywords": [
"React",
"Redux",
"ES6"
],
"author": "Mark Addinall",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react-hot-loader": "^3.1.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"axios": "^0.17.1",
"lodash": "^4.17.4",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-form": "^7.2.0",
"redux-promise": "^0.5.3"
}
}
and webpack.config.js
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8888',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
Now I have been using react and webpack for about a year, but on a version from the dark past. React 0.x! This looked reasonable to me, however,
npm start
> asset_iq#1.0.0 start /disk/dev/www/fastrack-react16/app/client
> webpack-dev-server --progress --colors --hot --config ./webpack.config.js
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
10% building modules 6/11 modules 5 active ...track-react16/app/client/src/index.js/disk/dev/www/fastrack-react16/app/client/node_modules/loader-runner/lib/loadLoader.js:35
throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
^
The curious thing is the fact that it is trying to run the project on 8080 which IS in use so I think this is the start of the LIFECYCLE exception. Not sure why it is failing to start on 8888. I solved that by adding it in the devServer object at the end of the config file, however it is still failing with the same error.
Try to use the configuration of react-hot-loader in your webpack like this:
{
test: /\.(js|jsx)$/,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
plugins: [
'react-hot-loader/babel'
]
}
}
Hope it helps :)

Plugin 0 specified in 'foreign' provided an invalid property of '_c'

Getting above error with below configuration, how should I make it working?
.babelrc:
{
"passPerPreset": true,
"presets": [
{"plugins": ["./build/babelRelayPlugin"]},
"react",
"es2015",
"stage-0"
]
}
package.json:
{
"name": "1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.13.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.9.2",
"express": "^4.14.0",
"express-graphql": "^0.5.3",
"graphql": "^0.6.2",
"graphql-relay": "^0.4.2",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-relay": "^0.9.2",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"devDependencies": {
"babel-cli": "^6.14.0"
}
}
server.js:
//
//
//
const compiler = webpack({
entry: path.resolve(__dirname, 'js', 'app.js'),
module: {
loaders: [
{
test: /\.js$/,
include: [ path.resolve(__dirname, "js") ],
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
},
}
],
},
output: {filename: '/app.js', path: '/', publicPath: '/js/'}
});
const appServer = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': 'http://localhost:8000'},
publicPath: '/js/',
stats: {colors: true}
});
//
//
//
Terminal Error: babel-node server.js
ERROR in ./js/app.js
Module build failed: Error: Plugin 0 specified in 'foreign' provided an invalid property of '_c'
Browser Error: localhost: 3000
in the console window:
Uncaught Invariant Violation: RelayQL: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as Relay.QL.
I have had success using the following setup. I am using the plugin with the babel loader in my webpack module rather than in .babelrc
In webpack:
query: {
presets: [
"es2015", "react", "stage-0", {
"plugins": [
"./schema-build/babelRelayPlugin"
]
}
]
}
In .babelrc:
{
"passPerPreset": true,
"presets": [
"react",
"es2015",
"stage-0"
]
}

Resources