after adding @babel/plugin-proposal-class-properties in same error · Issue #8577 · babel/babel

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

package.json

.babelrc
please help

Hey @tejomayonline ! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

What is your directory structure? (Are .babelrc and package.json in the same folder? Are there other package.json s? Where is your file which throws?)
What is your webpack config?

If you are using create-react-app and have ejected, add this as your babel config (in package.json):

"presets": [ "@babel/preset-env", "@babel/preset-react" "plugins": [ "@babel/plugin-proposal-class-properties"

That means installing npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

You might also have to edit your webpack.config

loader: require.resolve('babel-loader'),
options: {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react"
  plugins: [
        "@babel/plugin-proposal-class-properties"
Source: https://stackoverflow.com/a/52504340/1467941
  zevaverbach, pppluto, amazingandyyy, giorgosart, gubikmic, IvanGML, laksmitawidya, Freak613, Robpayot, b1tn3r, and 22 more reacted with thumbs up emoji
  norahsakal and dlgiant reacted with hooray emoji
  norahsakal, arammanukyan1999, and emily41030 reacted with heart emoji
  norahsakal reacted with rocket emoji
    All reactions
  "name": "lambda-starter",
  "version": "1.0.0",
  "description": "Minimalist AWS API Gateway and AWS Lambda starter kit",
  "main": "build/index.js",
  "scripts": {
    "build": "NODE_ENV=production webpack --display-error-details --display-modules",
    "watch": "webpack --watch",
    "test": "jest --verbose --config ./jest.config.js",
    "test:watch": "jest --watch --verbose --config ./jest.config.js",
    "start": "sam local start-api --port 5000",
    "dist": "rm -f dist.zip && zip -jq dist.zip build/index.js",
    "update:dev": "aws lambda update-function-code --function-name DevExample --zip-file fileb://dist.zip --publish",
    "update:prod": "aws lambda update-function-code --function-name ProdExample --zip-file fileb://dist.zip --publish",
    "deploy:dev": "npm run build && npm run test && npm run dist && npm run update:dev",
    "deploy:prod": "npm run build && CI=true npm run test && npm run dist && npm run update:prod"
  "repository": {
    "type": "git",
    "url": "git+https://github.com/buildbreakdo/lambda-starter.git"
  "keywords": [
    "starter",
    "starter-kit",
    "aws-api-gateway",
    "aws-lambda"
  "author": "Your Name Here",
  "bugs": {
    "url": "https://github.com/buildbreakdo/lambda-starter/issues"
  "homepage": "https://github.com/buildbreakdo/lambda-starter#readme",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.4",
    "jest": "^23.6.0",
    "jest-cli": "^23.6.0",
    "webpack": "^4.8.1",
    "webpack-cli": "^3.1.2"
  "dependencies": {
    "node-fetch": "^2.3.0"
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
  target: 'node',
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: [ './src/index.js' ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    library: 'index',
    libraryTarget: 'commonjs2'
  plugins: [
    new webpack.IgnorePlugin(/^pg-native$/),
    new webpack.DefinePlugin({
      'process.env.BROWSER': false,
      __DEV__: process.env.NODE_ENV !== 'production',
  module: {
    rules: [
        test: /\.(mjs|js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
              plugins: [
                '@babel/plugin-proposal-class-properties'
.babelrc
  "presets": [
      "@babel/preset-env",
        "targets": {
          "node": "8.10"
  "plugins": [
    "@babel/plugin-proposal-class-properties"
What was causing this to not work in our monorepo was not explicitly stating the plugins in the webpack.config.js, even after yarn add @babel/plugin-proposal-class-properties -D and adding @babel/plugin-proposal-class-properties under plugins in .babelrc webpack babel was still not picking up the presence of the plugin. Only after explicitly stating the plugin in webpack.config.js did the project build (even after rm -rf node_modules, yarn).
Base project with this setup is here: https://github.com/buildbreakdo/lambda-starter
  koshuang, HDv2b, nos-nart, r-aamir, kostenko, aacassandra, gklsan, davidyoon85, SwinBlackSea, yonatanlozinsky, and 5 more reacted with thumbs up emoji
  r-aamir and aacassandra reacted with hooray emoji
  kangax, r-aamir, aacassandra, IvanGML, itsmeurbi, and dimats reacted with heart emoji
    All reactions
          I'm trying to run Jest tests and getting the Support for the experimental syntax 'classProperties' isn't currently enabled error due to code in node_modules/react-native/jest/mockComponent.js.
This fixed it for me in package.json:
  "jest": {
    "preset": "react-native",
    "transform": {
      "node_modules/react-native/.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
Latest recommendations can also be found here: https://jestjs.io/docs/en/tutorial-react-native
          The above solution are important. But if it doesn't fix the issue then this might help you...
If some one working on monorepo following react-native-web-monorepo than you need to config-overrides.js file in packages/web. you need to add     resolveApp('../../node_modules/react-native-ratings'), in that file...
My complete config-override.js file is
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
    resolveApp('../../node_modules/@react-navigation'),
    resolveApp('../../node_modules/react-navigation'),
    resolveApp('../../node_modules/react-native-gesture-handler'),
    resolveApp('../../node_modules/react-native-reanimated'),
    resolveApp('../../node_modules/react-native-screens'),
    resolveApp('../../node_modules/react-native-ratings'),
    resolveApp('../../node_modules/react-navigation-drawer'),
    resolveApp('../../node_modules/react-navigation-stack'),
    resolveApp('../../node_modules/react-navigation-tabs'),
    resolveApp('../../node_modules/react-native-elements'),
    resolveApp('../../node_modules/react-native-vector-icons'),
module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = null;
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
        require.resolve('@babel/plugin-proposal-class-properties'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({ __DEV__: env !== 'production' })
    return config
          Hi i'm building an react ionic app and after all your help I still struggle with this error.

It happened when I tried to ionic serve after importing the react native calendar component.

Thanks for the attention
The above solution are important. But if it doesn't fix the issue then this might help you...
If some one working on monorepo following react-native-web-monorepo than you need to config-overrides.js file in packages/web. you need to add  resolveApp('../../node_modules/react-native-ratings'), in that file...
My complete config-override.js file is
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
    resolveApp('../../node_modules/@react-navigation'),
    resolveApp('../../node_modules/react-navigation'),
    resolveApp('../../node_modules/react-native-gesture-handler'),
    resolveApp('../../node_modules/react-native-reanimated'),
    resolveApp('../../node_modules/react-native-screens'),
    resolveApp('../../node_modules/react-native-ratings'),
    resolveApp('../../node_modules/react-navigation-drawer'),
    resolveApp('../../node_modules/react-navigation-stack'),
    resolveApp('../../node_modules/react-navigation-tabs'),
    resolveApp('../../node_modules/react-native-elements'),
    resolveApp('../../node_modules/react-native-vector-icons'),
module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = null;
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
        require.resolve('@babel/plugin-proposal-class-properties'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({ __DEV__: env !== 'production' })
    return config
thanks for solution but i'm getting error after updating your code with same repo

Cannot read property 'oneOf' of undefined, can please help

line is .concat(config.module.rules[2].oneOf[1].options.plugins);