Vue-cli: --name must contain a hyphen when building a single web component.

Created on 1 Aug 2018  ·  2Comments  ·  Source: vuejs/vue-cli

IMPORTANT: Please use the following link to create a new issue:

https://new-issue.vuejs.org/?repo=vuejs/vue-cli

If your issue was not created using the app above, it will be closed immediately.

中文用户请注意:
请使用上面的链接来创建新的 issue。如果不是用上述工具创建的 issue 会被自动关闭。
build with component methods always come out this bug.
using vue-cli 3.0+
build with vue ui

Most helpful comment

In case someone stumbles on this, the error is received when Vue CLI assumes you're building a single file component, and thus requires you to hyphenate component name:

Bad

npx vue-cli-service build --target wc --name mycomponent './src/components/Button.vue'

Good

npx vue-cli-service build --target wc --name my-component './src/components/Button.vue'

Personally, I was receiving this error when I forgot to wrap my [entry] path in quotes (which was not that apparent when the command was in package.json scripts), when creating a bundle that registers multiple components. Which confused me, because I was sure I don't need to hyphenate the name in this case. But what probably happened was that vue-cli discared entry value as invalid and then just took first .vue file from components dir as entry, thus assuming it was supposed to be a single file component.

Error (notice missing quotes)

npx vue-cli-service build --target wc --name companyname ./src/components/*.vue

Success

npx vue-cli-service build --target wc --name companyname './src/components/*.vue'

All 2 comments

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!


你好,你的 issue 不符合我们所要求的格式,因此已被自动关闭。为了确保每个 issue 都提供必需的相关信息,请务必使用我们的 Issue 向导 来创建新 issue,谢谢!

In case someone stumbles on this, the error is received when Vue CLI assumes you're building a single file component, and thus requires you to hyphenate component name:

Bad

npx vue-cli-service build --target wc --name mycomponent './src/components/Button.vue'

Good

npx vue-cli-service build --target wc --name my-component './src/components/Button.vue'

Personally, I was receiving this error when I forgot to wrap my [entry] path in quotes (which was not that apparent when the command was in package.json scripts), when creating a bundle that registers multiple components. Which confused me, because I was sure I don't need to hyphenate the name in this case. But what probably happened was that vue-cli discared entry value as invalid and then just took first .vue file from components dir as entry, thus assuming it was supposed to be a single file component.

Error (notice missing quotes)

npx vue-cli-service build --target wc --name companyname ./src/components/*.vue

Success

npx vue-cli-service build --target wc --name companyname './src/components/*.vue'

Was this page helpful?
0 / 5 - 0 ratings