babel: after adding @babel/plugin-proposal-class-properties in same error

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

I get the following error even after adding the plugin:

i confused…

package.json

.babelrc

Working in a large mono-repo had to do three things to get this to work:

package.json

{
  "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

Check your .babelrc, it’s @babel/plugin-proposal-class-properties, not @transform-class-properties

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
};

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

I have the same issue. It totally block latest React syntax (static state with no constructor and all arrow functions)

It’s possible these issues step from the changes to config file application. I’d recommend folks take a look at http://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading, which may help.