Error fixed in development, but comes back in production. (TypeError: Failed to fetch dynamically imported module)

[heloineto]

Describe the bug

I'm using a package called blip-ds. To make it work with Vite, I had to change the settings, as @sapphi-red suggested on this issue.

However, when I generate a production build, the error comes back.

The custom element is not rendered, and there are errors on the console.

I've spent hours tinkering with vite.config.ts trying to solve this.
Is there any fix/workaround for this?

Reproduction

https://stackblitz.com/edit/vitejs-vite-3wnebs

Steps to reproduce

Using the stackblitz repo:

1. Open a new terminal on stackblitz
2. Run npm run build followed by npm run preview
3. The component do not render, and there are errors on the browser console

From scratch:

1. Install the package by running npm i blip-ds
2. Define the web components from the package like so:

import { applyPolyfills, defineCustomElements } from 'blip-ds/loader';

applyPolyfills().then(() => defineCustomElements(window));

3. Try to use one of the library's web components, like <bds-button />
4. Run npm run build followed by npm run preview
5. The component do not render, and there are errors on the browser console

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 8.73 GB / 15.86 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.68)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Logs

Click to expand!

❯ npm run build --debug
$ vite build
vite v4.2.0-beta.2 building for production...
✓ 14 modules transformed.
dist/index.html                               0.42 kB
dist/assets/shadow-css-abbdeef8-d417d32b.js   5.90 kB │ gzip:  2.53 kB
dist/assets/css-shim-444e270a-873f454a.js     8.75 kB │ gzip:  3.49 kB
dist/assets/dom-442bff65.js                  18.70 kB │ gzip:  5.84 kB
dist/assets/index-e0528bbc.js                38.46 kB │ gzip: 12.58 kB
dist/assets/core-js-88f0b15b.js              94.45 kB │ gzip: 32.53 kB
✓ built in 1.26s

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-3wnebs (Open reproduction)

[sun0day]

The issue is that the bds-button is dynamically imported by blip-ds/loader and they are in separate packages

vite dev server can resolve module in the runtime while vite build couldn't, you have to dynamic import it in your entry. Try

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: { exclude: ['blip-ds/loader'] },
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: (asset) => {
          return asset.name.includes('bds-') ? 'assets/[name].js' : '[name]-[hash].js'
        }
      }
    }
  }
});

// load-blip-ds.js
import { applyPolyfills, defineCustomElements } from 'blip-ds/loader';

applyPolyfills().then(async () => {
  await import('blip-ds/dist/esm-es5/bds-button_2.entry.js')
  await import('blip-ds/dist/esm-es5/bds-icon_2.entry.js')
  defineCustomElements(window)
});

[sapphi-red]

As I said in the issue you linked, this package uses stencil and it requires the package to be built with an option to make it work with Vite. Stencil uses /* @vite-ignore */ and therefore it's their responsibility to make it work after build.

Closing as this is not a bug in Vite.