Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Version

3.3.0

Reproduction link

https://github.com/lee-chase/test-lib

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>

Issue Analytics

State:
Created 5 years ago
Reactions:53
Comments:20

Top GitHub Comments

41reactions

b4dnewzcommented, Sep 7, 2019

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

14reactions

Chopinskycommented, Mar 4, 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.

Top Results From Across the Web

Class not found with Ant, Ivy and JUnit - error in build.xml?

However, when I try ant test on the following I see: test: BUILD FAILED /home/andrew/project/guice/hg/build.xml:33: java.lang.

1. Setting Up a Project Using Ant - Java Power Tools [Book]

The <fail> task lets you force the build to fail if a particular condition is met. <target name="test.report" depends="test" description="Generate HTML unit ...

HTML: A good basis for accessibility - Learn web development

You should now be well-versed in writing accessible HTML for most ... In the bad old days, people used to create page layouts...

Java Unit Testing with JUnit and TestNG

[Alternatively, when you create a new test case or test suite (as describe below), Eclipse will prompt you to include the JUnit library.]...

Shadow CLJS User's Guide

Each build will have a :target property which represents a ... When it finds a demo/app.cljs at the root of any of the...