Vue-cli: The lib target build produces a demo.html which is flawed

Created on 12 Jan 2019 · 14Comments · Source: vuejs/vue-cli

Version

3.3.0

Reproduction link

Environment info

Environment Info:

  System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 11.2.0 - ~/.nvm/versions/node/v11.2.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v11.2.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: Not Found
    Safari: 12.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.3.0 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.3.0 
    @vue/cli-plugin-babel: ^3.3.0 => 3.3.0 
    @vue/cli-plugin-eslint: ^3.3.0 => 3.3.0 
    @vue/cli-service: ^3.3.0 => 3.3.0 
    @vue/cli-shared-utils:  3.3.0 
    @vue/component-compiler-utils:  2.5.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  4.0.1 
    eslint-plugin-vue: ^5.0.0 => 5.1.0 
    vue: ^2.5.21 => 2.5.22 
    vue-eslint-parser:  4.0.3 
    vue-hot-reload-api:  2.3.1 
    vue-loader:  15.5.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.5.22 
    vue-template-es2015-compiler:  1.8.1 
  npmGlobalPackages:
    @vue/cli: 3.3.0

Steps to reproduce

Create a new project using Vue CLI, no need for router/vuex.
Change to a library project
2.1. Change build to target lib with a hyphenated library name e.g.
"build": "vue-cli-service build --target lib --name test-lib ./src/main.js",
2.2. Add a suitable index file as an entry point to the component library.
build

What is expected?

dist/demo.html should be a valid sample web page. Ideally, this would be controllable by the developer to allow them to construct a valid template. Perhaps through use of public/index.html or a Vue template.

It may also be worth including current-script-polyfill as per the documentation for IE support.

<html>
  <head>
    <meta charset="utf-8" />
    <title>ccv demo</title>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="./test-lib.umd.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/[email protected]/css/carbon-components.css"
    />
    <link rel="stylesheet" href="./test-lib.css" />
  </head>
  <body>
    <div id="app">Test</div>

    <script>
      Vue.use(window['test-lib'].default);

      new Vue({
        el: '#app',
        template: '<HelloWorld />',
      });
    </script>
  </body>
</html>

What is actually happening?

An invalid demo.html file is produced that is not capable of demonstrating a component.

Vue is not loaded
Components are not registered
The console.log fails due to the hyphenated library name.
No reference to current-script-polyfill

<meta charset="utf-8">
<title>test-lib demo</title>
<script src="./test-lib.umd.js"></script>
<link rel="stylesheet" href="./test-lib.css">

<script>
console.log(test-lib)
</script>

bug cli-service build

Source

lee-chase

👍41

Most helpful comment

the demo file should be at least customizable or optionally excluded from the build output

b4dnewz on 7 Sep 2019

👍37

All 14 comments

For people coming here in search for a demonstration of the --target lib flag, I quickly created this: https://github.com/awaigand/vue-cli-target-lib-example.

awaigand on 16 Jan 2019

👍7

The docs (https://cli.vuejs.org/guide/build-targets.html#library) for lib target build don't say anything about it including demo.html in the output. This just seems to be a "free bonus". But many component libraries will neither need nor want a demo.html. Why do we bother including this at all? Or if it is useful to some people could it be made an option? Otherwise we end up just making .npmignore files to avoid publishing this unwanted file.

dcwarwick on 27 Mar 2019

In my case the production of this file actually causes a false error. I get an error saying 'TypeError: Converting circular structure to JSON' in the html and at the command line when in fact the library was correctly built

ztolley on 2 Apr 2019

the demo file should be at least customizable or optionally excluded from the build output

b4dnewz on 7 Sep 2019

👍37

Anything new on this? I'm currently digging in building vue libraries and am asking myself what to do with this always incomplete/full of error demo.html. How can i profit from it the right way, how to use it? What is its task? complete confused!

awacode21 on 2 Mar 2020

I have to implement a laughable but "working" solution in my vue library:

// in package.json
"scripts": {
    "build:lib": "vue-cli-service build --target lib --name my-lib src/main.js && rm ./dist/demo.html"
},

Including a no-op demo page in the distribution bundle is hardly a justifiable bonus, it's rather an annoying surprise: this behavior is not documented anywhere and it doesn't accept options to be turned off.

Chopinsky on 4 Mar 2020

👍9

The culprit seems to be here (I'm trying to produce a web component):

https://github.com/vuejs/vue-cli/blob/bd7ad93cae9711ca30b05c31c185e1ce56bcb1de/packages/%40vue/cli-service/lib/commands/build/resolveWcConfig.js#L124-L126

I don't know why it configures itself to call it twice 🤷‍♂️
But then again I'm just poking around.

thenoseman on 14 Apr 2020

I've found a workaround how to to remove demo.html.
Seems like there's no way to do that in "chainWebpack", because the "demo-html" plugin is initialized after the chained config is resolved.
So let's use "configureWebpack" as a function and remove the demo.html in there like this

configureWebpack(config) {
    config.plugins.some((plugin, index) => {
        return plugin.options?.filename === 'demo.html' ? config.plugins.splice(index, 1) : false;
    });

    return {}; // your config
},

I've done that for "--target lib", not sure about the other kind of targets.

lmcsu on 20 Jun 2020

the demo file should be at least customizable or optionally excluded from the build output

Exactly, bump for this! 👊

iomariani on 30 Jul 2020

居然到现在还没解决这个问题吗

endday on 6 Aug 2020

wow...the bug still exists...

zhaozhe0831 on 21 Sep 2020

👍4

Any update on this issue?

DamianGlowala on 6 Oct 2020

Bump. Would like to be able to omit the demo.html file when compiling web components.

olleharstedt on 17 Dec 2020

Yes please, if possible :) Can't remember now if web components is the only target that generates demo.html file, but I'd prefer to have it optional for all. I was generating separate bundles for different pages, therefore needed to programmatically remove redundant demo.html. Not sure what's the purpose of it either.

DamianGlowala on 17 Dec 2020

Was this page helpful?

0 / 5 - 0 ratings