使用Webpack4和Babel的React应用程序模块构建失败

Question

My application is not transpiling the JSX from my react application.

Here is my webpack config for babel:

module.exports = {
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },

Here is the configuration for .babelrc:

{
"plugins": [
    "@babel/plugin-transform-react-jsx-self",
    "transform-class-properties"
]

}

Here are the dev dependencies i installed:

"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/plugin-transform-react-jsx-self": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-2": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-react-jsx": "^6.24.1",

as you can see ive played around with a few different dependencies but im pretty sure the issue lies in me not understanding how to properly configure it in my babelrc (this is my first attempt at this)

Other answers ive read to solve this use babel presets in the webpack config and babelrc, but babel has recently deprecated this in Babel7

Answer 1

So in case anyone has the same issue. This configuration of the babelrc is now working for me:

{
"presets": [
  ["@babel/env"],
  ["@babel/preset-react"]
],
"plugins": [
  ["transform-class-properties"],
  ["@babel/plugin-transform-react-jsx-self"]
]

}