Bundling error "Failed to fetch dynamically imported module" when adding a package made with Stencil.js

[heloineto]

Describe the bug

When adding the blip-ds package to a Vite project, the following errors are shown in the console:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
TypeError: Failed to fetch dynamically imported module: ...node_modules/.vite/deps/bds-datepicker-period_3.entry.js?import
TypeError: Cannot read properties of undefined (reading 'isProxied')

The package is a web components library made using Stencil.js. It works normally with webpack.

I believe this is a bundling error related to import handling.

Reproduction

https://stackblitz.com/edit/vitejs-vite-e6u1bw?file=index.html

Steps to reproduce

1. Install the package 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-input />
4. Check the browser console, you should see the errors

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 6.26 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.1413.0), Chromium (111.0.1661.41)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Logs

No response

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-e6u1bw (Open reproduction)

[fi3ework]

Duplicate of #3326

[sapphi-red]

The bundle includes this part of the code.
https://github.com/ionic-team/stencil/blob/75a0ea03873ca7f578a9e8cd55783046f67e9ac0/src/client/client-load-module.ts#L26-L33

It seems stencil requires the library to be compiled with enableImportInjection: true to make it work with Vite.

A workaround is to set optimizeDeps.exclude: ['blip-ds/loader'].

---

@patak-dev Is it possible to detect whether the file will exist after the dep-optimizer finished?

vite/packages/vite/src/node/plugins/optimizedDeps.ts

Lines 71 to 74 in e23f690

	} catch (e) {
	// Outdated non-entry points (CHUNK), loaded after a rerun
	throwOutdatedRequest(id)
	}

We currently throw 504 here but in this case, reload won't happen because it's not a outdated non-entry point.

[heloineto]

A workaround is to set optimizeDeps.exclude: ['blip-ds/loader'].

Changing this in the vite.config.ts worked for me! Thank you so much, You're awesome!

[Erudition]

wow that worked for me too! man this really needs to be documented, so many unanswered questions online when trying to research this...

    exclude: [
        '@ionic/core/loader' //fix weird Vite error "outdated optimize dep"
    ],

[vavellar]

after more than 3 hours debbuging i found this issue and worked for me, thanks

[IzzyCitelis]

Hello folks, in my case i added a private package from google cloud artifact, the package its already installed in node_modules/@quickstart/footer-component, i'm using

"vue": "^3.2.45", "vite": "^4.0.0",
when i import in my main.js in this way the component works locally

import { applyPolyfills, defineCustomElements } from '../node_modules/@quickstart/footer-component/loader';

but when i deploy on render doest'n work even if i tried to import in both ways i get the same error

import { applyPolyfills, defineCustomElements } from '@quickstart/footer-component/loader';

what i need to change on my vite.config.ts to solve this?
thank you so much for your attention.

[DevYemi]

I had this same issue right after just install Material UI.
i tried optimizeDeps.exclude: ['@mui/material'] but that didn't work for me.

i had to delete node_module folder and reinstall every package with npm install before the error got cleared

[JordenLCH]

wow that worked for me too! man this really needs to be documented, so many unanswered questions online when trying to research this...

    exclude: [
        '@ionic/core/loader' //fix weird Vite error "outdated optimize dep"
    ],

Great! It's working now! Thanks for your help. I'm using pwa-elements, so the error disappeared after adding this line @ionic/pwa-elements/loader

[heloineto]

The bundle includes this part of the code. ionic-team/stencil@75a0ea0/src/client/client-load-module.ts#L26-L33

It seems stencil requires the library to be compiled with enableImportInjection: true to make it work with Vite.

A workaround is to set optimizeDeps.exclude: ['blip-ds/loader'].

@patak-dev Is it possible to detect whether the file will exist after the dep-optimizer finished?

vite/packages/vite/src/node/plugins/optimizedDeps.ts

Lines 71 to 74 in e23f690

	} catch (e) {
	// Outdated non-entry points (CHUNK), loaded after a rerun
	throwOutdatedRequest(id)
	}

We currently throw 504 here but in this case, reload won't happen because it's not a outdated non-entry point.

This fixed it in development, thanks a lot!

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

Reproduction: https://stackblitz.com/edit/vitejs-vite-3wnebs?file=package.json,index.html

To reproduce:

1. Open a new terminal on stackblitz
2. Run npm run build and npm run preview

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.
Do you know if there are anything I can do to fix this?

[xProfanity]

the fore-mentioned workaround definitely worked for me on vite. My package was react-three library, i added in exclude array, then deleted node_modules, run npm i

thanks

[glimmbo]

Had a very similar error today, but all that was required was deleting the node_modules and npm i 🤷‍♂️

[raythree]

Thank you @heloineto, this started happening in my Ionic app build (yarn dev) quite frequently, and I had to keep reinstalling all node_modules. The vite config definitely fixed it:

  optimizeDeps: {
    exclude: ['blip-ds/loader']
  } 

[hecmocerJLL]

Had a very similar error today, but all that was required was deleting the node_modules and npm i 🤷‍♂️

the folder node_modules/.vite contains a cached bundle. It is wise to delete it to make sure vite rebundles everything after changes on vite.config

[AntonOfTheWoods]

I also had an issue with @mui/material and had to clean out everything for the site before it would run again - simply clearing the node_modules/.vite wasn't enough.

[xcanchal]

optimizeDeps.exclude seems to work on dev mode but not when building for production (at least for me). Did anyone experience the same?

[hecmocerJLL]

optimizeDeps.exclude seems to work on dev mode but not when building for production (at least for me). Did anyone experience the same?

Same here. Also tried enableImportInjection: true unsuccessfully :_(

[hecmocerJLL]

It finally worked, we had to rename enableImportInjection to experimentalImportInjection.

The stencil compiler indicated

Type '{ EnableImportInjection: true; }' is not assignable to type 'ConfigExtras'.
  Object literal may only specify known properties, and 'EnableImportInjection' does not exist in type 'ConfigExtras'.ts(2322)
stencil-public-compiler.d.ts(144, 5): The expected type comes from property 'extras' which is declared here on type 'StencilConfig'

The fix that finally worked and enabled us to import stencil components into a built vue application was:

Stencil.config.js

extras: {
    EnableImportInjection: true
}

Using:

• Vite 4.3.9
• Stencil 3.2.1

[xcanchal]

Building Stencil with the extras.experimentalImportInjection: true worked for me too (in a React app)

[janarvaezkng]

extras: {
    enableImportInjection: true
}

AND

optimizeDeps: {
    exclude: ['myStencilLib/loader']
} 

worked for me

[Erudition]

Good to hear! I'm not able to custom recompile Stencil though, is there a way to add this to vite.config?

[rulatir]

Is there a known solution that involves neither giving up on certain optimizations nor customizing (patching, rebuilding, etc.) other packages to make them not trigger the issue?

[Bilalkhan4086]

I was also getting the same issue like i.e.
Failed to fetch dynamically imported module
in development.

How fix it...

in vite.congfig.ts I added

export default defineConfig({
// All other configurations
optimizeDeps: {
exclude: ["blip-ds/loader"],
},
});

and restarted the app.
It worked for me 👍

[litenkod]

It finally worked, we had to rename enableImportInjection to experimentalImportInjection.

The stencil compiler indicated

Type '{ EnableImportInjection: true; }' is not assignable to type 'ConfigExtras'.
  Object literal may only specify known properties, and 'EnableImportInjection' does not exist in type 'ConfigExtras'.ts(2322)
stencil-public-compiler.d.ts(144, 5): The expected type comes from property 'extras' which is declared here on type 'StencilConfig'

The fix that finally worked and enabled us to import stencil components into a built vue application was:

Stencil.config.js

extras: {
    EnableImportInjection: true
}

Using:

• Vite 4.3.9
• Stencil 3.2.1

This worked for me in storybook-static 🙏

Before my components worked in storybook dev environment but didn’t work in storybook-static.
Storybook version 7.6 (React)

[sapphi-red]

I'll close this issue as it's something that the library needs to work on.

It seems stencil requires the library to be compiled with enableImportInjection: true to make it work with Vite.

About having a better message, let's track that in #13506.

[ruchirjainn]

three

Hello how did you solve this error can u plz help! thanks.