DEV Community

Discussion on: Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo

 
devozs profile image
Oz Shemesh • Edited

thanks for the input
i am facing similar issue while using GoogleSigninButton from react-native-google-signin.

i tried adding require.resolve('@babel/plugin-proposal-class-properties') as you suggested below.

also tried to update babel.config.js with the following, didnt worked as well...
module.exports = {
plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
[
'@babel/plugin-proposal-class-properties',
{
loose: true,
},
],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: ['@babel/preset-flow', 'module:metro-react-native-babel-preset'],
}

also tried with loose: true
require.resolve('@babel/plugin-proposal-class-properties', {
loose: true,
}),

any suggestion please?

thanks for you time.

Thread Thread
 
nishcooly profile image
Nishant Koli

Hi Oz, were you able to make it run? Did you try with a compatible release (any before 0.60)?

Thread Thread
 
devozs profile image
Oz Shemesh

Hi Nishant,

Unfortunately I was not able to solve it.
I am not sure about earlier versions but I went over many possible suggestions, none of them worked...
Any additional idea that I can try?

Thanks for the reply

Thread Thread
 
raajnadar profile image
Rajendran Nadar

Use this config to fix the issue

config.module.rules.push(
    {
        test: /\.js$/,
        use: {
            loader: 'babel-loader',
            options: {
                // Disable reading babel configuration
                babelrc: false,
                configFile: false,

                // The configration for compilation
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react',
                    '@babel/preset-flow'
                ],
                plugins: [
                    '@babel/plugin-proposal-class-properties',
                    '@babel/plugin-proposal-object-rest-spread'                  
               ]
            }
        }
    }
)

Add the above code before the return config line

Thread Thread
 
devozs profile image
Oz Shemesh

Thanks Rajendran

i tried adding the above as part of config-overrides.js
it didn't helped.

BTW, i`ve executed 'sudo yarn add @react-native-community/google-signin'

Under the folder 'react-native-web-monorepo/packages/components'
Is that the right location?

Thanks, Oz

Thread Thread
 
devozs profile image
Oz Shemesh

An update...
i had to add two more dev dependencies under the web module.
sudo yarn add --dev babel-loader
sudo yarn add --dev @babel/preset-flow

now i am getting different error:
/react-native-web-monorepo/node_modules/@react-native-community/google-signin/src/GoogleSigninButton.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native'.