stencil

stencil copied to clipboard

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.0

Current Behavior

Stylesheets do not load for components that have per-mode stylesheets (I.e. ios or md) in a Next.js application. This impacts dist-custom-elements in apps that rely on the setMode function which allows Stencil to correctly determine the mode for a component.

This function is set in a global component. However, it appears that in a Next.js application the global component is not always the first thing to load. As a result, when a Stencil component is mounted, the stylesheets do not load because the setMode callback was never provided.

Expected Behavior

I would expect to have a way to ensure that setMode is always called first.

Steps to Reproduce

See steps to reproduce in GitHub readme. The readme in next-app also has an overview of the different components.

Code Reproduction URL

https://github.com/liamdebeasi/stencil-next

Additional Information

I do not think this is a Stencil bug, but I am unclear as to how to get this working in a Next.js environment if I cannot find a way to ensure that setMode is always called first.

can confirm this isn't working! I'm playing around with it a bit now to just see if there's some way I can get the function called before the component hits the DOM. It's possible we do need to make a change in Stencil here but atm not sure!

Are there any updates?

hi everyone, any updates on this?

Hi all!

The Stencil team has confirmed that this is a bug and ingested it into our internal ticketing system for prioritization and so on. I can promise that when there are updates about the issue or a fix it will be noted here, until then I have nothing to report 🙂