How to fix Uncaught Error Cannot find module react

Issue #145

This is my story through dealing with many dependencies when trying to package an electron app. Thanks to my friend https://github.com/timkurvers for helping me out ❤️ This is like a note for my future self

Fixing event

The other I got an issue https://github.com/onmyway133/PushNotifications/issues/3 that reports there’s something wrong with production environment. The problem is that I used RadioButton and its onChange callback takes 2 parameters instead of 1.

Trying packaging

After the fix, I bump version in package.json and run yarn release. To my surprise, the built app was just blank. I tried win.toggleDevTools() to see what’s going on. I can’t use shortcut to open the dev tool any more in production, but there are tools https://github.com/sindresorhus/electron-debug.

The console says that it can’t find the module ‘react’. I then submitted an issue https://github.com/electron-userland/electron-packager/issues/787

Uncaught Error: Cannot find module ‘react’

My environment

  • Node v8.4.0
  • npm 5.3.0
  • yarn 1.3.2
  • macOS 10.13.2

Inspecting with debug mode

I then need to run in debug mode to see what’s really happening

text
DEBUG=electron-packager npm run release

The log says something about npm

Command failed: npm prune –production

Digging a little, I found that this is quite a common issue

I think the issue may be because of I changed from https://github.com/creationix/nvm to https://github.com/nodenv/nodenv

Updating nodenv

The latest stable version of https://nodejs.org/en/ is 8.9.4. To enable nodenv to see it, we need

text
brew upgrade node-build

Run the following so that you actually see the 8.9.4

text
nodenv install --list

Updating node.js

Install version 8.9.4

text
nodenv install 8.9.4
nodenv global 8.9.4
nodenv rehash

Updating npm

Run the following to update npm to 5.6.0

text
npm update -g np

Installing dependencies from scratch

Clear old node_modules and package-lock.json

text
rm -rf node_modules
rm -rf package-lock.json

Then install again

text
npm install

Packaging

The final step is to package the app again

text
yarn release
Written by

I’m open source contributor, writer, speaker and product maker.

Start the conversation