search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.41k stars 777 forks source link

Production build fails to create components with shadow root attached #419

Closed dimi-nk closed 6 years ago

dimi-nk commented 6 years ago

Stencil version:

 @stencil/core@0.1.5<version>

I'm submitting a:

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:

Expected result (via npm start build) is this: image

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

Other information:

jgw96 commented 6 years ago

Looking into this

dimi-nk commented 6 years ago

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

shprink commented 6 years ago

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 git@github.com:shprink/WC-Polymer-Stencil-todo.git test
cd test/stencil
yarn
npm start // works!
npm run build // does not
jgw96 commented 6 years ago

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 commented 6 years ago

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.

> my-component@0.0.1 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 commented 6 years ago

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 commented 6 years ago

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

dimi-nk commented 6 years ago

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

In the stencil components repo:

In the app repo:

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

adamdbradley commented 6 years ago

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

dimi-nk commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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:

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

adamdbradley commented 6 years ago

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

peterpeterparker commented 6 years ago

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 commented 6 years ago

Problem still visible in 0.3.0

adamdbradley commented 6 years ago

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 commented 6 years ago

@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 commented 4 years ago

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.

WilHolt commented 2 years ago

i`m facing this same issue in 1.17.2

splitinfinities commented 2 years ago

Hey folks! Could you please update Stencil to v2.10.0 and tell me if this still occurs? We are not supporting Stencil v0 or v1.