React Unexpected token < - babel loader
Hi i have problem with babel-loader it write me
ERROR in ./src/js/pages/Admin/views/Pages/Register/Register.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Projekty\eshop_frontend_template\src\js\pages\Admin\views\Pages\Register\Register.js: Unexpected token (7:6)
> 5 | render() {
6 | return (
> 7 | <div className="app flex-row align-items-center">
| ^
8 | <Container>
9 | <Row className="justify-content-center">
10 | <Col md="6">
at Parser.raise (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:3939:15)
at Parser.unexpected (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5248:16)
at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6328:20)
at Parser.parseExprSubscripts (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5924:21)
at Parser.parseMaybeUnary (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5903:21)
at Parser.parseExprOps (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5812:21)
at Parser.parseMaybeConditional (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5784:21)
at Parser.parseMaybeAssign (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5731:21)
at Parser.parseParenAndDistinguishExpression (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6474:28)
at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6284:21)
@ ./src/js/pages/Admin/views/Pages/index.js 37:39-60
@ ./src/js/pages/Admin/Admin.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js
5 | render() {
6 | return (
> 7 | <div className="app flex-row align-items-center">
| ^
8 | <Container>
10 | <Col md="6">
my webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/proposal-class-properties']
}
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader? limit=100000' },
{
test: /\.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
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './dist/index.html'
})
],
my package.json#babel
"babel": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
],
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
my dependencies
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"react-hot-loader": "^4.3.11",
"style-loader": "^0.23.0",
"webpack": "^4.20.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@coreui/coreui": "^2.0.9",
"@coreui/react": "^2.0.5",
"axios": "^0.18.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"node-sass": "^4.9.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-localize-redux": "^3.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-localstorage-simple": "^2.1.4",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"simple-line-icons": "^2.4.1",
"style-loader": "^0.23.0",
"universal-cookie": "^3.0.4"
}
I tried some helps on forums but nothing helped. Can you say me please what i have wrong?
I am using Babel 7
Thank you :)
Answer
I checked on my notebook, You have just lot of entries missing in package.json and You are using not supported features. After changing these files run 'npm install' and npm start should wotk :)
package.json
{
"name": "eshop_frontend_template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack -p --progres --config ./webpack.config.js --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://[email protected]/d3tr1tus/eshop_frontend_template.git"
},
"keywords": [],
"author": "Filip Březina <[email protected]> (localhost:8080)",
"license": "MIT",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.3.11",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.20.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@coreui/coreui": "^2.0.9",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/react": "^2.0.5",
"axios": "^0.18.0",
"chart.js": "^2.7.2",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"json-loader": "^0.5.7",
"node-sass": "^4.9.3",
"react": "^16.5.2",
"react-chartjs-2": "^2.7.4",
"react-dom": "^16.5.2",
"react-loadable": "^5.5.0",
"react-localize-redux": "^3.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"reactstrap": "^6.4.0",
"redux": "^4.0.0",
"redux-localstorage-simple": "^2.1.4",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"simple-line-icons": "^2.4.1",
"style-loader": "^0.23.0",
"universal-cookie": "^3.0.4"
}
}
webpack.config.js
const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env','@babel/react'],
plugins: ['@babel/proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import']
}
}
},
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{
test: /\.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
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './dist/index.html'
})
],
devServer: {
contentBase: './dist',
hot: true
}
};