Vite returns 504 Outdated Optimize Dep for non-existing resource

[alex-kinokon]

Describe the bug

Given the following dynamic import within a dependency located on localhost:3000/node_modules/.vite/deps/chunk-HCOQKIU7.js:

// node_modules/@blueprintjs/icons/lib/esnext/iconLoader.js
var defaultIconPathsLoader = async(name,size)=>{
    return (await import(/* webpackInclude: /\.js$/ */
    /* webpackMode: "lazy-once" */
    `./generated/${size}px/paths/${name}`)).default;
}

There are two problems:

1. The import path does not resolve correctly, because it’s no longer relative to the original module path. Duplicate of Dynamic imports with variables in a dependency are not processed at all #6179.
2. When vite fails to resolve the path, it returns an erroneous error message (504 Outdated Optimize Dep, please reload the page) instead of 404. The culprit code is here.

Reproduction

https://codesandbox.io/p/sandbox/hopeful-brattain-gz4per

Steps to reproduce

See CodeSandbox link above.

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 474.37 MB / 2.01 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

yarn

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.

[dominikg]

please provide a proper minimal reproduction as described in our issue template (codesandbox isn't really friendly for cloning or even just anonymous use)

Please provide a link via vite.new or a link to a repo that can reproduce the problem you ran into. npm create vite@latest and npm create vite-extra@latest (for SSR or library repros) can be used as a starter template. A minimal reproduction is required (Why?). If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided after 3 days, it will be auto-closed.

While at it, please update @blueprintjs/icons to their latest version, i didn't see the dynamic import you quoted in their latest release. The code you quoted isn't present in that from a quick search. Also check their issue tracker and documentation on how you are supposed to use it with vite.

If they really release packages that contain magic webpack import annotations to npm, they should document that this package can only be consumed with webpack.

[dominikg]

For a vite friendly alternative, check out unplugin-icons, unocss with preset icons or iconify.

[alex-kinokon]

For dynamic path problem, there’s already a reprod in the issue I cited, but that is not the main issue here.

This one is about the wrong error message. It gave me 504 outdated dep, so I purged cache and node_modules again and again to no avail. If it just gives me 404 I would know where to dig and isolate the problem. It wouldn’t have worked either way, but at least I would know what the real problem is.

[jackkav]

Adding the offending dependency to optimizeDeps.exclude list, seems to work.