Я пытаюсь скомпилировать свое приложение-интерфейс для реагирования, но у меня есть пара ошибок, связанных с синтаксисом "...":

ERROR in condition.jsx
Module build failed: SyntaxError: Unexpected token (25:10)

  23 |           show_table : undefined,
  24 |           fa_count : 0,
> 25 |           ...this.state
     |           ^
  26 |         }

Condition.jsx расширяет (с помощью ООП) другой компонент, поэтому мне нужно ... this.state для объединения родительского состояния с локальным состоянием.

При запуске с npm start он работает отлично, но компилятор, похоже, не хочет этого синтаксиса.

ОБНОВЛЕНО: это мои текущие настройки веб-пакета:

const webpack = require('webpack');
const path = require('path');
const Uglify = require("uglifyjs-webpack-plugin");

var plugins = [];

plugins.push(new Uglify());

var config = {
context: __dirname + '/src',
entry: {
    javascript: "./index.js",    
},

plugins: plugins,

output: {
  path: path.join(__dirname,'../static/js/'),
  filename: 'bundle.js',
},

devServer: {
  inline: true,
  port: 8080
},
 resolveLoader: {
    modules: [path.join(__dirname, 'node_modules')]
 },
 module: {
  loaders: [    
     {
        test:/\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
           presets: ['env','react']
        }
     },
     {
        test: /\.css$/,
        loader: 'style-loader'
      }, 
      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
     {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
   },
  }

 module.exports = env => {   
   return  config;
 }

Запуск с помощью этой команды:

./node_modules/.bin/webpack --config webpack.config.js
1
EviSvil 25 Сен 2018 в 12:02

2 ответа

Лучший ответ

В комментарии вы сказали, что у вас нет babelrc. Тогда я уже перечитал официальный документ Webpack и взял оттуда для вас этот образец кода:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    }
  ]

После установки пакета babel-plugin-transform-object-rest-spread вы можете следовать этому примеру кода, чтобы обновить конфигурацию веб-пакета. Подробнее об этом: Webpack Loader

Это комбинация, которая мне подходит, я использую babel-preset- stage-2 вместо этого.

В файле webpack.config.js:

 ....
 module: {
    rules: [
      {
        test:/\.(js|jsx)?$/,
        use: ['babel-loader']
      },
      ....
    ]
  }
....

Я создаю файл .babelrc в корневой папке и его содержимое:

{
  "presets": ["env", "react", "stage-2"],
  ....
}

А это мой файл package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "uuid": "^3.3.2"
  }
}

Надеюсь, это работает для вас.

1
Nguyen You 25 Сен 2018 в 10:54

Вы не сказали о своей конфигурации. Но я предполагаю, что это babel и webpack. Похоже, это проблема с вашей конфигурацией babel. Попробуйте этот плагин:

https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread

После того, как вы его установили, добавьте

"plugins": ["transform-object-rest-spread"]

В ваш .babelrc файл и снова запустите веб-пакет.

1
Javid Askerov 17 Сен 2019 в 19:18