The lib target build produces a demo.html which is flawed #3291

lee-chase · 2019-01-12T18:00:42Z

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/carbon-components@9.66.3/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>

The text was updated successfully, but these errors were encountered:

awaigand · 2019-01-16T22:04:15Z

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.

dcwarwick · 2019-03-27T11:54:39Z

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.

ztolley · 2019-04-02T15:56:00Z

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

b4dnewz · 2019-09-07T06:01:10Z

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

awacode21 · 2020-03-02T21:44:00Z

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!

Chopinsky · 2020-03-04T16:16:21Z

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.

thenoseman · 2020-04-14T14:35:49Z

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

vue-cli/packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js

Lines 124 to 126 in bd7ad93

    
           return [ 
        
             genConfig(false, true), 
        
             genConfig(true, false)

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

not the demo file, though: vuejs/vue-cli#3291

lmcsu · 2020-06-20T12:33:51Z

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.

iomariani · 2020-07-30T00:53:29Z

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

Exactly, bump for this! 👊

endday · 2020-08-06T07:14:34Z

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

zhaozhe0831 · 2020-09-21T07:55:32Z

wow...the bug still exists...

DamianGlowala · 2020-10-06T16:24:16Z

Any update on this issue?

olleharstedt · 2020-12-17T01:18:34Z

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

etienne-cartong · 2021-02-26T13:44:20Z

Bump.

xon52 · 2021-03-16T22:23:11Z

Bump.

vzlc · 2021-03-26T10:49:55Z

Bump

MiraiSubject · 2021-07-14T08:35:42Z

Kind of odd that this has received no attention whatsoever from any contributors in the years that this issue has been active. Some control on what happens with the demo.html would be greatly appreciated. https://github.com/karol-f/vue-custom-element being the use case because upstream's --target wc is not sufficient for us anymore.

For now I'll just run my own script to overwrite the demo.html with my own solution for now at the last step.

GeekJosh · 2021-07-23T10:54:35Z

I just created a PR to add information about the demo.html file to the docs so at least future developers are aware of it

#6600

AimForNaN · 2021-08-09T21:48:39Z

Would be nice to be able to customize the demo.html file (e.g. using public/demo.html as a template).

semiaddict · 2021-08-13T07:59:54Z

I don't quite see this as a bug, as the demo file is here to show you how to include your library.
However, I also needed to be able to override it, and managed to do so by disabling the HTML generation by following the instructions from https://cli.vuejs.org/guide/html-and-static-assets.html#disable-index-generation and using copy-webpack-plugin.

See my related answer on stackoverflow.

LinusBorg added bug scope: cli-service build labels Jan 14, 2019

moores2 mentioned this issue Mar 27, 2019

Fix Vue wrapper packaging issue carbon-design-system/carbon-charts#236

Merged

8 tasks

kyuwoo-choi mentioned this issue Dec 14, 2019

unwanted demo.html in dist gs-shop/vue-slick-carousel#35

Open

retog added a commit to linked-solutions/rdfjs-vue that referenced this issue Apr 27, 2020

like that it could actually work

ac404d6

not the demo file, though: vuejs/vue-cli#3291

milespetrov mentioned this issue Mar 26, 2021

Production build is broken ramp4-pcar4/ramp4-pcar4#370

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The lib target build produces a demo.html which is flawed #3291

The lib target build produces a demo.html which is flawed #3291

lee-chase commented Jan 12, 2019

awaigand commented Jan 16, 2019

dcwarwick commented Mar 27, 2019

ztolley commented Apr 2, 2019

b4dnewz commented Sep 7, 2019

awacode21 commented Mar 2, 2020

Chopinsky commented Mar 4, 2020

thenoseman commented Apr 14, 2020 •

edited

Loading

lmcsu commented Jun 20, 2020 •

edited

Loading

iomariani commented Jul 30, 2020

endday commented Aug 6, 2020

zhaozhe0831 commented Sep 21, 2020

DamianGlowala commented Oct 6, 2020

olleharstedt commented Dec 17, 2020

etienne-cartong commented Feb 26, 2021

xon52 commented Mar 16, 2021

vzlc commented Mar 26, 2021

MiraiSubject commented Jul 14, 2021 •

edited

Loading

GeekJosh commented Jul 23, 2021

AimForNaN commented Aug 9, 2021

semiaddict commented Aug 13, 2021

The lib target build produces a demo.html which is flawed #3291

The lib target build produces a demo.html which is flawed #3291

Comments

lee-chase commented Jan 12, 2019

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

awaigand commented Jan 16, 2019

dcwarwick commented Mar 27, 2019

ztolley commented Apr 2, 2019

b4dnewz commented Sep 7, 2019

awacode21 commented Mar 2, 2020

Chopinsky commented Mar 4, 2020

thenoseman commented Apr 14, 2020 • edited Loading

lmcsu commented Jun 20, 2020 • edited Loading

iomariani commented Jul 30, 2020

endday commented Aug 6, 2020

zhaozhe0831 commented Sep 21, 2020

DamianGlowala commented Oct 6, 2020

olleharstedt commented Dec 17, 2020

etienne-cartong commented Feb 26, 2021

xon52 commented Mar 16, 2021

vzlc commented Mar 26, 2021

MiraiSubject commented Jul 14, 2021 • edited Loading

GeekJosh commented Jul 23, 2021

AimForNaN commented Aug 9, 2021

semiaddict commented Aug 13, 2021

thenoseman commented Apr 14, 2020 •

edited

Loading

lmcsu commented Jun 20, 2020 •

edited

Loading

MiraiSubject commented Jul 14, 2021 •

edited

Loading