如何使用 React 和 babel 修复警告：解析错误：意外令牌

Question

I have this app where I have added react, babel and webpack. Repo in github: https://github.com/GiorgioMartini/holli

Its seems to work ok, buti get this error:

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)

that line 7:7 is this one where the div starts after the 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')
)

So im guessing its some babel misconfiguration or something.

This is my babel config file:

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' ]}    ]
  }
};

And this is the 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"
  }
}

Any ideas where could be the issue and how to fix it?

here is the repo: https://github.com/GiorgioMartini/holli

Answer 1

I found the answer,

that is just a eslint error, so the app works fine is just eslint complaining.

I had to add this to the eslintrc file and now its fixed:

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