Stencil: Production build fails to create components with shadow root attached

[dimi-nk]

Stencil version:

 @stencil/[email protected]<version>

I'm submitting a:

• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

While npm start seems to generate the shadow root correctly, npm run build fails to properly attach the shadow root.

Expected behavior:

Shadow root is attached on both cases

Steps to reproduce:

• clone repo mentioned below
• execute npm run build
• execute npm run serve
• check the generated HTML
• <my-icon> looks like this:
  

Expected result (via npm start build) is this:

Related code:
Example repo: https://github.com/dimi-nk/stencil-component-starter

Other information:

[jgw96]

Looking into this

[dimi-nk]

Thought of opening an issue, since it might get lost in slack

[shprink]

Might be the problem I encountered on https://github.com/shprink/WC-Polymer-Stencil-todo. the build finishes but files are empty.

Reproduce:

git clone [email protected]:shprink/WC-Polymer-Stencil-todo.git test
cd test/stencil
yarn
npm start // works!
npm run build // does not

[jgw96]

Alright, so weird thing. Shadow Dom in prod buidls is working fine in the stencil-app-starter but not in the component starter. Marking this as a legit bug. Thanks for opening this bug @dimi-nk !

[dimi-nk]

Could the --prerender flag on "build": "stencil build --prerender" make a difference? Guess, not.

Getting the following when I add the flag, so the shadowRoot is actually missing during build as well.

> [email protected] build /Users/dimitris.klimis/IdeaProjects/stencil-component-starter
> stencil build --prerender

[12:57.8]  @stencil/core v0.1.5
[12:57.8]  build, mycomponent, prod mode, started ...
[12:57.8]  compile started ...
[12:59.9]  compile finished in 2.10 s
[12:59.9]  bundle styles started ...
[12:59.9]  bundle modules started ...
[13:00.1]  bundle styles finished in 181 ms
[13:00.1]  bundle modules finished in 200 ms
[13:00.1]  generate bundles started ...
[13:00.3]  generate bundles finished in 189 ms
[13:02.9]  generate service worker started ...
[13:03.0]  generate service worker finished in 138 ms
[13:03.1]  prerendering started ...
[13:03.1]  prerender, started: / ...
[13:03.5]  prerender, finished: / in 421 ms

[ ERROR ]  Runtime error detected during componentDidLoad(): my-icon-demo
           Cannot read property 'querySelectorAll' of undefined TypeError: Cannot read property 'querySelectorAll' of
           undefined at e.componentDidLoad (evalmachine.<anonymous>:2:212) at initComponentLoaded
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9539:65)
           at HTMLUnknownElement.HostElementConstructor.$initLoad
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:10020:9)
           at propagateComponentLoaded
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9574:82)
           at initComponentLoaded
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9552:9)
           at HTMLUnknownElement.HostElementConstructor.$initLoad
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:10020:9)
           at renderUpdate
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9829:17)
           at update
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9811:13)
           at plt.queue.add
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:9745:13)
           at flush
           (/Users/dimitris.klimis/IdeaProjects/stencil-component-starter/node_modules/@stencil/core/dist/compiler/index.js:10354:36)

[13:03.5]  prerendered urls: 1 in 425 ms
[13:03.5]  build finished in 5.71 s

[dimi-nk]

The problem was created between 0.1.0-0 and 0.1.0. 0.1.0-0 seems to be the last release where I get a shadow dom after running npm run build.

[adamdbradley]

I just tested this in 0.2.2 and should be fixed now. Thanks for the report!

[dimi-nk]

@adamdbradley I've tested with 0.2.2 and I still see the problem. What I did:

In the stencil components repo:

• Updated to 0.2.2
• rm -rf node_modules dist
• npm install
• npm run build
• yarn link

In the app repo:

• rm -rf node_modules
• yarn
• yarn link component-repo
• ng serve
• Still get components without a shadow root

If I run npm start in the components repo, the components get shadow roots.

[adamdbradley]

Curious, do you have some components that use shadow and some that don't?

[dimi-nk]

I have a few 'demo' components inside the project (using the actual components as a showcase), but those are not part of the bundled components.

[marlonicus]

I am having the same problem with a similar setup to dimi-nk (running Node 7.10 on MacOS Sierra).

I have built a few simple components using the stencil-component-starter project as a base. These work just fine when built through dev mode (stencil build --dev), but when I do a prod build (stencil build), the components don't have shadow dom.

I am using @stencil/core 0.2.3, but I have tried with 0.2.2 and 0.2.1. My stencil config looks like:

exports.config = {
  namespace: 'xxx',
  generateDistribution: true,
  bundles: [
    { components: ['xxx'] }
  ],
  globalScript: 'src/envvars.ts',
  copy: [
    { src: 'assets' }
  ],
  globalStyle: 'src/global/variables.css',
  publicPath: process.env.STENCIL_BASE_URL,
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
}

And my components aren't doing anything fancy or special, this is my Component decorator:

@Component({
  tag: 'xxx-button',
  styleUrl: 'xxx-button.scss',
  // shadow: true, // Tried with and without
})

I have tried with and without shadow set on all components (as per @adamdbradley's comment), but to no avail. I have also tried building with the --prerender flag (just in case it was a strange quirk with that).

Let me know if you need any more info!

[dimi-nk]

Here's my config as well, in case it helps:

exports.config = {
    namespace           : 'xxx',
    generateDistribution: true,
    bundles             : [
        {components: ['xxx-dropdown-menu', 'xxx-draggable-grid', 'xxx-draggable-grid-item', 'xx-icon', 'iz-select']}
    ],
    collections         : [{name: '@stencil/router'}]
};

exports.devServer = {
    root     : 'www',
    watchGlob: '**/**'
};

[mattdsteele]

I'm seeing this as well, 0.2.3. Here's a repo based off the component starter (the shadow-prod branch): https://github.com/mattdsteele/stencil-nested-shadows/tree/shadow-prod

In this instance, I've got this structure:

<my-component> // shadow: true
 <inner-shadow /> // shadow: true
 <inner-noshadow /> // shadow: false
</my-component>

With a production build I see different errors in different browsers:

• In Chrome, no hosts get a shadowRoot, and style tags are placed in the <head>.
• In Firefox/Edge, I see TypeErrors like "TypeError: this.Jn is undefined"

Might be related to another ticket, https://github.com/ionic-team/stencil/issues/447

[adamdbradley]

Thanks for the report, we'll dig into this, thanks

[peterpeterparker]

If that could help, I have the feeling that just using the lazy-img of the ionic-pwa-toolkit allow to replicate this issue. After a prod build, this.el.shadowRoot in this component gonna be null

A dummy project to recreate the issue: https://github.com/peterpeterparker/lab-stencil-webgl

See console.log('HERE5' + this.el.shadowRoot); in lazy-img

[dimi-nk]

Problem still visible in 0.3.0

[adamdbradley]

Thanks everyone for finding and testing this! Turns out it was a pretty simple fix (just hard to find of course). Just needed to make sure "encapsulation" wasn't property renamed in the production builds. Should be fixed in the next release, thanks!

[ray-kay]

@adamdbradley I came across the same issue today with 0.4.0 and even in 0.6.0. I created bug #553 as I just found this issue afterwords.

[nataje4]

I am still having this exact issue in 1.8.3. Should I create a new issue? Seems redundant—the problem is exactly as described here.