Bug report
First I want to thank you all for the great job you do, and apologize in advance if my issue form is lacking anything. Its the first time I ever fill an issue on an OSS repository so I kinda have no clue what I'm doing but I did my best to fill everything up correctly.
Description
When creating a Vue 3 application with the latest version of the Vue CLI, and adding vuepress@next
to the project, the vue components outputed by vuepress are generated from Markdown properly, but can't be compiled by webpack and served.
Steps to reproduce
Install the latest version of the Vue CLI (4.5.11 on my machine)
Create a new vue 3 project
Add vuepress to the project according to this documentation (starting at step 3 since we already have a vue project)
Serve the vuepress documentation
You can find a reproduction here, this is a quick example and I used a custom Vue CLI preset I use all the time. (Basically Vue 3 with TypeScript and test)
Expected behavior
The Vue components generated by vuepress should compile successfuly and be available on the development server.
Console output
Output of yarn docs:dev
:
$ vuepress dev docs
info Initializing VuePress and preparing data...
√ Compilation finished in 574ms
ERROR in ./node_modules/@vuepress/client/lib/components/OutboundLink.js 2:0-28
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version'
ERROR in ./node_modules/@vuepress/plugin-medium-zoom/lib/clientAppEnhance.js 3:0-35
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version'
ERROR in ./node_modules/@vuepress/plugin-nprogress/lib/clientAppSetup.js 4:0-33
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version'
ERROR in ./node_modules/@vuepress/theme-default/lib/clientAppEnhance.js 5:0-29
Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version'
ERROR in ./docs/.vuepress/.temp/pages/readme.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./docs/.vuepress/.temp/pages/readme.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./docs/.vuepress/.temp/pages/404.html.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./docs/.vuepress/.temp/pages/404.html.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/plugin-back-to-top/lib/components/BackToTop.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/plugin-back-to-top/lib/components/BackToTop.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/Badge.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/Badge.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/CodeGroup.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/CodeGroup.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/CodeGroupItem.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/CodeGroupItem.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/OutboundLink.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/components/global/OutboundLink.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/layouts/Layout.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/layouts/Layout.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
ERROR in ./node_modules/@vuepress/theme-default/lib/layouts/404.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
ERROR in ./node_modules/@vuepress/theme-default/lib/layouts/404.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports (C:\Users\pierr\Documents\Code\kerunix\Bug Repros\test-version\node_modules\vue-loader\lib\index.js:67:22)
webpack compiled with 22 errors
success VuePress webpack dev server is listening at http://localhost:8081/
What I tried
I tried to fix the above errors by installing the dependencies that were required with
yarn add -D style-loader
yarn add -D vue-template-compiler
I also believes the issue was related to a conflicting version of vue-loader so I installed version 16.1.2 in my project without any success.
Both solutions changed the error messages outputed in the console but I did not include them in the provided reproduction because I figured maybe you wanted to tinker with it.
Environment info
- Browser: Not relevant here
- Output of
vuepress info
:
System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Memory: 3.68 GB / 15.96 GB
Binaries:
Node: 12.18.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Utilities:
Git: 2.16.2. - /mingw64/bin/git
Browsers:
Chrome: 88.0.4324.182
Edge: Spartan (44.19041.423.0), Chromium (88.0.705.68)
npmPackages:
@vuepress/bundler-webpack: 2.0.0-alpha.24
@vuepress/cli: 2.0.0-alpha.24
@vuepress/client: 2.0.0-alpha.24
@vuepress/core: 2.0.0-alpha.24
@vuepress/markdown: 2.0.0-alpha.24
@vuepress/plugin-active-header-links: 2.0.0-alpha.24
@vuepress/plugin-back-to-top: 2.0.0-alpha.24
@vuepress/plugin-container: 2.0.0-alpha.24
@vuepress/plugin-debug: Not Found
@vuepress/plugin-docsearch: Not Found
@vuepress/plugin-git: 2.0.0-alpha.24
@vuepress/plugin-google-analytics: Not Found
@vuepress/plugin-medium-zoom: 2.0.0-alpha.24
@vuepress/plugin-nprogress: 2.0.0-alpha.24
@vuepress/plugin-palette-stylus: 2.0.0-alpha.24
@vuepress/plugin-pwa: Not Found
@vuepress/plugin-pwa-popup: Not Found
@vuepress/shared: 2.0.0-alpha.24
@vuepress/theme-default: 2.0.0-alpha.24
@vuepress/theme-vue: Not Found
@vuepress/utils: 2.0.0-alpha.24
vue: ^3.0.0 => 3.0.5
vue-loader: 15.9.6 (16.1.2)
vue-router: 4.0.4
vuepress: ^2.0.0-alpha.24 => 2.0.0-alpha.24