bug: buildEs5 emits warning with Vite

[KyleSmith0905]

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

3.0.0

Current Behavior

When performing a production build with buildEs5 enabled the build works fine with no error. After moving over to the Vite project and starting it up, it emits an warning: (I removed output as it was a few lines of compiled JavaScript).

12:45:07 PM [vite] warning:
C:/<path to project>/stencil-project/dist/esm-es5/index-90e39d12.js
1  |  var __extends=this&&this.__extends||function...
...
...

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning. 

I developed a minimum reproducible example and discovered that by removing buildEs5 in Stencil's config the warning stopped emitting. This is indifferent to whether experimentalImportInjection was in the config.

Expected Behavior

The Vite React server should run without emitting a warning with buildEs5 enabled. If it happens to be unfixable, it should be specified somewhere on the documentation of the issue.

System Info

Vite: 4.1.0
React: 18.2.0

Steps to Reproduce

Clone this repository: https://github.com/KyleSmith0905/mre--vite-stencil-dynamic-import/tree/master

1. Build Stencil project.
2. Run Vite dev server.

Code Reproduction URL

https://github.com/KyleSmith0905/mre--vite-stencil-dynamic-import

Additional Information

No response

[rwaskiewicz]

Hey @KyleSmith0905 👋

I wasn't able to reproduce this locally using the minimal reproduction case provided. Can you please do me a favor and provide step-by-step commands for someone on the team to follow to verify this issue?

For posterity, I did the following after cloning the repo:

• cd stencil-project - verified buildEs5 setting was set to prod
• npm i
• npm run build
• cd ../stencil-react-output
• rm -rf node_modules
• npm i
• attempt npm run build, build fails.
• Apply the following patch:

diff --git a/stencil-react-output/src/components.ts b/stencil-react-output/src/components.ts
index 8957b37..bc5b98d 100644
--- a/stencil-react-output/src/components.ts
+++ b/stencil-react-output/src/components.ts
@@ -3,7 +3,7 @@
 /* auto-generated react proxies */
 import { createReactComponent } from './react-component-lib';
 
-import type { JSX } from 'stencil-library';
+import type { JSX } from 'stencil-project';

• npm run build
• cd ../vite-react-app
• npm i
• npm run dev
• open the browser, observe no console statements

[ionitron-bot[bot]]

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.

[KyleSmith0905]

Thank you for the more-thorough reproduction, I overlooked the component package name that needed to be edited (and other goofs like leaving in node_modules), those have been fixed in the project (error still persists). I follow along the same reproduction received a warning in the terminal.

I went to the file in question and I beautified the file and was able to get an error output small enough to send.

PS C:\Users\<path-to-folder>\mre--vite-stencil-dynamic-import\vite-react-app> npm run dev

> [email protected] dev
> vite


  VITE v4.1.4  ready in 197 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
9:30:35 AM [vite] warning:
C:/Users/<path-to-folder>/mre--vite-stencil-dynamic-import/stencil-project/dist/esm-es5/index-90e39d12.js
892|      }
893|    }
894|    return import("./".concat(a, ".entry.js").concat("")).then((function(e) {
   |                  ^
895|      {
896|        cmpModules.set(a, e)
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.        

  Plugin: vite:import-analysis
  File: C:/Users/<path-to-folder>/mre--vite-stencil-dynamic-import/stencil-project/dist/esm-es5/index-90e39d12.js    

As expected I added /* @vite-ignore */ to the import statement and I stopped receiving the warning.

Additional information to address reproduction issues:

• Due to the nature of the minifier (thus everything is on one line), there is a lot of spacing beneath part of the warning message; therefore, the warning might've been missed.
• I am using Node 19.7.0, NPM 9.5.1, and Chrome 110.0.5481.178.
• I saw through the Sources tab on Chrome Dev Tools that the stencil-project/dist/esm-es5/* and stencil-project/dist/esm/polyfills/index.js were being imported.
• As you have did, the error only shows up after the webpage is open.

[rwaskiewicz]

Thanks @KyleSmith0905 - I was able to confirm that this is indeed happening. I'm going to label this to get ingested into the team's backlog - thanks again for an awesome reproduction case!

[Horsty80]

I'm facing this issue, any news on it ?

[rwaskiewicz]

I don't have any news on this issue at the moment. If folks encountering this could please do me a favor and add 👍's to the issue summary to upvote it (if you're running into it), that'd be a big help! GitHub doesn't give us an easy way to track comments if someone's running into a reported issue, which makes them more likely to not be properly counted when we prioritize issues.

Thanks!

[dangrussell]

I have a newly-updated-to-Angular-17 app that indirectly uses @stencil/[email protected] via @esri/[email protected] via @arcgis/[email protected].

When I build the app, I get this warning:

 ▲ [WARNING] The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]

     node_modules/@stencil/core/internal/client/index.js:3234:4:
       3234 │     `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVe...
            ╵     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Hope this helps with narrowing down the issue.