bug: Building for Vite doesn't work even with enableImportInjection: true

[thebrandonlucas]

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.2

Steps to Reproduce

To reproduce:

1. Create a sveltekit vite project:

npm create svelte@latest vite-build-test
cd vite-build-test
npm install
npm run dev -- --open

2. 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,
  },
};

3. npm build then npm pack the Stencil project, unpack with tar -xvf <package>. Install it in the Vite project via npm install --save <path-to-package>
4. Import defineCustomElements into the app and call it:

<script lang="ts">
	import { defineCustomElements } from '<stencil-project>/loader';

	defineCustomElements();
</script>

5. Run npm build then npm preview to 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

[thebrandonlucas]

UPDATE: I was able to get this to work in the minimum reproducible example by changing "main": "dist/index.cjs.js" to `"main": "dist/index.js". However, I get a console warning when doing so:

[ WARN  ]  Package Json: package.json:5:3
           package.json "main" property is set to "dist/index.js". It's recommended to set the "main" property to:
           dist/index.cjs.js
      ...
      L5:  "main": "dist/index.js",
      L6:  "module": "dist/index.js",

Howver, I'm still unable to get building to work in the original example repo I'm doing this in here, despite installing the same version of the package above. It's throwing the same error on build: 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:, despite the fact that I explicitly changed it to NOT be using "main" as commonJS

[rwaskiewicz]

Hey @thebrandonlucas 👋

I'm not seeing a Stencil project in the minimal reproduction URL - https://github.com/thebrandonlucas/vite-build-test. Can you do me a favor and update that when you get a chance so that the team and I can take a closer look? Thanks!

[ionitron-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.

[thebrandonlucas]

@rwaskiewicz My apologies, I was using a locally built package and must've removed it.

The bitcoin-qr package I'm trying to build with has been added now.

[rwaskiewicz]

It looks like to get Vite working in this particular instance, you'll need to add a loader export in your Stencil package's package.json. E.g.:

"exports": {
    ".": {
      "import": "./dist/my-stencil/my-stencil.esm.js",
      "require": "./dist/my-stencil/my-stencil.cjs.js"
    },
    "./my-component": {
      "import": "./dist/components/my-component.js",
      "types": "./dist/components/my-component.d.ts"
    },
+    "./loader": {
+      "import": "./loader/index.cjs.js",
+      "types": "./loader/index.d.ts"
+    }
  },

From there, rebuild your Stencil project, then publish/npm pack it, install the updated version in your Svelte project, then everything should work without additional changes 🙂

I've closed this issue out, feel free to open a new one if this doesn't work as expected.

[thebrandonlucas]

Worked like a charm. Thanks for your help!