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

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

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

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

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

Try to use one of the library’s web components, like <bds-input />
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.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 26 (3 by maintainers)

Links to this issue

javascript - 504 (Outdated Optimize Dep) while using react-vite - Stack Overflow

Most upvoted comments

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"
    ],

Erudition on Apr 4, 2023

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? https://github.com/vitejs/vite/blob/e23f690dbf863cb197a28f0aad35234ae6dc7f6b/packages/vite/src/node/plugins/optimizedDeps.ts#L71-L74 We currently throw 504 here but in this case, reload won’t happen because it’s not a outdated non-entry point.

sapphi-red on Mar 16, 2023

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?

rulatir on Sep 18, 2023

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?

https://github.com/vitejs/vite/blob/e23f690dbf863cb197a28f0aad35234ae6dc7f6b/packages/vite/src/node/plugins/optimizedDeps.ts#L71-L74

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:

Open a new terminal on stackblitz
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?

heloineto on May 4, 2023

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!

heloineto on Mar 16, 2023

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

hecmocerJLL on Jul 31, 2023

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 on Jul 28, 2023

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']
  }

raythree on Jun 11, 2023

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

JordenLCH on Apr 27, 2023

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

xcanchal on Jul 31, 2023

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

xcanchal on Jul 28, 2023

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

glimmbo on May 26, 2023

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

DevYemi on Apr 6, 2023