Неожиданная ошибка токена при загрузке Webpack - PullRequest
Новая
       5

Неожиданная ошибка токена при загрузке Webpack

2 голосов
/ 10 июля 2020

Я попытался настроить свою собственную цепочку инструментов для создания приложения React. Я использую Webpack с Typescript React.

package. json

{
  "name": "library2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint '**/*.{tsx,js,ts}'",
    "lint:fix": "eslint --fix '**/*.{tsx,js,ts}'",
    "start": "webpack-dev-server --mode development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "pg": "^8.3.0",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "typescript": "^3.9.5"
  },
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@types/node": "^14.0.20",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^3.1.0",
    "@typescript-eslint/parser": "^3.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^3.6.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-plugin-import": "^2.21.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config. js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/App.tsx',
  mode: 'development',
  module: {
    rules: [
      { 
        test: /\.(|ts|tsx|js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
            ],
          },
        },
      },
      { // rules for css
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 3000,
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

.babelr c 

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

index. html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="main"></div>
  <script src="../dist/bundle.js"></script>
</body>
</html>

App.tsx 

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

render(<Hello />, document.querySelector('#main'));

Hello.tsx 

import React from 'react';
import './hello.scss';

export default class Hello extends React.Component {
  vark: number;

  test() {
    this.vark = 1;
  }

  render() {
    return (
      <div className="hello">Hello!</div>
    );
  }
}

Я получаю следующая ошибка при сборке webpack (npm run start): 

ERROR in ./src/Hello.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/JAAI/Desktop/Library2/src/Hello.tsx: Unexpected token (5:6)

  3 | 
  4 | export default class Hello extends React.Component {
> 5 |   vark: number;
    |       ^
  6 | 
  7 |   test() {
  8 |     this.vark = 1;
    at Object._raise (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:757:17)
    at Object.raiseWithData (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:750:17)
    at Object.raise (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:744:17)
    at Object.unexpected (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:8834:16)
    at Object.parseClassMemberWithIsStatic (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:12169:12)
    at Object.parseClassMember (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:12062:10)
    at /Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:12007:14
    at Object.withTopicForbiddingContext (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:11078:14)
    at Object.parseClassBody (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:11984:10)
    at Object.parseClass (/Users/JAAI/Desktop/Library2/node_modules/@babel/parser/lib/index.js:11958:22)
 @ ./src/App.tsx 3:0-28 4:41-46
ℹ ｢wdm｣: Failed to compile.

Сначала я подумал, что это потому, что предустановки Webpack env и react не позволяют использовать свойства класса, поэтому я включил свойства класса плагин, но ошибка не исчезла. Обратите внимание: если я удалю эту строку, она будет успешно построена.

...