VuePress cannot coexist with Vue CLI generated app?

• 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

[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.

[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.