bug: Building for Vite doesn't work even with enableImportInjection: true #5637
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
4.7.0
Current Behavior
Importing my web component in a Vite project (sveltekit, in this case) gives me the following error:
file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/entries/pages/_page.svelte.js:2
import { defineCustomElements } from "bitcoin-qr/loader/index.js";
^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'defineCustomElements' not found. The requested module 'bitcoin-qr/loader/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'bitcoin-qr/loader/index.js';
const { defineCustomElements } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async Module.component (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/nodes/2.js:5:59)
at async Promise.all (index 1)
at async render_response (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/index.js:1355:21)
at async render_page (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/index.js:2218:12)
at async resolve2 (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/index.js:2839:24)
at async respond (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/.svelte-kit/output/server/index.js:2730:22)
at async visit (file:///Users/username/bitcoin-qr/examples/sveltekit-kitchen-sink/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:202:20)
node:internal/event_target:1100
After searching around and seeing that Vite only works with ESM modules, I found a couple issues (#3961 and #4598) related that suggest setting enableImportInjection: true in stencil.config.ts. I set this, rebuilt and packed the stencil project, imported into my Vite project, and got the same error. Notably, it works fine in the dev build/server, just not production.
Expected Behavior
The project should build with no errors and the element should render in both the production and dev servers.
System Info
`npx stencil info`
System: node 20.11.1
Platform: darwin (22.5.0)
CPU Model: Apple M1 Pro (8 cpus)
Compiler: /Users/brandonlucas/src/lightning/bitcoin-qr/node_modules/@stencil/core/compiler/stencil.js
Build: 1710782619
Stencil: 4.13.0 🚞
TypeScript: 5.4.2
Rollup: 2.56.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.29.2Steps to Reproduce
To reproduce:
- Create a sveltekit vite project:
npm create svelte@latest vite-build-test
cd vite-build-test
npm install
npm run dev -- --open
- Create and build a stencil project with
enableImportInjection: true.
import { Config } from '@stencil/core';
export const config: Config = {
namespace: 'bitcoin-qr',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
],
...
extras: {
enableImportInjection: true,
},
};
npm buildthennpm packthe Stencil project, unpack withtar -xvf <package>. Install it in the Vite project vianpm install --save <path-to-package>- Import
defineCustomElementsinto the app and call it:
<script lang="ts">
import { defineCustomElements } from '<stencil-project>/loader';
defineCustomElements();
</script>
- Run
npm buildthennpm previewto build & start the production server.
I created a minimum reproducible Vite example here.
Code Reproduction URL
https://github.com/thebrandonlucas/bitcoin-qr/
Additional Information
No response