My error is :
"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"
I don't know why this error occurs every time I do so may thing for webpack, I use CSS loader, babel loader or many loaders, but this thing is still not solved.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
webpack.config.js
const path = require( 'path');
module.exports = {
mode: 'none',
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'App.js',
path: path.join(__dirname, '/dist')},
module:{
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}]
}
}
package.json
{
"name": "webpacktutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"html-webpack-plugin": "3.2.0",
"react-hot-loader": "^4.11.1",
"webpack": "4.16.2",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5"
}
}
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Try to change Your module section with this, this is more stable option in my opinion:
const path = require( 'path');
module.exports = {
mode: 'none',
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'App.js',
path: path.join(__dirname, '/dist')},
module:{
loaders:[{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}]
}
}
You can try my webpack config
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
Full config can be view here
My babel.rc
{
"presets": ["es2015", "react"],
"plugins": [
"transform-es2015-destructuring",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
My package.json dependency
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1"
I was able to replicate your exact error after creating my own repository using your package.json
. I was able to fix the error:
"ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/cource/React project/webpacktutorial/src/index.js: Unexpected token (7:16)"
by adding my own .babelrc
at the root of my directory. My .babelrc
looks like this:
{
"presets": ["env", "react"]
}
After, I received an error regarding css-loader
. To solve this, I did:
npm i -D style-loader css-loader
to get the packages and added another rule to webpack.config.js
:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.