[Dev] Module not found: Error: You attempted to import .../neuron/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory

[twhy]

Description

Running Neuron Wallet in dev mode with yarn start results in Module not found Error

Environment

OS: Mac OS 14.4.1
Yarn: 1.22.21
Node: v20.11.1

Reproduce Steps

1. Git clone repo
2. Follow README.md to install all dependencies
3. Run yarn start

Terminal logs

yarn start
yarn run v1.22.21
$ concurrently "cross-env BROWSER=none yarn run start:ui" "wait-on -t 10000 http://127.0.0.1:3000 && yarn run start:wallet"
$ cd packages/neuron-ui && yarn run start
$ cross-env DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-app-rewired start
[0] Browserslist: caniuse-lite is outdated. Please run:
[0]   npx update-browserslist-db@latest
[0]   Why you should do it regularly: https://github.com/browserslist/update-db#readme
[0] (node:99432) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:99432) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] Starting the development server...
[0] 
[0] [BABEL] Note: The code generator has deoptimised the styling of /Users/twhy/Code/nervos/neuron/packages/neuron-ui/src/widgets/Icons/VerificationFailure.svg as it exceeds the max of 500KB.
[0] [BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
[0] Failed to compile.
[0] 
[0] Module not found: Error: You attempted to import /Users/twhy/Code/nervos/neuron/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
[0] You can either move it inside src/, or add a symlink to it from project's node_modules/.
[0] ERROR in ./src/components/AddressBook/index.tsx 1:40-119
[0] Module not found: Error: You attempted to import /Users/twhy/Code/nervos/neuron/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
[0] You can either move it inside src/, or add a symlink to it from project's node_modules/.
...
[0] ERROR in ./src/widgets/Tooltip/index.tsx 1:40-119
[0] Module not found: Error: You attempted to import /Users/twhy/Code/nervos/neuron/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
[0] You can either move it inside src/, or add a symlink to it from project's node_modules/.
[0] 
[0] webpack compiled with 243 errors

Screenshot

Diagnosis

react-refresh in root node_modules has version 0.14.0.

npm list react-refresh result

$ npm list react-refresh
neuron@0.114.2 /Users/twhy/Code/nervos/neuron
└─┬ neuron-ui@0.114.2 -> ./packages/neuron-ui
  ├─┬ @storybook/preset-create-react-app@7.6.6
  │ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.10
  │   └── react-refresh@0.14.0
  ├─┬ @storybook/react-webpack5@7.6.6
  │ └─┬ @storybook/preset-react-webpack@7.6.6
  │   ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.11
  │   │ └── react-refresh@0.14.0 deduped
  │   └── react-refresh@0.14.0 deduped
  └─┬ react-scripts@5.0.1
    └── react-refresh@0.11.0

Possible Fix

1. Add "react-refresh": "0.11.0" to devDependencies in neuron/packages/neuron-ui/package.json.
2. Run yarn to install dependencies.
3. Run yarn start and it works!

Notice: In this case, react-refresh in root node_modules has version 0.11.0 instead of 0.14.0.

Update: Adding react-refresh@0.14.0 to resolutions in root package.json is better.