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)

Most upvoted comments

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.

web  Failed to compile.
/Users/diegolaciar/workspace/providerCustomer/the-app/node_modules/react-native/Libraries/Animated/src/components/AnimatedImage.js
Module not found: Can't resolve '../../../Image/Image' in '/Users/diegolaciar/workspace/providerCustomer/the-app/node_modules/react-native/Libraries/Animated/src/components'


Expo CLI 3.19.2 environment info:
    System:
      OS: macOS 10.15.3
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
      npm: 6.14.2 - ~/.nvm/versions/node/v12.16.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^37.0.0 => 37.0.6
      react: ^16.9.0 => 16.9.0
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4
    npmGlobalPackages:
      expo-cli: 3.17.21

"react-native-web": "^0.11.7",

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:

    "../Utilities/Platform": "identity-obj-proxy",
    "../Components/AccessibilityInfo/legacySendAccessibilityEvent": "identity-obj-proxy",
    "../../Image/Image": "identity-obj-proxy",
    "../Utilities/BackHandler": "identity-obj-proxy",
    "./PlatformColorValueTypes": "identity-obj-proxy",
    "../../Utilities/Platform": "identity-obj-proxy",
    "./BaseViewConfig": "identity-obj-proxy",
    "./RCTNetworking": "identity-obj-proxy",
    "./RCTAlertManager": "identity-obj-proxy",

I ended up with yarn add -D identity-obj-proxy end aliases like so

...
            '../../Image/Image': 'identity-obj-proxy',
            '../Utilities/BackHandler': 'identity-obj-proxy',
            '../../StyleSheet/PlatformColorValueTypes': 'identity-obj-proxy',

Any 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) {

22 | const {normalizeColorObject} = require(‘./PlatformColorValueTypes’); | ^ 23 | const normalizedColor = normalizeColorObject(color); 24 | if (normalizedColor != null) { 25 | return color;