react-native-web compatibility broke in 9.8.6

Bug

Apologies if this turns out to be just me using it wrong, my project setup grew quite complicated over time…

I’m using react-native-svg in a project with react-native and react-native-web. When upgrading from 9.8.5 to 9.8.6 (or later) the web build starts breaking with the following error:

./node_modules/react-native-svg/lib/module/elements/Image.js
Attempted import error: 'requireNativeComponent' is not exported from 'react-native'.

It seems to me like the web compatibility layer is not used anymore, since it should not be loading that file for web at all. I tried looking at the diff for these versions but it’s quite large and all I can tell ist that the relevant files index.js and index.web.js were moved and renamed to .ts. I have WebpackResolve extensions set up like this: '.web.tsx', '.web.ts', '.web.js', '.ts','.tsx', '.js', which should still cover the changed extension from my point of view.

Environment info

React native info output:

info Fetching system and libraries information...
System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 7.54 GB / 23.89 GB
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    Android Studio: Version  3.2.0.0 AI-181.5540.7.32.5056338

Library version: 9.8.6, also applies for 9.9.3

Versions of other packages:

react@16.8.6
react-native@0.60.5
react-native-web@0.11.7

Steps To Reproduce

Sorry I can’t provide more detailed steps right now. If you can point me to the currently recommended way of setting up a project that builds for native and web from the same codebase I can attempt to reproduce the issue with a fresh project.

Any hints towards what might be the problem for me are highly appreciated.

[adrian1388]

Sorry @OKNoah , my bad. Just this:

(Project Root)/config-overrides.js

module.exports = function override(config, env) {
  config.resolve.alias["react-native-svg"] = "react-native-svg-web";
  return config;
};

[OKNoah]

I fixed it changing from react-scripts to react-app-rewired and doing some changes in config-overrides.js

Share the changes.