首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在类函数上生成模块时生成失败

在类函数上生成模块时生成失败
EN

Stack Overflow用户
提问于 2019-10-30 02:21:15
回答 1查看 78关注 0票数 0

我之前使用的是默认脚本" create -react-app“,但是项目需要我使用WebPack 4,所以我需要创建脚本并在我的package.json中添加额外的Babel/Webpack。

现在,我被困在运行代码上:

代码语言:javascript
复制
yarn run v1.19.0
$ webpack --optimize-minimize --config=webpack.min.config.js
Hash: 073756e9eb95ab8e967e
Version: webpack 4.41.0
Time: 46729ms
Built at: 10/29/2019 11:10:55 AM
 2 assets
Entrypoint main = app.bundle.min.js
[15] (webpack)/buildin/global.js 472 bytes {0} [built]
[36] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
[37] ./src/index.scss 698 KiB {0} [built]
[38] ./src/App.css 380 bytes {0} [built]
[56] ./src/index.js + 74 modules 191 KiB {0} [built]
     | ./src/index.js 590 bytes [built]
     | ./src/store.js 1 KiB [built]
     | ./src/serviceWorker.js 4.6 KiB [built]
     | ./src/App.js 6.4 KiB [built]
     | ./src/reducers/index.js 221 bytes [built]
     | ./src/actions/systemActions.js 1.78 KiB [built]
     | ./src/actions/types.js 833 bytes [built]
     | ./src/reducers/systemReducer.js 1.94 KiB [built]
     | ./src/reducers/partsReducer.js 2.17 KiB [built]
     | ./src/actions/partsActions.js 2.7 KiB [built]
     | ./src/reducers/initialState.js 855 bytes [built]
     |     + 64 hidden modules
    + 53 hidden modules

ERROR in ./src/components/CreateMCRStep1.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\src\components\CreateMCRStep1.js: Support for the experimental syntax 'classProperties' isn't currently enabled (182:38):

  180 |       }
  181 | 
> 182 |     externalComponentValidationCheck = (data, name) => {
      |                                      ^
  183 |     //   console.log("data - " + JSON.stringify(data.target.value))
  184 |     //   console.log("name - " + JSON.stringify(name))
  185 |     switch(name)

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    at Object.raise (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:6420:17)
    at Object.expectPlugin (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:7778:18)
    at Object.parseClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11013:12)
    at Object.pushClassProperty (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10978:30)
    at Object.parseClassMemberWithIsStatic (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10917:14)
    at Object.parseClassMember (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10851:10)
    at withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10806:14)
    at Object.withTopicForbiddingContext (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9884:14)
    at Object.parseClassBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10783:10)
    at Object.parseClass (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10757:22)
    at Object.parseStatementContent (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10051:21)
    at Object.parseStatement (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10009:17)
    at Object.parseBlockOrModuleBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10585:25)
    at Object.parseBlockBody (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:10572:10)
    at Object.parseTopLevel (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:9940:10)
    at Object.parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11447:17)
    at parse (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\node_modules\@babel\parser\lib\index.js:11483:38)
    at parser (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:168:34)
    at normalizeFile (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\normalize-file.js:102:11)
    at runSync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:44:43)
    at runAsync (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transformation\index.js:35:14)
    at process.nextTick (E:\Work\Work\Manufacturing Change Request\manufacturingchangerequest\node_modules\@babel\core\lib\transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/components/CreateMCRPage.js 28:0-46 145:39-53
 @ ./src/App.js
 @ ./src/index.js

这至少会在我的5个组件上发生,出于某种原因,它会标记我的类函数和回调函数。

目前这是我的webpack.config.js

代码语言:javascript
复制
    var  path = require('path');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {
    entry: './src/index.js',
    mode: 'production',
    output: {
        path: __dirname + './build',
        filename:'app.bundle.js'
    },
    module: {
        rules : [ {
            test: /\.js?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets:['@babel/react']
                }
            }
        }, 
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                //    {
                //   // After all CSS loaders we use plugin to do his work.
                //   // It gets all transformed CSS and extracts it into separate
                //   // single bundled file
                //   loader: MiniCssExtractPlugin.loader
                //    }, 
                   {
                     loader: "css-loader"
                   },
                   {
                       // First we transform SASS to standard CSS
                       loader: "sass-loader",
                       options: {
                       implementation: require("sass")
                       }
                   },
                 ]
      },
      {
        // Now we apply rule for images
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 // Using file-loader for these files
                 loader: "file-loader",

                 // In options we can set different things like format
                 // and directory to save
                 options: {
                   outputPath: 'images'
                 }
               }
             ]
      }]
    },
    // plugins: [ 
    //   new MiniCssExtractPlugin({
    //  filename: "bundle.css"
    //   })     
    // ]
};

我注释掉了所有的CSS代码,因为我试图跟踪我的配置中的哪一部分是问题所在。

我的.babelrc看起来像这样:

代码语言:javascript
复制
{
"presets": [
    "@babel/env",
    "@babel/react"
]
}

我已经尝试了至少4个小时来解决这个问题,并尝试了多个设置,但到目前为止都没有效果。

EN

回答 1

Stack Overflow用户

发布于 2019-10-30 02:29:38

显然我这段时间用错了我的问题,箭头功能是一个实际的问题,而不是配置问题。

这解决了我的问题

Arrow Function syntax not working with webpack?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58613333

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档