webpack / typcript / реагировать - ошибка: неожиданный токен React.Component - PullRequest
Новая
       8

webpack / typcript / реагировать - ошибка: неожиданный токен React.Component

0 голосов
/ 06 апреля 2019

Я пытаюсь создать проект с веб-пакетом, набрать текст и отреагировать. Я использую babel, чтобы перенести мой машинописный код / ​​код реакции. При запуске сервера разработки я получаю следующую ошибку: 

Module parse failed: Unexpected token (4:6)
You may need an appropriate loader to handle this file type.
| 
| export class App extends React.Component {
>   arr = [1, 2, 3];
| 
|   render() {

Бабель не может обработать объявление массива? Это кажется мне немного странным. Кроме того, потому что мой класс реакции выглядит по-другому:

app.tsx 

export class App extends React.Component {

    public arr: number[] = [1, 2, 3];

    public render(): React.ReactNode {
       ...
    }
}

export default App;

Я сейчас пытаюсь предотвратить файл .babelrc или babel.config.js и пытаюсь решить его с помощью моего webpack.config.js:

webpack.config.js

Из-за пояснений я вырезал большинство ненужных конфигураций: 

module.exports = (env) => {

    const isProduction = env.production === true;
    const isDevelopment = env.development === true;

    return {
        entry: {
            main: srcDir + '/index.tsx'
        },
        ...
        module: {
            rules: [
                {
                    oneOf: [
                       {
                        test: /\.(js|mjs|jsx|ts|tsx)$/,
                        include: srcDir,
                        loader: 'babel-loader',
                        options: {
                            babelrc: false,
                            configFile: false,
                            presets: [
                                ["@babel/preset-react"],
                                ["@babel/preset-typescript"]
                            ],
                            plugins: [
                                [
                                    'babel-plugin-named-asset-import',
                                    {
                                        loaderMap: {
                                            svg: {
                                                ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                                            },
                                        },
                                    },
                                ],
                            ],
                            cacheDirectory: true,
                            cacheCompression: isProduction,
                            compact: isProduction,
                        },
                    },
                       ...
                    ]
                }
            ]

        },
        ...
    };
};

package.json

Список задействованных пакетов выглядит следующим образом: 

 ...
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@svgr/webpack": "^4.1.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-named-asset-import": "^0.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.3.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "@types/react": "^16.8.12",
    "@types/react-dom": "^16.8.3",
    "@types/react-router-dom": "^4.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }

Может быть, у некоторых из вас есть решение, как предотвратить эту проблему с помощью конфигурации propper. :)

1 Ответ

1 голос
/ 06 апреля 2019

Похоже, это не связано с машинописным или реагирующим синтаксическим анализом, я думаю, что вам не хватает следующего плагина Babel: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

Этот плагин позволяет Babel правильно анализировать свойства класса, такие как ваш массив.

Чтобы установить его npm install --save-dev @babel/plugin-proposal-class-properties

, а затем добавьте его в конфигурацию вашего загрузчика babel в списке плагинов. 

plugins: [
      "@babel/plugin-proposal-class-properties",
      [
        'babel-plugin-named-asset-import',
        {
          loaderMap: {
             svg: {
                ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
             },
          },
        },
      ],
 ]
...