"Cannot find module" issue (React-Native)

[zxm04]

Worked fine with 3.x.x, but recently switched to 4.x.x, I got a lot of "Cannot find module" error.

Here is my step to reproduce this issue:

1.checkout metamask repository
git clone https://github.com/MetaMask/metamask-extension.git
2. cd metamask-extension
nvm use
npm install
npm install [email protected]
3. adding usage of ethers, for eg, add a line in "ui/index.js"
const ethers = require('ethers')
4. This works fine
npm start
5. Install new version
npm install [email protected]
6. And this fails
npm start
I got a lot of message like:
Error: Cannot find module './utils/bignumber' from '/Users/xx/workspace/js/metamask-extension/node_modules/ethers/dist' at /Users/xx/workspace/js/metamask-extension/node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21 at load (/Users/xx/workspace/js/metamask-extension/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43) at onex (/Users/xx/workspace/js/metamask-extension/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31) at /Users/xx/workspace/js/metamask-extension/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47 at FSReqWrap.oncomplete (fs.js:152:21)

I guess it starts from this commit, where many path is changed:
f4dd5d1

[ricmoo]

I will look into this once I get to a coffee shop today. That seems odd, to say the least. :s

[ricmoo]

Oh! So, I've been trying to get the plugin to build for the last little bit (seems there re some dependencies not included in the package.json).

Is this a react app?

React seems to hijack the name require, internally, somehow. I'm still trying to figure out a longer term solutions to this, but check out issue #268

Basically, can you try const ethers = require("ethers/dist/ethers.min.js"); and see if that helps? The reason that seems to co-operate with React better is that the name require has been mangled, so whatever magic react is doing does not interfere with Browserify.

[zxm04]

Yes it is a react app, and it helped with your require("ethers/dis/ethers.min.js") solution!
Glad to have a workaround, thanks for the help.

However, in my case, I am not using ethers directly, but some dependent lib are using it, it would be tricky for me to manipulate the dependency.

[ricmoo]

The new version points to the minified version directly, so it should work out of the box. You may have to pull in the React-Native shims though:

// Import the required shims
import 'ethers/dist/shims.js';

// Import the ethers library
import { ethers } from 'ethers';

Notes: https://docs.ethers.io/ethers.js/html/cookbook-react.html

[zxm04]

thanks for the fix!