bug: Removing polyfills except for es5 builds breaks existing installs

gavmck commented 1 month ago

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

4.18.1

Current Behavior

The PR to remove polyfills unless explicitly building es5 means that, although addPolyfills is still defined as being exported in the types, the function does not exist. This meant when we our package lock updated from 4.14.x to 4.18.1, the install broke.

PR https://github.com/ionic-team/stencil/pull/5725

Expected Behavior

Might be cleaner to keep exporting the function, but make it do nothing so the import doesn't explode before removing in the next major.

System Info

No response

Steps to Reproduce

Install stencil 4.14.x and use applyPolyfills. Update to stencil 4.18.1, watch build explode.

Code Reproduction URL

https://sorry.dont/have/this.biz

Additional Information

No response

christian-bromann commented 1 month ago

@gavmck thanks for raising the issue.

Unfortunately I was not able to verify that exploding build 😉 I created a new Stencil project, build it with v4.14.0 and then again with v4.18.1 and everything was fine:

❯ npm i
npm WARN deprecated puppeteer@21.11.0: < 22.5.0 is no longer supported

added 349 packages, and audited 350 packages in 6s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
❯ npm run build

> issue5780@0.0.1 build
> stencil build

[18:02.0]  @stencil/core
[18:02.1]  v4.14.0 🚡
[18:02.8]  build, issue5780, prod mode, started ...
[18:02.8]  transpile started ...
[18:04.0]  transpile finished in 1.20 s
[18:04.0]  copy started ...
[18:04.0]  generate custom elements + source maps started ...
[18:04.0]  generate lazy + source maps started ...
[18:04.1]  copy finished (0 files) in 107 ms
[18:04.2]  generate custom elements + source maps finished in 213 ms
[18:04.3]  generate lazy + source maps finished in 299 ms
[18:04.3]  build finished in 1.55 s

❯ rm -r node_modules/ package-lock.json
❯ npm i
npm WARN deprecated puppeteer@21.11.0: < 22.5.0 is no longer supported

added 349 packages, and audited 350 packages in 2s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
❯ npm run build

> issue5780@0.0.1 build
> stencil build

[18:22.1]  @stencil/core
[18:22.3]  v4.18.1 🏍
[18:22.8]  build, issue5780, prod mode, started ...
[18:22.9]  transpile started ...
[18:24.0]  transpile finished in 1.19 s
[18:24.0]  copy started ...
[18:24.1]  generate custom elements + source maps started ...
[18:24.1]  generate lazy + source maps started ...
[18:24.1]  copy finished (0 files) in 104 ms
[18:24.2]  generate custom elements + source maps finished in 159 ms
[18:24.4]  generate lazy + source maps finished in 287 ms
[18:24.4]  build finished in 1.53 s

Can you provide a step by step description on how to reproduce the problem please?

ionitron-bot[bot] commented 1 month ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

gavmck commented 1 month ago

@gavmck thanks for raising the issue.

Unfortunately I was not able to verify that exploding build 😉 I created a new Stencil project, build it with v4.14.0 and then again with v4.18.1 and everything was fine:

❯ npm i
npm WARN deprecated puppeteer@21.11.0: < 22.5.0 is no longer supported

added 349 packages, and audited 350 packages in 6s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
❯ npm run build

> issue5780@0.0.1 build
> stencil build

[18:02.0]  @stencil/core
[18:02.1]  v4.14.0 🚡
[18:02.8]  build, issue5780, prod mode, started ...
[18:02.8]  transpile started ...
[18:04.0]  transpile finished in 1.20 s
[18:04.0]  copy started ...
[18:04.0]  generate custom elements + source maps started ...
[18:04.0]  generate lazy + source maps started ...
[18:04.1]  copy finished (0 files) in 107 ms
[18:04.2]  generate custom elements + source maps finished in 213 ms
[18:04.3]  generate lazy + source maps finished in 299 ms
[18:04.3]  build finished in 1.55 s

❯ rm -r node_modules/ package-lock.json
❯ npm i
npm WARN deprecated puppeteer@21.11.0: < 22.5.0 is no longer supported

added 349 packages, and audited 350 packages in 2s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
❯ npm run build

> issue5780@0.0.1 build
> stencil build

[18:22.1]  @stencil/core
[18:22.3]  v4.18.1 🏍
[18:22.8]  build, issue5780, prod mode, started ...
[18:22.9]  transpile started ...
[18:24.0]  transpile finished in 1.19 s
[18:24.0]  copy started ...
[18:24.1]  generate custom elements + source maps started ...
[18:24.1]  generate lazy + source maps started ...
[18:24.1]  copy finished (0 files) in 104 ms
[18:24.2]  generate custom elements + source maps finished in 159 ms
[18:24.4]  generate lazy + source maps finished in 287 ms
[18:24.4]  build finished in 1.53 s

Can you provide a step by step description on how to reproduce the problem please?

@christian-bromann Ah sorry, it's not the build that explodes, it's the install. The previous instructions said to do this.

import { applyPolyfills, defineCustomElements } from 'my-component-library';

applyPolyfills().then(() => {
  defineCustomElements();
});

Now the applyPolyfills function does not exist unless you build for es5 so previous working installs break.

gavmck commented 1 month ago

The type also seems to output that the function exists still https://github.com/ionic-team/stencil/blob/5a82d0152c92f4ad64c0a9dc92dfb5a564a0bdbf/src/compiler/output-targets/output-lazy-loader.ts#L84

christian-bromann commented 1 month ago

How do you set applyPolyfills ? Can you please provide a reproducible example? It is unknown to me what my-component-library exports here.

gavmck commented 1 month ago

I'll see if I can know one up. applyPolyfills came from the stencil loader

It looks like it was removed from the docs last year and I missed it.

https://github.com/ionic-team/stencil-site/commit/3a910c237e20136e46961cd988759a594d0f9627#diff-f1f96788acd155196970469f3c5031d518d3800fde982f92412858072a726bcfL518

christian-bromann commented 1 month ago

That is correct. This has been done due to the fact that Stencil stopped supporting IE, afaik. Do you think we can close this issue then?

gavmck commented 1 month ago

Do we still need to update the type?

christian-bromann commented 1 month ago

Yes, let me raise a PR for that.

christian-bromann commented 1 month ago

Actually we have this planned to remove for Stencil v5.

Kwooda commented 1 month ago

We have a polyfill problem in our repos with v4.18.1. We have one repo for Stencil that generates the Web components, and another repo that consumes that repo to generate the React components. Any project that attempts to use the React components gets the following error: export 'applyPolyfills' (imported as 'applyPolyfills') was not found in '@***/loader' (possible exports: defineCustomElements, setNonce)

christian-bromann commented 1 month ago

@Kwooda thanks for the feedback, is there a chance you can provide a minimal reproducible example?

Kwooda commented 1 month ago

I don't know - last time I tried I got slapped by our security team, but I'll see if there's anything I can do.

christian-bromann commented 1 month ago

Ideally from a new Stencil project, e.g. that you can create via npm init stencil.

felipefialho commented 3 weeks ago

If I keep the same structure described in Stencil documentation to generate wrappers of Vue Components and React Components, we have a problem with Stencil 4.18.x to render these components

You can check my real code here

And I have a workaround to work with Vue3 too

In both cases I receive an error because applyPolyfills doesn't exist anymore

Can you help us?

gavmck commented 3 weeks ago

If I keep the same structure described in Stencil documentation to generate wrappers of Vue Components and React Components, we have a problem with Stencil 4.18.x to render these components

You can check my real code here

And I have a workaround to work with Vue3 too

In both cases I receive an error because applyPolyfills doesn't exist anymore

Can you help us?

@felipefialho The answer for us was just to remove all mention of applyPolyfills

danielleroux commented 5 days ago

I'm a little bit confused why was this PR (#5725) part of an v4 minor/patch release, for me it looks like a breaking change and should be done in v5.

https://github.com/ionic-team/stencil/blob/47c8efc5c460a1d0931ab3398cc2ac0bb17008c0/src/compiler/output-targets/dist-lazy/generate-esm.ts#L61-L63

ionic-team / stencil