How to fix "Support for the experimental syntax 'classProperties' isn't currently enabled" error if it has been already enabled? - react-native

Question

Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);

Answer 1

The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.