反应意外令牌 < - babel 加载器

Question

嗨，我有问题 babel-loader 它写信给我

./src/js/pages/Admin/views/Pages/Register/Register.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误：C:\Projekty\eshop_frontend_template\src\js\pages\Admin\views\Pages\Register\Register.js: 意外标记 (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">

我的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'
    })
],

我的package.json#babel

"babel": {
"presets": [
  [
    "@babel/preset-env",
    {
      "modules": "commonjs",
      "targets": {
        "node": "current"
      }
    }
  ],
  "@babel/preset-react"
],
"plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]
  },

我的依赖关系

"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"
  }

我在论坛上尝试了一些帮助，但没有任何帮助。你能告诉我我哪里错了吗？

我正在使用 Babel 7

谢谢:)

Answer 1

我检查了我的笔记本，package.json 中缺少很多条目，并且您使用的功能不受支持。更改这些文件后运行 'npm install' 和 npm start 应该 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://d3tr1tus@bitbucket.org/d3tr1tus/eshop_frontend_template.git"
  },
  "keywords": [],
  "author": "Filip Březina <filip.brezina11@gmail.com> (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
    }
};

Answer 2

I found that the error is because of older version of babel which doesn't handle newer versions of react code.

这是一个简单的解决方法：

我的问题是旧的 babel 版本很容易通过安装解决：

npm i @babel/plugin-proposal-class-properties @babel/preset-react @babel/preset-env @babel/core @babel/plugin-transform-runtime --save-dev

在 .babelrc 文件中（或在 "babel" : 内的 package.json 中）：

{
   "presets": [
       "@babel/react" , 
       "@babel/env" , 
   ],
   "plugins": [
       "@babel/plugin-proposal-class-properties"
   ]
}

此后babel构建成功

Answer 3

在我的例子中，我只需要文件 .babelrc :

{
 "presets": ["react"]
}

反应意外令牌 < - babel 加载器

React Unexpected token < - babel loader

reactjs

babeljs

unexpected-token

babel-loader

这是一个简单的解决方法：