Skip to content

[RN 0.49] React inside app's local package either doesn't exist, or multiple copies loaded #16320

@fungilation

Description

@fungilation

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

$ react-native info

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.6.0
  Yarn:  1.2.0
  npm:  5.3.0
  Watchman:  4.9.0
  Xcode:  Xcode 9.0 Build version 9A235
  Android Studio:  Not Found

Packages: (wanted => installed)
  react: 16.0.0-beta.5 => 16.0.0-beta.5
  react-native: 0.49.3 => 0.49.3

Steps to Reproduce

  1. Upgraded RN from 0.48 to 0.49
  2. My local forked package of react-native-webview-bridge broke, see below under Actual Behavior

Expected Behavior

react not needed as a dependency in a local package (my fork of https://github.com/alinz/react-native-webview-bridge), nor is my hack fix needed to import directly from main app's node_modules/, and bundling goes through without error when react-native run-ios is run.

Actual Behavior

From yarn outdated of my local package:

react-native-webview-bridge       0.33.0        exotic        exotic dependencies ../react-native-webview-bridge-RN0.40

With RN up to 0.48, my app's inclusion and import of react-native-webview-bridge like above works without issue. The package has no dependency itself of react.

Since upgrading to RN 0.49.3, this bundling error occurs on running react-native run-ios:

Unable to resolve module `react` from [package index]: Module does not exist in the module map

screenshot 2017-10-10 17 11 21

Then I added react as a dependency in package.json, like so:

  "devDependencies": {
    "react": "16.0.0-beta.5"
  },

Bundler will then error on Invariant violation: ... You may have multiple copies of React loaded.

screenshot 2017-10-10 17 21 23

screenshot 2017-10-10 17 21 37

A bit of a damned if I do, damned if I don't on getting react dependency in inside the package? Either none found, or there's 2 copies.

I made a hack fix as workaround around both errors, by replacing all instances inside the package of

var React = require('react');

with

var React = require('[HOMEDIR]/Documents/code/[PROJECT]/node_modules/react');

I hardcoded the react path to the exact copy of react my main app (PROJECT) imports, which avoids not able to resolve module react. I have to alter a sub module inside the package too: react-native-webview-bridge-RN0.40/node_modules/create-react-class/index.js which imports React, which makes this doubly hacky and prone to overwritten.

If there's a less dirty workaround, I'm all ears.


This is a repost of facebook/metro#74 as this involves React not being resolved and maybe a RN issue?

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions