Error: Cannot find module "react-native" / Module not found: Error: Cannot resolve module 'react-native-web'

Michael Campsall picture Michael Campsall · Jun 25, 2016 · Viewed 9.5k times · Source

Alright, I am desperately trying to install a branch of react-native-web that has a functioning ListView component. This branch, specifically.

I installed it into the project directory like so: npm install --save [email protected] [email protected] https://github.com/IjzerenHein/react-native-web/tarball/feaure-listview2

Installing directly from react-native-web doesn't seem to have this issue.

this is what index.web.js looks like:

import React from 'react'

import {
AppRegistry,
Component,
...
} from 'react-native';

class App extends Component {
...
}

// App registration and rendering
AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag:     document.getElementById('react-root') });

Here is what the console tells me (part of it, way too much text in there!):

[Error] ./index.web.js
Module not found: Error: Cannot resolve module 'react-native-web' in /Users/michael/Code/spectrum-react-native
resolve module react-native-web in /Users/michael/Code/spectrum-react-native
  looking for modules in /Users/michael/Code/spectrum-react-native/node_modules
  resolve 'file' react-native-web in /Users/michael/Code/spectrum-react-native/node_modules
  resolve file
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web is not a file
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.webpack.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.web.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.json doesn't exist
resolve 'file' or 'directory' /Users/michael/Code/spectrum-react-native/node_modules/react-native-web
  resolve file
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web is not a file
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.webpack.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.web.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.js doesn't exist
    /Users/michael/Code/spectrum-react-native/node_modules/react-native-web.json doesn't exist
  resolve directory
    directory default file index
      resolve file index in /Users/michael/Code/spectrum-react-native/node_modules/react-native-web
        /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/index doesn't exist
        /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/index.webpack.js doesn't exist
        /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/index.web.js doesn't exist
        /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/index.js doesn't exist
        /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/index.json doesn't exist
    use dist/index.js from package.json
      resolve 'file' or 'directory' dist/index.js in /Users/michael/Code/spectrum-react-native/node_modules/react-native-web
        resolve file
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js doesn't exist
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js.webpack.js doesn't exist
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js.web.js doesn't exist
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js.js doesn't exist
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js.json doesn't exist
        resolve directory
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js doesn't exist (directory default file)
          /Users/michael/Code/spectrum-react-native/node_modules/react-native-web/dist/index.js/package.json doesn't exist (directory description file)
  ...

 @ ./index.web.js 9:19-42
errors (bundle.js:7934)
onmessage (bundle.js:7969)
dispatchEvent (bundle.js:2874)
(anonymous function) (bundle.js:4908)
forEach
_transportMessage (bundle.js:4906)
(anonymous function)
emit (bundle.js:847)
onmessage (bundle.js:6261)

Answer

Daniel Schmidt picture Daniel Schmidt · Jun 27, 2016

The problem is, that they have a build process. That way there are files used / expected that are ignored in git, but within the npm export.

The easiest way to overcome this is to clone the repository, check out the given branch, run the build and depending on if you have a large team either use npm link to link the local repository or remove dist/ from the .gitignore and push the build files to the branch.