Skip to content

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

Open
@ulivz

Description

@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)
  1. 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)
  1. 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!

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions