"verbatimModuleSyntax": true causes import {type} from '@remix-run/node' to run on the browser

[justintoman]

Reproduction

https://github.com/justintoman/remix-node-bug

Copy/pasted from the README.md in that repo 👆

1. npm create vite@latest
   • Pick React and Remix
2. In tsconfig.json, add "verbatimModuleSyntax": true
3. In _index.tsx change the import type for the @remix-run/node import to be inside the braces
   • ❌import type { MetaFunction } from "@remix-run/node";
   • ✅import { type MetaFunction } from "@remix-run/node";

Steps to reproduce

1. npm install
2. npm run dev
3. Go to http://localhost:5173/
4. Open the browser console and see:

@remix-run_node.js?v=e931bf82:1543 Uncaught ReferenceError: process is not defined
    at node_modules/util/util.js (@remix-run_node.js?v=e931bf82:1543:5)
    at __require (chunk-WXXH56N5.js?v=4a3845ee:12:50)
    at node_modules/stream-slice/index.js (@remix-run_node.js?v=e931bf82:7121:16)
    at __require (chunk-WXXH56N5.js?v=4a3845ee:12:50)
    at node_modules/@remix-run/node/dist/upload/fileUploadHandler.js (@remix-run_node.js?v=e931bf82:7318:23)
    at __require (chunk-WXXH56N5.js?v=4a3845ee:12:50)
    at node_modules/@remix-run/node/dist/index.js (@remix-run_node.js?v=e931bf82:7506:29)
    at __require (chunk-WXXH56N5.js?v=4a3845ee:12:50)
    at @remix-run_node.js?v=e931bf82:7608:16

System Info

System:
    OS: macOS 14.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 106.95 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.4.0 - ~/.nvm/versions/node/v20.11.1/bin/npm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.3.1
  npmPackages:
    @remix-run/dev: ^2.8.0 => 2.8.0 
    @remix-run/node: ^2.8.0 => 2.8.0 
    @remix-run/react: ^2.8.0 => 2.8.0 
    @remix-run/serve: ^2.8.0 => 2.8.0 
    vite: ^5.1.0 => 5.1.4

Used Package Manager

npm

Expected Behavior

@remix-run/node should not make it into the code run by the browser

Actual Behavior

It does get into the browser, which causes an error when process doesn't exist.

[justintoman]

It looks like if there's additional non-type things in the import, then the bug doesn't happen.

E.g.

import {json, type LoaderFunctionArgs} from '@remix-run/node'`;

That doesn't seem to do it. It's only when there's only type imports and they're inside the braces. I know it's potentially silly to write it that way, but this happened in my project after I refactored a route to still need LoaderFunctionArgs but it no longer needed to import json and redirect.

The import used to be

import {json, redirect, type LoaderFunctionArgs} from '@remix-run/node';

And then after removing those two, it became

import {type LoaderFunctionArgs} from '@remix-run/node';

In any case, this still seems like a bug. But hopefully this will help other people that run into it.

1. You can either disable "verbatimModuleSyntax"
2. Or you can change your import statements to have the type on the outside of the braces.

[ziimakc]

Supper annoying issue which for me doesn't give any errors except that route navigation doesn't work.