Webpack 使用反应状态抛出 SyntaxError

问题描述

限时删除！！

我正在尝试使用 React (create-react-app) 和 Firebase 实现 SSR.为此，我目前正在按照 本教程 进行我的 webpack 配置，并且github 目录:

I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration following this tutorial and github dir:

module.exports = [{
    entry: './src/index.js',
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/},
        ]
    },
    output: {
        filename: 'public/bundle.js',
        path: __dirname
    }
}];

不知何故，对于反应状态，webpack 返回以下错误:

Somehow for react states, webpack returns the following error:

SyntaxError: /Users/timfuhrmann/Documents/Entwicklung/React/auriga/src/shared/ImageHolder.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:11):

       5 | class LazyImage extends Component {
       6 |
    >  7 |     state = {
         |           ^
       8 |         src: null,
       9 |         transition: false
      10 |     };

浏览网页时我发现我需要安装 plugin-proposal-class-properties - 但是我如何在 webpack 中配置它?

Browsing the web I found that I need to install plugin-proposal-class-properties - but how do I configure this inside of webpack?

巴别塔:

"devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "css-loader": "^3.4.0",
    "express": "^4.17.1",
    "file-loader": "^5.0.2",
    "firebase-admin": "^8.9.0",
    "firebase-functions": "^3.3.0",
    "firebase-tools": "^7.11.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }


.babelrc:
{
  "presets":[
    "@babel/preset-env", "@babel/preset-react"
  ]
}

推荐答案

你只需要把它放在你的 Babel 插件中:

You just need to put it in your Babel plugins:

.babelrc:

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

来源:https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

这篇关于Webpack 使用反应状态抛出 SyntaxError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..