Build error when use module path to import a SFC from dependency.

[ulivz]

This issue was from #443, the fastest reproduction is:

1. Add following code at lib/app/app.js:

import CarbonAds from 'vuepress-theme-vue/CarbonAds.vue'
Vue.component('CarbonAds', CarbonAds)

2. yarn dev work properly, but run yarn build you'll get the error:

Rendering page: /Error rendering /:
/Users/haolchen/Documents/__self__/__forked__/vuepress/node_modules/vuepress-theme-vue/CarbonAds.vue:1
(function (exports, require, module, __filename, __dirname) { <script>
                                                              ^

SyntaxError: Unexpected token <
    at new Script (vm.js:51:7)
    at createScript (vm.js:138:10)
    at Object.runInThisContext (vm.js:199:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at r (/Users/haolchen/Documents/__self__/__forked__/vuepress/node_modules/vue-server-renderer/build.js:8335:16)
    at Object.vuepress-theme-vue/CarbonAds.vue (webpack:/external "vuepress-theme-vue/CarbonAds.vue":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object../lib/app/app.js (lib/app/app.js:5:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object../lib/app/serverEntry.js (lib/app/serverEntry.js:1:0)

3. then, modify the code in step1 to:

import CarbonAds from '../../node_modules/vuepress-theme-vue/CarbonAds.vue'
Vue.component('CarbonAds', CarbonAds)

All will work after this change.

That is to say, when we import a SFC from dependency, we must import it in absolute path or relative path instead of [moduleName]/rest-relative-path. or it will cause the build to be wrong:

the SFC will not be compiled by vue-loader first, but compiled by babel-loader directly.

I checked the vue-loader's code and doc, and also our webpack config, but still cannot get a clear answer and fix.

@yyx990803 Do you have any advice? thanks!

[mysticatea]

I have encountered this problem. Thanks to the workaround.

[meteorlxy]

If we remove .vue, i.e. import CarbonAds from 'vuepress-theme-vue/CarbonAds' the error stack shows:

Error: Cannot find module 'vuepress-theme-vue/CarbonAds'

which means the resolve.extensions fails as well?

[mattixittam]

I've also had this with plugins instead of SFC's.

I solved it using the workaround. The interesting thing was that it borked on one plugin, while it did not on the other. This enhanceApp.js works, in other words:

import DomPortal from 'vue-dom-portal'
import VueStatic from '../../node_modules/vue-static'

export default ({
  Vue, // the version of Vue being used in the VuePress app
  options, // the options for the root Vue instance
  router, // the router instance for the app
  siteData // site metadata
}) => {
  Vue.use(DomPortal)
  Vue.use(VueStatic)
}

When I try to import VueStatic normally, this is the stack trace:

Rendering page: / FAIL  Error rendering /:
/workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-static/index.js:24
export default install;
^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at r (/workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-server-renderer/build.js:8346:16)
    at Object.<anonymous> (webpack:/external "vue-static":1:0)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (server-bundle.js:6582:28)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.<anonymous> (server-bundle.js:2844:18)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at server-bundle.js:118:18
    at Object.<anonymous> (server-bundle.js:121:10)
    at evaluateModule (/workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-server-renderer/build.js:8349:21)
    at /workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-server-renderer/build.js:8407:18
    at new Promise (<anonymous>)
    at /workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-server-renderer/build.js:8399:14
    at Object.renderToString (/workspace/workspace/VueFighters/crv-styleguide/node_modules/vue-server-renderer/build.js:8575:9)
    at renderPage (/workspace/workspace/VueFighters/crv-styleguide/node_modules/vuepress/lib/build.js:161:29)
    at build (/workspace/workspace/VueFighters/crv-styleguide/node_modules/vuepress/lib/build.js:71:11)
    at <anonymous>

[alidrus]

I am trying to figure this out. From what I do understand, this would work for importing a Vue plugin to use in your custom vuepress component. Is there a way of doing this in a way that would allow you to use another (non-vue) js library (e.g. axios) within your custom component?

[gluons]

Come from #1414.

Does anyone know the cause of problem now?
The relative path workaround is working but it's uncomfortable.

[egoist]

#1539 😅

Quick fix for you:

// .vuepress/config.js
module.exports = {
  chainWebpack(config) {
    config.externals([/^(vue|vue-router)$/])
  }
}