Incorrect resolving priority extensions (e.g. .web.tsx vs .tsx) in node_modules during optimizeDeps

[Bram-dc]

Describe the bug

There seems to be an issue with optimizeDeps.esbuildOptions.resolveExtensions when running Vite in dev mode during optimizing deps from node_modules.

I recently had to update my plugin (vite-plugin-react-native-web) with a hotfix. In react-native on web different files are imported using the .web.tsx file. The build tool has to prioritize .web.tsx above .tsx when searching the correct file to import in the file system. The optimizeDeps.esbuildOptions.resolveExtensions in previous versions worked perfectly for me. For files in my own ./src directory it still works fine, but when optimizing deps in node_modules the prioritized extensions seem to be ignored.

In my example project provided, you can test the bug by uncommenting lines 64-68 in rnw.ts (the hotfix). The package expo-image uses .web.tsx to import the correct file. Without this hotfix when running vite in dev mode it will fail.

When building in Vite, the files are always imported correctly.

Reproduction

https://github.com/Bram-dc/vite-react-native-web

Steps to reproduce

• npm install
• npm run dev

You can see in the chrome debugger that ExpoImage.tsx is incorrectly imported.

• Stop the dev server
• Uncomment lines 64-68 in rnw.ts
• Start the dev server again

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 2.99 GB / 15.78 GB
  Binaries:
    Node: 22.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react-swc: ^3.7.2 => 3.7.2
    vite: ^6.0.11 => 6.0.11

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.

[hi-ogawa]

The optimizeDeps.esbuildOptions.resolveExtensions in previous versions worked perfectly for me.

Can you provide more details on which version of which package was working?

[hi-ogawa]

I think I reproduced the issue with only esbuild https://stackblitz.com/edit/github-ktr747mh?file=repro.mjs. It looks like esbuild picks up expo-image/src/ExpoImage.tsx instead of expo-image/src/ExpoImage.web.tsx depending on specific resolveExtensions order. Can you check the expected behavior with esbuild side? (though they might appreciate reducing the repro further)

FYI, workaround seems to be to put all .web variants first:

    resolveExtensions: [
      // ⚠️ this doesn't work even though .tsx is after .web.tsx
      '.web.mjs',
      '.mjs',
      '.web.js',
      '.js',
      '.web.mts',
      '.mts',
      '.web.ts',
      '.ts',
      '.web.jsx',
      '.jsx',
      '.web.tsx',
      '.tsx',
      '.json',

      // ⚠️ this works
      // '.web.mjs',
      // '.web.js',
      // '.web.mts',
      // '.web.ts',
      // '.web.jsx',
      // '.web.tsx',
      // '.mjs',
      // '.js',
      // '.mts',
      // '.ts',
      // '.jsx',
      // '.tsx',
      // '.json',
    ],

[Bram-dc]

Yes indeed, very weird that the .web needs to come first above all. I will create a bugreport for esbuild is the problem lies there. If the problem lies with esbuild, then why does it work fine after vite build

[Bram-dc]

Nevermind, vite uses rollup then.

[Bram-dc]

Indeed the issue lies with esbuild: Bram-dc/vite-react-native-web@748a3f5. I will create a bug report there.