I got some errors when run yarn start in ReactJS app, anyone can help please?
ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015'
Belows are the information of config files:
The package.json:
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack serve --mode development --open --hot",
"build": "webpack --mode production"
},
"dependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"html-webpack-plugin": "^5.3.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.25.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"#webpack-cli/serve": "^1.3.0"
}
}
And the .babelrc:
{
"presets": [
"#babel/env",
"#babel/react"
]
}
After some research I got my answer: Edit the presets in webpack.config.js file the same as .babelrc file
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { // <-- Sometimes you should change it from query to options to avoid error
presets: ['#babel/env', '#babel/react'] // <-- Edit here
}
}
]
},
Related
I'm trying to run my ReactJS production code in local using webpack.
Can anyone check on my setup, please?
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname,'src','index.js'),
output: {
path: path.join(__dirname,'dist'),
filename: 'index.bundle.js'
},
mode: process.env.NODE_ENV || 'development',
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
devServer: {
contentBase: path.join(__dirname,'src'),
//host: '00.00.00.0',//your ip address
port: 4201,
},
module: {
rules: [
{
test: /\.jsx?$/,
// we do not want anything from node_modules to be compiled
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.html$/,
use: [{loader: "html-loader"}]
},
{
test: /\.(css|scss)$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.json$/, loader: "json-loader"
},
{
test: /\.(ttf|eot|woff|woff2|jpg|jpeg|png|gif|mp3|svg|ico)$/,
loaders: ['file-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname,'src','index.html')
})
]
};
when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the index.html file)
package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "babel-node ./node_modules/webpack/bin/webpack",
"_start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open",
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/node": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"path": "^0.12.7",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"#coreui/coreui": "^2.1.12",
"#coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"#coreui/icons": "0.3.0",
"#coreui/react": "^2.5.1",
"bootstrap": "^4.3.1",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1",,
"underscore": "^1.9.1"
}
}
I'm new to react and webpack. I have a very simple react project and tried to run it using webpack in local. But unable to resolve.
Try running NODE_ENV=product yarn start, I don't know what scripts you have in your packages.json, but setting the NODE_ENV=production before running the script is what you need
edit:
In your case, I would change your packages.json. because by default your webpack will run in development mode if you don't change the NODE_ENV
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "babel-node ./node_modules/webpack/bin/webpack",
"_start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open",
"start": "webpack-dev-server",
"build": "webpack --mode production"
},
Then this NODE_ENV=product yarn start will definitely work
I think you can add a script for production mode too as
"prod": "webpack-dev-server --mode production",
and then
yarn run prod
Hope it helps
You can also build the production build using yarn build & then deploy locally to test the production.
You can read more about how to test the production build locally at
https://medium.com/#samratshaw/test-react-production-build-locally-434907be9e49
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 ?
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.
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']
}
}]
},
};
I've tried looking at the docs and searching online, but I'm having a really hard time configuring webpack with my React project. I'm trying to use webpack-dev-server. When I do the yarn start command, this is what I see in the browser.
Image of what I see in the browser
I have no idea where to go from here. This is what my webpack.config.js looks like.
const path = require("path");
module.exports = {
entry: './src/components/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: "./dist"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
Here is my package.json
{
"name": "react-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"source-map-explorer": "^1.5.0"
},
"scripts": {
"analyze": "source-map-explorer build/static/js/main.*",
"start": "webpack-dev-server --open",
"build": "webpack",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.1.0"
}
}
Any guidance would be greatly appreciated.