addStylesToShadowDOM.js error for WebComponent target

[Serhii Matrunchyk]

Version: vue-style-loader@4.1.0

Bug report

Steps to reproduce:

1. vue create vue-style-loader-bug
2. cd vue create vue-style-loader-bug
3. Rename App.vue -> Example-App.vue (since WC should have at least 2 words)
4. By default Example-App.vue contains one <HelloWorld> tag. Add one or few more. This is important. So the file should look like:

<div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

5. Run ./node_modules/.bin/vue-cli-service build --target wc --name example-app src/Example-App.vue to generate WebCompontent to dist folder.
6. Open dist/demo.html in Chrome.
7. Open Chrome console tools. You'll see the bug:
   

This happen because we expect style.parts[j] to be a function and execute it which is not in fact a function, but undefined (a proof while debugging)

The reason why style.parts[j] is undefined, because we run parts.push() passing a result of addStyle() function which DOES NOT return anything!

Please note, that it won't fail if you don't use multiple vue components within the same file (they should have a <style> tag), because the if condition will not run in that case.

I notices there are no tests for this file at all.

@yyx990803, is there any possibility to fix it? Now it's impossible to use multiple components within 1 component for Web Components.

Thanks.

[Julien Gribonvald]

Hi this bug is a problem for me too.

Do you have a way to avoid this problem when using severall components ?
Thanks

[David Hayes]

I can confirm the same issue here, kind of a show stopper for using web components

[Evan You]

Fixed in 4.1.1