react-native-web: React Native (Web) components not resolving
Do you want to request a feature or report a bug? Bug (possibly?)
What is the current behavior? I’m following the documentation at https://github.com/necolas/react-native-web/blob/master/website/guides/getting-started.md#web-packaging-for-existing-react-native-apps and using the webpack.config there as a template. I’m not sure if react-native-web is replacing react-native properly. It can’t resolve basic components such as ActivityIndicator.
./node_modules/.bin/webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AccessibilityInfo' in '/myProject/node_modules/react-native/Libraries/react-native'
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 19:35-63
@ ./web/index.web.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./web/index.web.js
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'ActionSheetIOS' in '/myProject/node_modules/react-native/Libraries/react-native'
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 65:32-57
@ ./web/index.web.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./web/index.web.js
ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'ActivityIndicator' in '/myProject/node_modules/react-native/Libraries/react-native'
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 20:35-63
@ ./web/index.web.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./web/index.web.js
The relevant changes to the webpack.config (I placed it under the web/ subdir):
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'web/index.web.js'),
path.resolve(appDirectory, 'app'),
// ... other node_modules packages
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: ['react-native-web'],
// The 'react-native' preset is recommended to match React Native's packager
presets: ['react-native']
}
}
};
Dependencies babel-core, babel-loader, babel-plugin-react-native-web, babel-preset-react-native, babel-preset-react-native-stage-0, babel-preset-stage-0, react-dom, react-native-web are installed. I’m stumped!
What is the expected behavior?
No errors 😃
Environment (include versions). Did this work in previous versions?
- OS: OSX 10.12.6
- Device: MacBook Pro
- Browser: Chrome
- React Native for Web (version): 0.4.0
- React (version): 16.0.0-beta.5
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 24 (5 by maintainers)
You have to run this command
npm i react-native-web
Error will be resolved
Any resolutions?
Agreed, wasn’t saying that this is the fault of react-native-web. My question is more along the lines of whether that could be stubbed, or if there’s any other way to approach it.
+1 same kind of issue here.
That package is reaching into RN internals. You can submit PRs to it to avoid that. It’s not a problem to do with this library
From what you’ve shared I can’t see any issue with the packages in this repo
These are all the ones I needed:
I ended up with
yarn add -D identity-obj-proxy
end aliases like soAny solutions to this? I get a similar error when I import react-native-pie Error is the following Module not found: Can’t resolve ‘./PlatformColorValueTypes’ 20 | ): ?ProcessedColorValue { 21 | if (typeof color === ‘object’ && color != null) {