javascript - Missing class properties transform react - Stack Overflow

admin管理员组

文章数量:1402315

I know there are many questions/answers out there but none of them seems to help me resolve my issue. I don't understand what is wrong with my setup:

Here is my webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ftux-ponents.js',
    library: "shared-ponents",
    libraryTarget: "umd"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass', 'postcss-loader']
      },
      {
        test: /\.(ttf|eot|svg|jpg|png|woff)$/,
        loader: 'url-loader'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_ponents|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    react: {
      root: 'React',
      monjs2: 'react',
      monjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      monjs2: 'react-dom',
      monjs: 'react-dom',
      amd: 'react-dom'
    },
    'styled-ponents': {
      monjs: 'styled-ponents',
      monjs2: 'styled-ponents',
      amd: 'styled-ponents'
    }
  }
};

Here's my babelrc:

{
    "presets": ["env", "react", "es2015", "stage-0"],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
}

I tried reordering presets, adding appropriate plugins (transform-class-properties), deleting reinstalling node_modules but nothing seems to help. My npm and node is up-to-date, also tried using this to make sure I included everything I need for babel. Any suggestions?

I know there are many questions/answers out there but none of them seems to help me resolve my issue. I don't understand what is wrong with my setup:

Here is my webpack.config.js:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ftux-ponents.js',
    library: "shared-ponents",
    libraryTarget: "umd"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass', 'postcss-loader']
      },
      {
        test: /\.(ttf|eot|svg|jpg|png|woff)$/,
        loader: 'url-loader'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_ponents|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    react: {
      root: 'React',
      monjs2: 'react',
      monjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      monjs2: 'react-dom',
      monjs: 'react-dom',
      amd: 'react-dom'
    },
    'styled-ponents': {
      monjs: 'styled-ponents',
      monjs2: 'styled-ponents',
      amd: 'styled-ponents'
    }
  }
};

Here's my babelrc:

{
    "presets": ["env", "react", "es2015", "stage-0"],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
}

I tried reordering presets, adding appropriate plugins (transform-class-properties), deleting reinstalling node_modules but nothing seems to help. My npm and node is up-to-date, also tried using this to make sure I included everything I need for babel. Any suggestions?

• javascript
• reactjs
• webpack
• babeljs

Share Improve this question Follow edited Jun 6, 2018 at 18:13 inertia asked Jun 6, 2018 at 16:40 inertiainertia 4,12722 gold badges2020 silver badges2626 bronze badges 4

• which version of webpack? – PlayMa256 Commented Jun 6, 2018 at 16:41
• @MatheusSilva "webpack": "^3.12.0", – inertia Commented Jun 6, 2018 at 16:57
• You need to install babel-plugin-transform-class-properties if not already done so by using npm install babel-plugin-transform-class-properties --save-dev – tarzen chugh Commented Jun 6, 2018 at 16:59
• "babel-plugin-transform-class-properties": "^6.24.1", it's already installed :( – inertia Commented Jun 6, 2018 at 17:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In your babel loader you're not including the plugin for class properties even though you already have it installed. Try making your loader look like this:

     {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },

Okay I figured it out. I needed to include presets and plugins in the rules array in module object in webpack.config.js:

rules: [
    {
    test: /\.js$/,
    include: path.resolve(__dirname, 'src'),
    exclude: /(node_modules|bower_ponents|build)/,
    loader: 'babel-loader',
    query: {
        presets: ['env', 'react', 'es2015', 'stage-0'],
        plugins: ["transform-class-properties"]
    }
    }
]

Found the answer here.

本文标签： javascriptMissing class properties transform reactStack Overflow