@babel/plugin-proposal-class-properties error with native-base added

[ilabsllc]

Describe the bug

added native-base to the project
building it gave the following error
Creating an optimized production build...
Failed to compile.

./node_modules/native-base-shoutem-theme/src/StyleProvider.js
SyntaxError: C:\My\repos\local\ilabsllc\node_modules\native-base-shoutem-theme\src\StyleProvider.js: Support for the experimental syntax 'classProperties' isn't currently enabled (10:20):

8 | */
9 | export default class StyleProvider extends React.Component {

10 | static propTypes = {
| ^
11 | children: PropTypes.element.isRequired,
12 | style: PropTypes.object,
13 | };

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

I see that you already have it commented in babel.config.js

// '@babel/plugin-proposal-class-properties', // Breaks fast refresh on native for some reason, left here if needed

Ucommenting it didn't fix the issue.

Additional context

Any idea / suggestion for a fix ?. I really was looking for something without expo and this is awesome. If this one thing can be fixed I would all set for my project.

[ilabsllc]

Found the fix. Followed the instructions to add a section to webpack configuation at https://rawgit.com/GeekyAnts/native-base-docs/v2.8.0/_book/docs/GetStarted.html

First added the alias

alias: {
        // Support React Native Web
          'react-native/Libraries/Renderer/shims/ReactNativePropRegistry': 'react-native-web/dist/modules/ReactNativePropRegistry',
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',

then

 {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: [
                paths.appSrc,
                path.resolve(paths.appNodeModules, 'native-base-shoutem-theme'),
                path.resolve(paths.appNodeModules, 'react-navigation'),
                path.resolve(paths.appNodeModules, 'react-native-easy-grid'),
                path.resolve(paths.appNodeModules, 'react-native-drawer'),
                path.resolve(
                  paths.appNodeModules,
                  'react-native-safe-area-view',
                ),
                path.resolve(paths.appNodeModules, 'react-native-vector-icons'),
                path.resolve(
                  paths.appNodeModules,
                  'react-native-keyboard-aware-scroll-view',
                ),
                path.resolve(paths.appNodeModules, 'react-native-web'),
                path.resolve(paths.appNodeModules, 'react-native-tab-view'),
                path.resolve(paths.appNodeModules, 'static-container'),
              ],
              loader: require.resolve('babel-loader'),
              .......whatever remaining ....

That resolved this issue.

[Jeffdude]

Would someone mind sharing their full webpack config? I am getting this error in a clean CRNA repo after installing and importing a different library with classProperties (react-native-vector-icons). Even after uncommenting '@babel/plugin-proposal-class-properties,' I still can't seem to get babel to compile. I am unsure how a webpack config will fix a babel compilation issue, but I am assuming this solution applies to all classProperties imports from the response to #80. So would someone mind sharing a minimal working webpack config that will allow me to import alibrary with classProperties and successfully compile/serve? Thank you.

Failed to compile.

./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/jeff/code/nativebase-web-app/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:10):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     root = null;
     |          ^
  44 | 
  45 |     static propTypes = {
  46 |       allowFontScaling: PropTypes.bool,

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.