Open ulivz opened 6 years ago
I have encountered this problem. Thanks to the workaround.
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?
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>
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?
Come from #1414.
Does anyone know the cause of problem now?
The relative path workaround is working but it's uncomfortable.
https://github.com/vuejs/vuepress/pull/1539 😅
Quick fix for you:
// .vuepress/config.js
module.exports = {
chainWebpack(config) {
config.externals([/^(vue|vue-router)$/])
}
}
This issue was from #443, the fastest reproduction is:
lib/app/app.js
:yarn dev
work properly, but runyarn build
you'll get the error:All will work after this change.
That is to say, when we import a SFC from dependency, we must import it in
absolute path
orrelative path
instead of[moduleName]/rest-relative-path
. or it will cause the build to be wrong: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!