Cannot find module 'core-js/library/xxx' when import element-ui

[showmethecode9527]

• [ ] I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

# Vue CLI v4.2.3
$ vue create vuepress-test # use preset 'default' or 'Manually select features'
$ cd vuepress-test
$ npm i -S element-ui
$ npm i -D vuepress

Then create docs/README.md, docs/.vuepress/enhanceApp.js

// docs/.vuepress/enhanceApp.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
  Vue
}) => {
  Vue.use(ElementUI)
}

Then run vuepress dev docs and open the browser's console

What is expected?

build success

What is actually happening?

build error

Other relevant information

• Output of npx vuepress info in my VuePress project:

  System:
  OS: Windows 10 10.0.18362
  CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
  Binaries:
  Node: 12.16.0 - D:\nvm_nodejs\node.EXE
  Yarn: Not Found
  npm: 6.13.4 - D:\nvm_nodejs\npm.CMD
  Browsers:
  Edge: 44.18362.449.0
  npmPackages:
  @vuepress/core: Not Found
  @vuepress/theme-default: Not Found
  vuepress: ^1.4.0 => 1.4.0
  npmGlobalPackages:
  vuepress: Not Found

[haoranpb]

Hi @showmethecode9527 , thanks for the report.

npm i core-js@2 seems to solve the issue, but I'm not sure if it will break other things

[showmethecode9527]

Hi @showmethecode9527 , thanks for the report.

npm i core-js@2 seems to solve the issue, but I'm not sure if it will break other things

I changed 3.x to 2.x and it works well, but in an other project, failed to compile:

These dependencies were not found:

* core-js/modules/web.dom-collections.for-each in ./packages/index.js
......

[1ncounter]

i meet the same problem with you! Are you resolve it?

[showmethecode9527]

i meet the same problem with you! Are you resolve it?

Use core-js 2.x can resolve it, but my web project needs core-js 3.x, so I'm using core-js 2.x to run docs and core-js 3.x to run my web app.

[boughia]

This seems to be caused by vuepress's webpack configuration. element-ui requires async-validator 1.x which requires babel-runtime 6.x which requires core-js 2.x, while vuepress depends on core-js 3.x. I installed element-ui after vuepress and my node_modules folder looks like this:

node_modules ----core-js 3.x ----babel-runtime 6.x --------node_modules ------------core-js 2.x

In file packages/@vuepress/core/lib/node/webpack/createBaseConfig.js, webpack's resolve.modules setting is changed: Line 52: const modulePaths = getModulePaths() Line 69: config.resolve.merge(modulePaths) Line 332-334:

function getModulePaths () {
  return module.paths.concat([path.resolve(process.cwd(), 'node_modules')])
}

I found that the new value does not contain babel-runtime 6.x 's local node_module folder, so module resolution of core-js 2.x would fail for babel-runtime.

I tried changing line 333 to return module.paths.concat([path.resolve(process.cwd(), 'node_modules'), 'node_modules']) and it worked for me.

[OvedayBySnow]

Is there any better way to solve this for me? It seems that I have conflicts with ant-design-vue, but sometimes I don't want to separate them into projects

[superxiaobin]

npm install core-js@2.x

succ

[showmethecode9527]

npm install core-js@2.x

succ

sometimes it works well, but not all the time.

[superxiaobin]

npm install core-js@2.x succ

sometimes it works well, but not all the time.

when you install core-js@2.x, you must restart npm run dev.

[Nayacco]

Execute this command yarn add async-validator@1.11.5 solved the problem

[andyhuai]

yarn add async-validator@1.11.5

Yes, it works!!!!!

[hql7]

执行此命令解决了问题yarn add async-validator@1.11.5

cool

[xgqfrms]

shit official docs 💩

https://vuepress.vuejs.org/guide/directory-structure.html

https://github.com/vuejs/vuepress/pull/2764

https://github.com/vuejs/vuepress/issues/2763

solution 1

add the async-validator npm package

$ yarn add async-validato@1.11.5

#  OR 
$ npm i async-validato@1.11.5

{

  "devDependencies": {
    "vuepress": "1.5.3"
  },
  "dependencies": {
+  "async-validator": "1.11.5",
    "element-ui": "2.14.1"
  }

}

solution 2

⚠️ do not lock npm version

{

  "devDependencies": {
-   "vuepress": "1.5.3"
+  "vuepress": "^1.5.3"
  },
  "dependencies": {
-  "element-ui": "2.14.1"
+  "element-ui": "^2.14.1"
  }

}

[KunerRick]

This seems to be caused by vuepress's webpack configuration. element-ui requires async-validator 1.x which requires babel-runtime 6.x which requires core-js 2.x, while vuepress depends on core-js 3.x. I installed element-ui after vuepress and my node_modules folder looks like this:

node_modules ----core-js 3.x ----babel-runtime 6.x --------node_modules ------------core-js 2.x

In file packages/@vuepress/core/lib/node/webpack/createBaseConfig.js, webpack's resolve.modules setting is changed: Line 52: const modulePaths = getModulePaths() Line 69: config.resolve.merge(modulePaths) Line 332-334:

function getModulePaths () {
  return module.paths.concat([path.resolve(process.cwd(), 'node_modules')])
}

I found that the new value does not contain babel-runtime 6.x 's local node_module folder, so module resolution of core-js 2.x would fail for babel-runtime.

I tried changing line 333 to return module.paths.concat([path.resolve(process.cwd(), 'node_modules'), 'node_modules']) and it worked for me.

I put this in config.js

module.exports = {
  chainWebpack(config, isServer) {
    if (!isServer) {
       config.resolve.modules.merge(["node_modules"]);
    }
    return config;
  },
  }

Thanks a lot.