Unable to use with webpack v5

[ultralabsgev]

Is there an existing issue for this?

• [X] I have searched the existing issues

Explain what you did

I create react app and go step by step from the stretch

Expected behavior

can't start the project, getting 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled)

Describe the bug

'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled)

Steps To Reproduce

npx create-react-app my-app --template typescript

npm install react-native-safe-area-context

npm i  @rneui/base @rneui/themed react-native-web react-native-vector-icons

npm i --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired

create config-overrides.js

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/@rneui/base'),
    path.resolve(__dirname, 'node_modules/@rneui/themed'),
    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
    path.resolve(__dirname, 'node_modules/react-native-ratings'),
    path.resolve(__dirname, 'src'),
  ])
);

and run start

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

``` Output from `npx @rneui/envinfo` goes here. ```

[ultralabsgev]

guys update your documentation

[PhungVanHoa]

I also got the same error

[PhungVanHoa]

@ultralabsgev add removeModuleScopePlugin() to config-overrides.js to solve this problem

const path = require("path");

const {
  override,
  addBabelPlugins,
  babelInclude,
  addWebpackAlias,
  addBabelPresets,
  removeModuleScopePlugin,
} = require("customize-cra");

module.exports = override(
  ...addBabelPlugins([
    "@babel/plugin-proposal-class-properties",
    {
      loose: true,
    },
  ]),
  ...addBabelPresets([
    "@babel/preset-env",
    {
      loose: true,
      targets: {
        browsers: ["> 1%", "last 2 versions"],
      },
      modules: "commonjs",
    },
  ]),
  removeModuleScopePlugin(),
  babelInclude(
    [
      path.resolve(__dirname, "node_modules/@rneui/base"),
      path.resolve(__dirname, "node_modules/@rneui/themed"),
      path.resolve(__dirname, "node_modules/react-native-vector-icons"),
      path.resolve(__dirname, "node_modules/react-native-ratings"),
      path.resolve(__dirname, "src"),
    ],
    addWebpackAlias({
      "react-native$": "react-native-web",
      "react-native-linear-gradient": "react-native-web-linear-gradient",
    })
  )
);