Vuepress: VuePress cannot coexist with Vue CLI generated app?

[bencodezen]

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

Bug report

Steps to reproduce

https://github.com/bencodezen/vuepress-coexist-error

1. Install dependencies via yarn
2. Run yarn docs to start VuePress instance
3. Open http://localhost:8080
4. See the following error in JavaScript Console

[Vue warn]: Failed to resolve async component: function Layout() {
    return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./node_modules/@vuepress/theme-default/layouts/Layout.vue */ "./node_modules/@vuepress/theme-default/layouts/Layout.vue"));
  }
Reason: TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620

How to See Success State

1. Change directory to /docs
2. Install dependencies via yarn
3. Run yarn docs to start VuePress instance
4. Open http://localhost:8080
5. Everything looks great!

What is expected?

User should be able to run VuePress in the same package.json file with an existing Vue CLI 3 app without any errors.

What is actually happening?

Seems like there is a conflict with how something is being called in webpack.

Other relevant information

• Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.15.1 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.10.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @vuepress/core:  1.0.3
    @vuepress/theme-default:  1.0.3
    vuepress: ^1.0.3 => 1.0.3
  npmGlobalPackages:
    vuepress: Not Found

[f3ltron]

related here too #1753

[bencodezen]

@ulivz Could use your insight on this?

@f3ltron and I took a look and we think it's coming from moduleLoader.ts. After doing some experimenting, it seems the conflict disappears when I delete @vue/cli-service, which means there is probably a conflict here with the shared utils.

[dflock]

This is a pretty big deal. I have an existing Vue project - which uses vue-cli, like a _lot_ of Vue projects. I currently can't add VuePress to it until this is fixed - it's currently completely broken and produces no output.

[f3ltron]

Thx dflock we are working on it but it's a tricky bug.

[f3ltron]

The problem is when we are using him locally with link it work. Because the conflict vue cli service is not the same. As the link, link just what he need and resolve automatically conflicts by choosing one by default so hard to reproduce.

edit 1:

Then the probleme is coming from the Layout.vue called in GlobaLayout.vue depending on how it's called / create

edit 2:

It's look it's coming from vue-template-compiler... I tried with a local link a vue-cli-service and delete one by one link inside vue-cli-service and when i delete vue-template-compiler it's working...

I am a bit done right now i will come back later on it.

I found in vue it is using core-js 3 i dont know if it's related i am a bit lost actually but it's look's like continue on vue-template-compiler

[novbing]

same as vue-cli 3.11.0 & vuepress 1.0.3 cause error #4539

[meteorlxy]

@f3ltron

Seems that it's caused by #1685.

If we can't find an easy way to fix this issue, consider reverting that PR for hotfix? As this is really a critical issue.

---

BTW, my workaround is to downgrade @vuepress/core to v1.0.2 (sad 😢 ):

  "dependencies": {
    "@vuepress/core": "1.0.2",
    "vuepress": "1.0.2",
  }

[LinusBorg]

PR #1771 should fix this.

The problem, which the PR addresses, is that

1. #1685 introduced new webpack config that made babel transpile all code from files under a @vuepress/* path. That includes dependencies that might be located at /node_modules/@vuepress/core/node_modules
2. In this specific case, since Vue CLI and Vuepress use different versions of core-js by default, npm puts core-js v3 as a nested dependency under /node_modules/@vuepress/core/node_modules/core-js. This dependecy is already transpiled ot ES5 and uses commonjs module syntax.
3. When Vuepress, according to the new webpack config, tries to transpile these files, it fails as it will interpret these files in strict mode, and in strict mode, commonjs modules lead to this error.

I believe that an adjustment of the babel config like the following could help working around the issue

// babel.config.js
module.exports {
  // ...existing config...
  overrides: [
    {
      test: /(@vuepress\/-core)\/node_modules\/core-js\//,
      sourceType: 'unambiguous'
     }
  ]
}

...which should tell babel that it's transpiling commonjs in that core-js folder and make it work.

However I can't test this right now. Either way this is just a band-aid and has to be solved properly in the webpack config.

[f3ltron]

I will try the solution you say @LinusBorg Thank's for all that stuff

[f3ltron]

Ok it work for me and your explanation is awesome i will regroup all issues related in the pr and will merge it

[f3ltron]

I am glad to say the new version of vuepress 1.0.4 fix the issue.

I am closing the issue for now if you have the error again re open the issue !

Thank's all for all your work !

[dflock]

Thanks everyone!