I got react-navigation's drawer working on the web.
The following is my config-override.js
constfs=require('fs')constpath=require('path')constwebpack=require('webpack')constappDirectory=fs.realpathSync(process.cwd())constresolveApp=relativePath=>path.resolve(appDirectory,relativePath)// our packages that will now be included in the CRA build stepconstappIncludes=[resolveApp('src'),resolveApp('../components/src'),resolveApp('../../node_modules/@react-navigation'),resolveApp('../../node_modules/react-navigation'),resolveApp('../../node_modules/react-native-uncompiled'),resolveApp('../../node_modules/react-native-elements'),resolveApp('../../node_modules/react-native-gesture-handler'),resolveApp('../../node_modules/react-native-ratings'),resolveApp('../../node_modules/react-native-screens'),resolveApp('../../node_modules/react-native-tab-view'),resolveApp('../../node_modules/react-native-vector-icons'),resolveApp('../components/libraries/MSALAuthLogin'),resolveApp('../../node_modules/react-native-vector-icons'),]module.exports=functionoverride(config,env){// allow importing from outside of src folderconfig.resolve.plugins=config.resolve.plugins.filter(plugin=>plugin.constructor.name!=='ModuleScopePlugin')config.module.rules[0].include=appIncludesconfig.module.rules[1]=nullconfig.module.rules[2].oneOf[1].include=appIncludesconfig.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(newwebpack.DefinePlugin({__DEV__:env!=='production'}))returnconfig}
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?
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'.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Bruno,
How to use 3rd lib, I want to add
react-native-element
package.It's work well on mobile, but when I run web app, it's error below:
Here's what I added to
config-override.js
onpackages/web
In future, I will add react-navigation and some other packages.
Please help, many thanks!
Did you make it work?
I haven't tried your code but yes, changing
config-override.js
correctly should be enough.Was anyone able to add react-navigation to the project? I got react-native-elements working by following the above comment.
Here's a working example for React-Navigation with web :
github.com/react-native-elements/r...
Thank for documenting all this work thoroughly.
As a React-Native noob, this guide was very easy to follow along ! Cheers!
I got react-navigation's drawer working on the web.
The following is my config-override.js
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.
Hi Oz, were you able to make it run? Did you try with a compatible release (any before 0.60)?
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
Use this config to fix the issue
Add the above code before the
return config
lineThanks 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
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'.