./src/components/BasicList.js 中的错误模块构建失败：SyntaxError：装饰器不受官方支持答案

【问题标题】：ERROR in ./src/components/BasicList.js Module build failed: SyntaxError: Decorators are not officially supported./src/components/BasicList.js 中的错误模块构建失败：SyntaxError：装饰器不受官方支持
【发布时间】：2017-11-06 18:19:41
【问题描述】：

我得到了

ERROR in ./src/components/BasicList.js
Module build failed: SyntaxError: Decorators are not officially supported yet in 6.x pending a proposal update.
However, if you need to use them you can install the legacy decorators transform with:

npm install babel-plugin-transform-decorators-legacy --save-dev

and add the following line to your .babelrc file:

{
  "plugins": ["transform-decorators-legacy"]
}

因为

import React from 'react';
// http://glortho.github.io/react-keydown/example/index.html
import keydown from 'react-keydown';

import {Grid, Row, Column} from 'react-cellblock';

import MyComponent from '../utils/MyComponent';

@keydown
export default class BasicList extends MyComponent {

我已经多次按照要求安装了该软件包，但仍然对为什么它不起作用感到困惑。

.babelrc:

{
  "presets": ["react", "es2015", "stage-1"],
  "plugins": ["transform-decorators-legacy"]

}

包：

"devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "json-loader": "^0.5.4",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-cellblock": "^3.0.0",
    "react-dom": "^0.14.3",
    "react-keydown": "^1.7.3",
    "react-redux": "4.3.0",
    "react-router": "^2.8.1",
    "react-select": "^1.0.0-rc.5",
    "redux": "^3.0.4",
    "requests": "^0.1.7",
    "underscore": "^1.8.3"
  }
}

webpack.config.js：

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

关于这个的所有答案都说要做我已经做过的事情。我一直在重启 npm 服务器，但无济于事。

【问题讨论】：

你的 .babelrc 文件中还有其他插件吗？
我的 bablerc 在上面，它只有 1 个插件。如果有帮助，我刚刚发布了 webpack 配置。 ty
您实际上可以从加载器内部删除查询，因为您现在已经有了一个 babelrc 文件。
漂亮，请作正式回答并记分。 ty Vivek
发布了答案

标签： javascript node.js reactjs babeljs

【解决方案1】：

问题在于您的 webpack.config.js 文件。正确的配置文件应该没有加载器中的密钥查询，因为所有这些都已在您的 .babelrc 文件中指定。

更新后的 webpack.config.js 文件应该是：-

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

【讨论】：