A Rollover Scene Caused By `node_modules`

使用微前端改造项目时，不知道作了什么骚操作导致项目在编译阶段失败，导致启动不了。相同系统，相同机器，相同环境下只有我的电脑跑不起来！重装项目，重装环境，重装系统，前后折腾了许久找到了问题所在，作于释怀！

当然这必定不是什么偶然事件，一定是什么巧合所造成的必然结果！🤔

---

背景#

yarn start 报错信息如下：

lerna notice cli v3.22.1
lerna info Executing command in 4 packages: "yarn run dev"
lerna ERR! yarn run dev exited 1 in 'home-app'
lerna ERR! yarn run dev stdout:
$ react-app-rewired start
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run dev stderr:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-eslint": "10.1.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

  E:\node_modules\babel-eslint (version: 10.0.3)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if E:\node_modules\babel-eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.

lerna ERR! yarn run dev exited 1 in 'home-app'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

我丢！初/粗看不明所以，一顿操作猛如虎，按着 1. 2. 3. 的步骤走，当然结局从一开始就已经注定了！别问！问就是你品！你细细品！[1]

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
6. Check if E:\node_modules\babel-eslint is outside your project directory.
7. Try running npm ls babel-eslint in your project folder.

解决#

也许你也年少轻狂的我一样，不服输！那就干吧！

第一条，相信这个大家都不陌生，当项目的依赖下载不下来时，耳边总会有那么一个人会嚷嚷到“删除yarn.lock和package-lock.json试下”。当然这个万金油这次确实不好使了！

恩，第二条和第一条雷同，rm -rf node_modules  and yarn 也许是敲打次数的最多的对象了。

第三条，提到babel-eslint依赖冲突，从dependencies移入到devDependencies中也许能解决。

第四条，yarn add babel-eslint or npm install babel-eslint 可能有效。

第五条，yarn不行就试试npm，npm不行就试试yarn。

第六条，👿（你抓住它了吗?)。

第七条，npm ls xxx 然后呢!

当然上述方法，当时都一一试过，均没成功！其实第六条已经明确了问题的所在！只是后来没有复现出一模一样的信息，但也能说明问题。

之前换了系统后，注意到了文末:

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

添加.env,居然奏效了！🤔

SKIP_PREFLIGHT_CHECK = true;

细心的你也许早就发现了端倪：

lerna notice cli v3.22.1
lerna info Executing command in 4 packages: "yarn run dev"
lerna ERR! yarn run dev exited 1 in 'home-app'
lerna ERR! yarn run dev stdout:
$ react-app-rewired start
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run dev stderr:

There might be a problem with the project dependency tree.

没错问题就出在**dependency tree**这里[1]:之前无意中拷贝了一份node_modules到项目的上一级文件夹,一段时间后某个包更新导致当前项目的依赖和上级文件中包的版本冲突。

显然删除yarn.lock和package-lock.json;rm -rf node_modules  and yarn; yarn add xxx; 切换yarn和npm都不能解决包的版本冲突问题!

---

那么

• 🤔 dependency tree 和 node_modules 是什么关系？
• 🤔 dependency tree的查找顺序是怎样的？
• 🤔 npm包的管理机制，不同版本是否有区别？
• 🤔 yarn 为什么出现和 npm 有何区别？
• 🤔 以及 deno 中的包管理和 node 中的包管理有何不同？

扩展#