In Vite Dev Mode, module aliases do not work

[emanueleperuffo]

Reproduction

To setup:

• Go to https://stackblitz.com/edit/remix-run-remix-nwazbr?file=vite.config.ts,app%2Froutes%2F_index.tsx
• Run yarn install

To see the error:

• Run yarn run dev
• You'll see "Internal server error: Cannot use import statement outside a module"

To understand it's not aliasing:

• Replace react-native with react-native-web
• Run yarn run dev
• You'll see that the error is not shown anymore and the web page is rendered

To see that aliasing works in build mode (not development):

• Revert the changes made in the previous section and import from react-native instead of react-native-web
• Run yarn run build
• Run yarn run start
• You'll see that the error is not shown anymore and the web page is rendered

System Info

Stackblitz:

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.6.0 
    @remix-run/node: * => 2.6.0 
    @remix-run/react: * => 2.6.0 
    @remix-run/serve: * => 2.6.0 
    vite: ^5.0.0 => 5.1.1

My machine:

System:
    OS: Linux 6.7 NixOS 23.11 (Tapir) 23.11 (Tapir)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 3.97 GB / 15.36 GB
    Container: Yes
    Shell: 5.9 - /nix/store/10yx82dhv5p5rr9yjxhjs4rvkwiwc42y-zsh-5.9/bin/zsh
  Binaries:
    Node: 21.2.0 - /nix/store/iklfdn5l792z46dl5qq9zqzqsmp2m4m9-nodejs-21.2.0/bin/node
    Yarn: 3.6.4 - /nix/store/6mcifab1v6yxrnfy07jzs6w111crsm3l-yarn-1.22.19/bin/yarn
    npm: 10.2.3 - /nix/store/iklfdn5l792z46dl5qq9zqzqsmp2m4m9-nodejs-21.2.0/bin/npm
  Browsers:
    Firefox: 122.0

Used Package Manager

yarn

Expected Behavior

In Vite Dev Mode, modules should be aliased when defined in resolve.alias in vite.config.ts.

Actual Behavior

Modules are not aliased when running dev. They are instead properly aliased when running build.

I have discovered after some investigation that the errors happens in the vite plugin, precisely when running await viteDevServer.ssrLoadModule(serverBuildId);.

[cliffordfajardo]

I have discovered after some investigation that the errors happens in the vite plugin, precisely when running await viteDevServer.ssrLoadModule(serverBuildId); - @emanueleperuffo

If the underlying root cause is with vite.ssrLoadModule (havent dug into code myself), another potential fix is to adopt the new vite runtime API which is meant to replace vite.ssrLoadModule + has more benefits

Context:
https://twitter.com/cyco130/status/1757839117553926237

[emanueleperuffo]

I have tried using that by modifying the plugin.js file inside node_modules, but it did not help. The error was the same.

[hi-ogawa]

I think this is a same issue as this upstream issue:

• ssrLoadModule fails to respect preact/compat aliases, while the SSR bundle does respect preact/compat aliases vitejs/vite#15503 (comment)

When you have genuine react-native in your dependency, resolve.alias: { "react-native": "..." } currently doesn't kick in during Vite SSR.

This behavior is probably a bug on Vite, but their general recommendation is to use package manager based alias such as "react-native": "npm:react-native-web@..." as explained in the documentation https://vitejs.dev/config/shared-options.html#resolve-alias

I tried this approach here, but it looks like there's a hydration error, so it might take some more effort to actually integrate react-native-web...
https://stackblitz.com/edit/remix-run-remix-wb367m?file=package.json