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 ?
Related
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
}
}
]
},
I'm an old hat coder but I'm new to react, and it looks like I need another pair of eyeballs. I'm trying to setup a very basic React app from scratch (for practice) and it fires up fine, but when I try to run webpack --watch it's giving me the following error:
Here's the error I'm getting:
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App.js";
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
Here's my webpack.dev.config file:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index_bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
};
Here's my package.json file:
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch --open",
"dev": "./node_modules/.bin/webpack-dev-server --mode development --config ./webpack.dev.config.js",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}
Here's my .babelrc file:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
And finally... my index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";
ReactDOM.render(<App />, document.getElementById('root'));
Directory Structure
This ought to be pretty straight-forward but I guess I'm just not seeing something. I'd appreciate any help!!
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.
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']
}
}]
},
};