如何使用 React 和 babel 修復警告：解析錯誤：意外令牌

Question

我有這個應用程序，我在其中添加了 react、babel 和 webpack。 github 中的回購： https : //github.com/GiorgioMartini/holli

它似乎工作正常，但我收到此錯誤：

WARNING in ./src/scripts/index.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/giorgio/Documents/frontend-assessment-test/src/scripts/index.js
  7:7  error  Parsing error: Unexpected token <

✖ 1 problem (1 error, 0 warnings)

第 7:7 行是 div 在 reurn 后開始的地方：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
    return (
      <div>
        Hella 
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

所以我猜測它的一些 babel 配置錯誤或什么的。

這是我的 babel 配置文件：

const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: Path.resolve(__dirname, '../src/scripts/index.js')
  },
  output: {
    path: Path.join(__dirname, '../build'),
    filename: 'js/[name].js'
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      { from: Path.resolve(__dirname, '../public'), to: 'public' }
    ]),
    new HtmlWebpackPlugin({
      template: Path.resolve(__dirname, '../src/index.html')
    })
  ],
  resolve: {
    alias: {
      '~': Path.resolve(__dirname, '../src')
    }
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: ['babel-loader',  'eslint-loader'], exclude: /node_modules/},
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}    ]
  }
};

這是 package.json：

  "name": "frontend-assessment-test",
  "version": "1.0.0",
  "description": "A frontend assessment test for our new pirates, which are willing to come on board.",
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js  --colors",
    "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/holidaypirates/frontend-assessment-test"
  },
  "author": "HolidayPirates",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/holidaypirates/frontend-assessment-test/issues"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "eslint": "^6.7.1",
    "eslint-loader": "^3.0.2",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^4.0.0-beta.11",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "core-js": "^3.3.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

任何想法可能是問題所在以及如何解決它？

這是回購： https : //github.com/GiorgioMartini/holli

Answer 1

我找到了答案，

這只是一個 eslint 錯誤，所以應用程序工作正常只是 eslint 抱怨。

我不得不將它添加到 eslintrc 文件中，現在它已修復：

"extends": [
    "plugin:react/recommended"
  ]