Does not work with react-native-web

[xiongemi]

I was trying to use react-native-web to create a web app out of my react native mobile app. it works fine in the mobile simulator, just got errors when i run on the web browser:

I got this error:

ERROR in /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/react-native-ratings/dist/index.js
Module build failed (from /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/web/src/utils/web-babel-loader.js):
Error: Cannot find module 'babel-preset-react-native'
Require stack:
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/files/index.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/index.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/babel-loader/lib/index.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/web/src/utils/web-babel-loader.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/loader-runner/lib/loadLoader.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/webpack/lib/NormalModule.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/webpack/lib/Compiler.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/webpack/lib/webpack.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/web/src/executors/dev-server/dev-server.impl.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/tao/src/shared/workspace.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/tao/src/commands/run.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/tao/index.js
- /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/cli/lib/run-cli.js
- If you want to resolve "react-native", use "module:react-native"
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at resolve (internal/modules/cjs/helpers.js:94:19)
    at resolveStandardizedName (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/files/plugins.js:100:7)
    at resolvePreset (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/files/plugins.js:48:10)
    at loadPreset (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/files/plugins.js:67:20)
    at createDescriptor (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (<anonymous>)
    at createDescriptors (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-chain.js:416:26)
    at /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-chain.js:374:7
    at Generator.next (<anonymous>)
    at loadFileChain (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/core/lib/config/config-chain.js:228:24)
    at loadFileChain.next (<anonymous>)

Then after I install 'babel-preset-react-native', I got this error:

ERROR in /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/react-native-ratings/dist/SwipeRating.js
Module build failed (from /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@nrwl/web/src/utils/web-babel-loader.js):
TypeError: /Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/react-native-ratings/dist/SwipeRating.js: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/scope/index.js:938:13)
    at convertBlockScopedToVar (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:139:13)
    at PluginPass.VariableDeclaration (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:26:9)
    at newFn (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/visitors.js:171:21)
    at NodePath._call (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:110:16)
    at TraversalContext.visitMultiple (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:74:17)
    at TraversalContext.visit (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:136:19)
    at Function.traverse.node (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/index.js:76:17)
    at NodePath.visit (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:110:16)
    at TraversalContext.visitSingle (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/Users/emilyxiong/Code/tmp/aztro-daily-horoscope/node_modules/@babel/traverse/lib/index.js:76:17)

my dependencies: "react": "17.0.1", "react-native": "0.64.1", "react-native-elements": "3.4.2", "react-native-web": "0.16.3",

[diginikkari]

@xiongemi have you found any solution for this issue? I'm having the same issue and don't seem to find out how to overcome this.

[julianpitt]

Has anyone been able to solve this? I'm trying to use react-native-elements with @storybook/addon-react-native-web but this package is preventing that.

[ste7en]

Solution: https://github.com/Monte9/react-native-ratings/issues/168 fixed by patching 'react-native-ratings'