webpack-dev-server fails to run with error of validateSchema - reactjs

this is a react hello-world proj , on local machine win7, use npm download
packages, when run " webpack-dev-server --open " it has an error like these:
F:\now\react\setup\node_modules\webpack-cli\bin\convert-argv.js:7
const validateSchema = process.webpackModule.validateSchema;
TypeError: Cannot read property 'validateSchema' of undefined
...
screenshot about error info
this is the package.json and webpack.config.js
{
"name": "setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"webpack": "^4.10.2",
"webpack-cli": "^3.0.0",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js:
const webpack = require('webpack');
module.exports = {
devServer: {
contentBase: "./src",
historyApiFallback: true,
inline: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
}

The webpack-cli just bumped from v2 to v3 about 10 hours ago, and it looks like this might be a bug with v3. I haven't figured out an actual fix yet, but a temporary workaround is to downgrade to webpack-cli v2 by manually changing the version number in your package.json to ^2.0.0.
Hope that helps you get unstuck for the moment.

Related

Syntax Error React App, Issue with npm dependencies

I have a website that I've had up for maybe a couple of years now, and I think it's starting to get outdated. I haven't touched it in a while, so I'm not exactly sure what is going on with it. I'm not exactly sure what the issue is, but it might have to do with my webpack version, or maybe my react version, I'm not really sure.
The issue started because I was trying to run webpack --mode production because I wanted to remake the bundle.js file, and when I would run this command, the file wouldn't create the bundle.js. Eventually I somehow came to the conclusion that there was something wrong with my webpack version, and so I updated it to the most recent version that was compatible with my dependencies which was version 4.46.0. I tried the command again, and this time it gives me this error:
[0] ./src/index.js 666 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (6:4)
4 |
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById("root")
8 | );
I tried reinstalling different versions of babel-loader, but the least bad error seems to be with the version 7.1.5. I also tried deleting my node-modules and then running npm install. Here is my package.json:
{
"name": "mywebsite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"set-dev-server": "webpack-dev-server --open --mode development",
"start": "npm run build && npm run set-dev-server",
"deploy": "gh-pages -d dist",
"publish-demo": "npm run build && npm run deploy"
},
"repository": {
"type": "git",
"url": "git+my/github/link"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "my/github/link/issues"
},
"homepage": "my/github/link",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"file-loader": "^1.1.11",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^7.0.1",
"jquery": "^3.5.1",
"node-css": "^0.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass-loader": "^7.3.1",
"style-loader": "^0.21.0",
"styled-components": "^5.2.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/core": "^7.13.8",
"babel-loader": "^7.1.5",
"css-loader": "^5.1.1",
"node-sass": "^5.0.0",
"schema-utils": "^3.0.0",
"webpack": "^4.46.0"
}
}
From what I found online the issue could also have to do with the webpack.config.js, but all of the issues I could find were from really old versions of webpack (2 or 3?), but anyways here is what I have in that file:
const path = require("path");
const webpack = require("webpack");
const bundlePath = path.resolve(__dirname, "dist/");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "dist/index.html"),
filename: "index.html"
});
module.exports = {
entry: path.join(__dirname, "src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['env'] }
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
},
},
],
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
publicPath: bundlePath,
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname,'dist/'),
port: 3000,
publicPath: "http://localhost:3000/"
},
plugins: [ new webpack.HotModuleReplacementPlugin(), htmlWebpackPlugin ]
};
Looks like you are using a jsx token <> while your file is named index.js. Try naming it as index.jsx

cant use react - Unexcepted errors

i used react once and it's worked ok.
now i tried to install it again, and it's not working.
i'll show you my files.
that's webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
that`s .babelrc:
{
"presets": ["env", "react"]
}
and that's package.json
`{
"name": "shopit",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.8.1",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}
i got this error: Uncaught SyntaxError: Unexpected identifier
on the first line :
import React from 'react';
and that`s what my file has. only that file.
someone knows what to do ?

Module parse failed: Unexpected token using webpack-dev-server

I'm trying to follow along the examples in the Learning Redux book. Unfortunately the latest versions of webpack and babel have all changed and I updated to the latest versions which deviate from the configurations in the book.
I've read the latest documentation from both babel and webpack and I believe I have the correct .babelrc and config.webpack.js that is appropriate.
But I'm struggling to get jsx to compile with the webpack-dev-server. I get this error when running npm start:
ERROR in ./src/index.js
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
| <h1>hello world!</h1>,
| document.getElementById('root')
| )
# multi (webpack)-dev-server/client?http://localhost:8080 ./src
Here is my full setup: https://github.com/homanchou/learning_redux
package.json
{
"name": "learningredux",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"redux": "^4.0.0"
}
}
babelrc.
{
"presets": ["env", "react"],
"plugins": [ "transform-object-rest-spread" ]
}
config.webpack.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'main.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}]
}
}
Any help is appreciated.
You just mixed the order in the config.webpack.js filename.
It needs to be webpack.config.js
Or you need to run webpack with --config and pass the filename.
Everything else should work.

Webpack error: Can't resolve 'fbjs/lib/EventListener'

I'm trying to add react to my existing web app. I successfully installed all required npm modules but after running npm run wbp command I got a lot of errors like:
ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/EventListener'
ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign'
Webpack version:
Version: webpack 4.1.1
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, '/wwwroot/js/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['#babel/preset-react', '#babel/preset-env']
}
}
]
}
};
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.0.0-beta.40",
"#babel/preset-env": "^7.0.0-beta.40",
"#babel/preset-react": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"cjs": "0.0.11",
"fbjs": "^0.8.16",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10"
}
}
I tried to solve this problem with manual mapping path to fbjs but without success. What am I doing wrong?
UPD: webpack --display-error-details --mode development generated admin.js for me but also showed me error. Browser console shows me react.development.js:17 Uncaught Error: Cannot find module "object-assign" error in this case
Finally I got it working:
My package.json:
{
"name": "WebSite",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --display-error-details --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11",
"webpack-config": "^7.0.0"
}
}
My webpack.config.js:
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'wwwroot/js/Admin/stats.jsx'),
output: {
path: path.join(__dirname, 'wwwroot/js/Admin'),
filename: 'admin.js'
},
resolve: {
extensions: ['.jsx', '.js']
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
query:
{
presets:['react']
}
}]
},
};

React Redux boilerplate error : TypeError: Cannot read property 'startsWith' of undefined CachedInputFileSystem.js:145:10

I am trying to create a React-Redux boilerplate. But whenever I try to write some reactjs code it throws the following error:
E:\projects\recipeFinder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:145
if(key.startsWith(what))
^
TypeError: Cannot read property 'startsWith' of undefined
at Storage.purge (E:\projects\recipeFinder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:145:10)
at Storage.purge (E:\projects\recipeFinder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:150:9)
at CachedInputFileSystem.purge (E:\projects\recipeFinder\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:259:20)
at EventEmitter.watcher.once (E:\projects\recipeFinder\node_modules\webpack\lib\node\NodeWatchFileSystem.js:42:26)
at EventEmitter.g (events.js:291:16)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at EventEmitter._onTimeout (E:\projects\recipeFinder\node_modules\watchpack\lib\watchpack.js:142:7)
at ontimeout (timers.js:365:14)
at tryOnTimeout (timers.js:237:5)
at Timer.listOnTimeout (timers.js:207:5)
The package.json file looks like below:
{
"name": "recipeFinder",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"express": "^4.15.3",
"react": "^15.6.1",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"redux": "^3.7.2"
},
"devDependencies": {
"webpack": "^3.0.0"
}
}
The webpack.config.js file looks like below:
var path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
watch: true,
module:{
loaders: [
{
test:/\.js$/,
exclude:/node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}
]
}
}
The same boiller plate used to work earlier. I think it is due to some to the latest version of the dependencies installed. Could anyone let me know ?
Thanks

Resources