React-native-web: React Native (Web) components not resolving

[peacechen]

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

[necolas]

I don't know. Looks like webpack is trying to bundle react native

[necolas]

From what you've shared I can't see any issue with the packages in this repo

[peacechen]

It's starting to look like the RN web babel plugin isn't recursing replacement of react-native to react-native-web. For example, a shallow replacement works:

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';  // <--- This gets substituted for react-native-web


class AppWrapper extends Component {
    render() {
        return (
                <Text>This is a test</Text>
        );
    }
}

However a nested dependency doesn't:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import Store from '../store';
import App from '../App';

class AppWrapper extends Component {
    render() {
        return (
            <Provider store={Store}>
                <App/>
            </Provider>
        );
    }
}

Stack trace:

ERROR in ./node_modules/react-native/Libraries/Components/Touchable/Touchable.js
Module parse failed: Unexpected token (793:6)
You may need an appropriate loader to handle this file type.
|     const hexColor = '#' + ('00000000' + normalizeColor(color).toString(16)).substr(-8);
|     return (
|       <View
|         pointerEvents="none"
|         style={{
 @ ./node_modules/react-native-svg/lib/SvgTouchableMixin.js 1:296-360
 @ ./node_modules/react-native-svg/elements/Shape.js
 @ ./node_modules/react-native-svg/elements/Image.js
 @ ./node_modules/react-native-svg/index.js
 @ ./node_modules/react-native-svg-uri/index.js
 @ ./app/routesTab/index.js
 @ ./app/components/navigator/index.js
 @ ./App.js
 @ ./web/index.web.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./web/index.web.js

It's referencing react-native instead of react-native-web in react-native-svg. Any pointers on how to get it to recurse?

[MoOx]

Problem can be that RN modules are not transpiled. You will need to tweak your webpack config to handle those.

[peacechen]

Hi @MoOx . I've added the node_modules dependencies under the babelLoaderConfiguration include section of webpack.config. It's grown quite long, for example:

  include: [
    path.resolve(appDirectory, 'web/index.web.js'),
    path.resolve(appDirectory, 'app'),
    path.resolve(appDirectory, 'App.js'),
    path.resolve(appDirectory, 'node_modules/react-native-animatable'),
    path.resolve(appDirectory, 'node_modules/react-native-autocomplete-input'),
    path.resolve(appDirectory, 'node_modules/react-native-button'),
    path.resolve(appDirectory, 'node_modules/react-native-calendar-picker'),
    // ... 
    path.resolve(appDirectory, 'node_modules/react-native-svg'),
    // ... etc
  ],

Is that the right way to get the plugin to transpile dependencies?

[MoOx]

Yep. You could try using a regex to make it shorter.

[peacechen]

Digging down further, react-native-svg imports using the full path name.

_react-native-svg/lib/SvgTouchableMixin.js_:

import Touchable from 'react-native/Libraries/Components/Touchable/Touchable';

_react-native-svg/lib/createReactNativeComponentClass.js_:

import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass.js'

The first one could be replaced with the more sensible

import { Touchable } from 'react-native';

The second one importing shims could be a bigger problem. Its contents are intriguing:

const {
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
} = require('ReactNative');

Thoughts?

[necolas]

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

[peacechen]

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.

[geminiyellow]

same error.

[thongnx6]

same error

[luandro]

Getting same error. I'm doing exactly as Getting Started guide.

[diegomr86]

Same problem here.

ERROR in ./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve 'AccessibilityInfo' in '/home/uranus/dev/cultivar/node_modules/react-native/Libraries/react-native'
@ ./node_modules/react-native/Libraries/react-native/react-native-implementation.js 1:105-133
@ ./node_modules/react-native-fbsdk/js/FBAccessToken.js
@ ./node_modules/react-native-fbsdk/js/index.js
@ ./src/app/components/App.js
@ ./index.web.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js

[0xc0d3r]

+1

Getting same error

[guanweisong]

same error
ERROR in ./app/modules/mine/account_balance/apply_cash/BalanceHistoryPage.js Module not found: Error: Can't resolve '../../../../resources/images/common/no_data.png' in 'D:\git\xinbei-rn\app\modules\mine\account_balance\apply_cash' @ ./app/modules/mine/account_balance/apply_cash/BalanceHistoryPage.js 1:5067-5125 @ ./app/modules/mine/router.js @ ./app/router.js @ ./app/App.js @ ./index.web.js @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.web.js

<Image style={{ marginTop: 100 }} source={require('../../../../resources/images/common/no_data.png')} />

[murad-faridi]

You have to run this command

npm i react-native-web

Error will be resolved

[diegolaciar]

+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",

[roots-ai]

Any resolutions?