Can't run yarn start on Mac OS X: Module not found: Error: Can't resolve fs

[byforcesunseen]

Description of Issue

Can't run latest MyCrypto source locally on Mac OS X due to missing fs dependency:

$ yarn start

yarn run v1.22.19
$  yarn run dev
...

ERROR  Failed to compile with 1 errors

This dependency was not found:

* fs in ./node_modules/dotenv/lib/main.js

To install it, you can run: npm install --save fs

What exactly were you doing when you encountered this issue?

1. Clone repo

   $ git clone https://github.com/MyCryptoHQ/MyCrypto.git
   $ git rev-parse HEAD
   
   457ec2f0a1cce537275c3b67d7e871f1ae3ae162

2. Run yarn, no errors occur:

   $ yarn
   
   yarn install v1.22.19
   [1/5] 🔍  Validating package.json...
   [2/5] 🔍  Resolving packages...
   warning Resolution field "@emotion/[email protected]" is incompatible with requested version "@emotion/[email protected]"
   warning Resolution field "@emotion/[email protected]" is incompatible with requested version "@emotion/[email protected]"
   [3/5] 🚚  Fetching packages...
   [4/5] 🔗  Linking dependencies...
   warning " > @mycrypto/[email protected]" has incorrect peer dependency "react@^16.8.0".
   warning " > @mycrypto/[email protected]" has incorrect peer dependency "react-dom@^16.8.0".
   warning "@mycrypto/ui > [email protected]" has incorrect peer dependency "react@^16.6.0".
   warning "@mycrypto/ui > [email protected]" has incorrect peer dependency "react-dom@^16.6.0".
   warning "@mycrypto/ui > react-popper-tooltip > react-popper > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
   warning " > [email protected]" has incorrect peer dependency "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0".
   warning " > [email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
   warning " > [email protected]" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0".
   warning "recharts > [email protected]" has incorrect peer dependency "react@^0.14.7 || ^15.0.0 || ^16.0.0".
   warning "recharts > [email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
   warning "recharts > [email protected]" has incorrect peer dependency "react-dom@^15.0.0 || ^16.0.0".
   warning " > [email protected]" has incorrect peer dependency "react@^16.8.4".
   warning " > [email protected]" has incorrect peer dependency "react-dom@^16.8.4".
   warning "toasted-notes > @reach/[email protected]" has incorrect peer dependency "react@^16.8.0".
   warning "toasted-notes > @reach/[email protected]" has incorrect peer dependency "react-dom@^16.8.0".
   warning "toasted-notes > @reach/alert > @reach/[email protected]" has unmet peer dependency "prop-types@^15.6.2".
   warning "toasted-notes > @reach/alert > @reach/[email protected]" has incorrect peer dependency "react@^16.4.0".
   warning "toasted-notes > @reach/alert > @reach/[email protected]" has incorrect peer dependency "react-dom@^16.4.0".
   warning "toasted-notes > @reach/alert > @reach/[email protected]" has incorrect peer dependency "react@^16.8.0".
   warning "toasted-notes > @reach/alert > @reach/[email protected]" has incorrect peer dependency "react-dom@^16.8.0".
   warning " > @nomiclabs/[email protected]" has unmet peer dependency "ethers@^5.0.0".
   warning " > @phenomnomnominal/[email protected]" has incorrect peer dependency "typescript@^3".
   warning " > @pmmmwh/[email protected]" has incorrect peer dependency "react-refresh@>=0.8.3 <0.10.0".
   warning "@storybook/addon-actions > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
   warning "@storybook/addon-actions > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
   warning " > @storybook/[email protected]" has unmet peer dependency "svelte@*".
   warning " > @storybook/[email protected]" has unmet peer dependency "vue-jest@*".
   warning "@storybook/addon-storyshots > [email protected]" has incorrect peer dependency "[email protected]".
   warning " > [email protected]" has incorrect peer dependency "react@^16.8.0".
   warning "react-inlinesvg > [email protected]" has incorrect peer dependency "react@^15.0.0 || ^16.0.0".
   [5/5] 🔨  Building fresh packages...
   Done in 110.08s.

3. Run yarn start, receive Module not found error:

   yarn start
   
   yarn run v1.22.19
   $  yarn run dev
   $ check-node-version --package
   $ cross-env NODE_ENV=development TARGET_ENV=local webpack-dev-server --config webpack_config/development.js
   Failed to load ./.env.example.
   Starting type checking service...
   Using 1 worker with 2048MB memory limit
   ℹ ｢wds｣: Generating SSL Certificate
   ℹ ｢wds｣: Project is running at https://localhost:3000/
   ℹ ｢wds｣: webpack output is served from /
   ℹ ｢wds｣: Content not from webpack is served from /Volumes/My HD/Users/some-user/Documents/MyCrypto
   ℹ ｢wds｣: 404s will fallback to /index.html
   Browserslist: caniuse-lite is outdated. Please run:
   npx browserslist@latest --update-db
   
   Why you should do it regularly:
   https://github.com/browserslist/browserslist#browsers-data-updating
   Type checking in progress...
    ERROR  Failed to compile with 1 errors                                                                                                                                                             10:16:42 PM
   
   This dependency was not found:
   
   * fs in ./node_modules/dotenv/lib/main.js
   
   To install it, you can run: npm install --save fs
   Webpack Bundle Analyzer is started at http://127.0.0.1:8888
   Use Ctrl+C to close it
   ✖ ｢wdm｣:
   ERROR in ./node_modules/dotenv/lib/main.js
   Module not found: Error: Can't resolve 'fs' in '/Volumes/My HD/Users/some-user/Documents/MyCrypto/node_modules/dotenv/lib'
    @ ./node_modules/dotenv/lib/main.js 24:11-24
    @ ./node_modules/gridplus-sdk/dist/index.js
    @ ./node_modules/@mycrypto/wallets/lib/es/implementations/deterministic/gridplus.js
    @ ./node_modules/@mycrypto/wallets/lib/es/implementations/deterministic/index.js
    @ ./node_modules/@mycrypto/wallets/lib/es/implementations/index.js
    @ ./node_modules/@mycrypto/wallets/lib/es/index.js
    @ ./src/services/Store/store/persist.config.ts
    @ ./src/services/Store/store/root.reducer.ts
    @ ./src/services/Store/store/asset.slice.ts
    @ ./src/services/Store/store/account.slice.ts
    @ ./src/services/Store/store/nft.slice.ts
    @ ./src/services/Store/store/index.ts
    @ ./src/index.tsx
    @ multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js ./src/index.tsx
   ℹ ｢wdm｣: Failed to compile.
   No type errors found
   Version: typescript 4.1.2
   Time: 81352ms

4. Try to access http://localhost:3000, receive error:

   

Description of Your Machine

• Browser: Chrome 103.0.5060.134
• Operating system: Mac OS Catalina 10.15.7
• MyCrypto.com: Running from source
• MyCrypto Version Number: 457ec2f0a1cce537275c3b67d7e871f1ae3ae162
• Node version: 12.14.1

[byforcesunseen]

Looks like this issue is caused by the same problem reported here: motdotla/dotenv#692.

I was able to fix it by appending the following JSON block to the end of MyCrypto/node_modules/dotenv/package.json:

--- node_modules/dotenv/package.json	2022-11-17 00:56:23.000000000 +1100
+++ node_modules/dotenv/package.json	2022-11-16 22:17:08.000000000 +1100
@@ -47,5 +47,9 @@
     "ignore": [
       "flow-typed/"
     ]
+  },
+  "browser": {
+    "fs": false,
+    "os": false
   }
 }