[plugin:vite:import-analysis] Failed to resolve import "@..." from "src/...". Does the file exist?

[silenzium]

Describe the bug

Hello 👋

I just ran into an issue and could reproduce it with the latest template.
I use a custom registry for web components and import them to have code completion available and make my IDE happy.
The error I get is:

[plugin:vite:import-analysis] Failed to resolve import "@nectary/components/input" from "src/main.jsx". Does the file exist?

I already tried cachedChecks: false, according to this closed issue #15784 without luck.

Strange thing is that this was running until I removed the node_modules folder and yarn.lock file and did a fresh install. Looking into the local IDE history of my yarn.lock file, I see that I was always using latest version 5.3.1.

Thanks for looking into this.

Reproduction

https://stackblitz.com/edit/vitejs-vite-klgyum?file=main.js

Steps to reproduce

Set up a new project with the following commands:

yarn create vite my-vue-app --template react
yarn add @nectary/components 

Modify src/main.jsx to use custom registry and element:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { setNectaryRegistry } from '@nectary/components/utils'
import '@nectary/components/input'

setNectaryRegistry(window.customElements)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <sinch-input/>
    <App />
  </React.StrictMode>,
)

Run it..

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 11.16 GB / 31.75 GB
  Binaries:
    Node: 20.11.1 - ~\scoop\apps\nodejs-lts\current\node.EXE
    Yarn: 1.22.19 - ~\scoop\apps\yarn\current\bin\yarn.CMD
    npm: 10.8.0 - ~\scoop\apps\nodejs-lts\current\bin\npm.CMD
    pnpm: 9.1.1 - ~\scoop\apps\nodejs16\current\bin\pnpm.CMD
  Browsers:
    Edge: Chromium (126.0.2592.56)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.3.1
    vite: ^5.2.0 => 5.3.1

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-klgyum (Open reproduction)

[silenzium]

Found out that importing with .../index solves the issues but breaks my auto-completion again.
Adding /index.js works for both but is super ugly tbh..
Solved it now by not touching the imports but adding the following alias:

resolve: {
    alias: [
      {
        find: /^@nectary\/components\/(.*)$/,
        replacement: "@nectary/components/$1/index",
      },
    ],
  },

So my IDE is happy and vite as well 🎉

Still think this is a bug somehow, since it was working until today, but maybe not with vite itself 😕

[silenzium]

It is solved, problem was indeed the module I used. I was just confused by the error.