(ReferenceError: process is not defined) on Dev Server when using { json } "@remix-run/node"

[ivoGanev]

Reproduction

I couldn't find any related topics or bug reports about this issue. I've got a very simple setup where I got the route subject.$subjectId.tsx looks like this

export default function LessonPage() {
    return (
        <>
            <LessonDisplay />
        </>
    )
}

and the component located at app/components/LessonDisplay.tsx

export async function loader() {
  return json({any: "thing"});
}

// export async function loader() {
//   return new Response(JSON.stringify({ any: "thing" }))
// }

export default function LessonDisplay() {
  return (
    <>
    </>
  );
}

On Dev server, if I access the page through the url I get util.js:109 Uncaught ReferenceError: process is not defined at node_modules/util/util.js (util.js:109:1) at require (chunk-QGSYD46Z.js?v=96f51caf:12:50) at node_modules/stream-slice/index.js (index.js:2:12) at __require (chunk-QGSYD46Z.js?v=96f51caf:12:50) at node_modules/@remix-run/node/dist/upload/fileUploadHandler.js (fileUploadHandler.js:23:19) at require (chunk-QGSYD46Z.js?v=96f51caf:12:50) at node_modules/@remix-run/node/dist/index.js (index.js:17:25) at __require (chunk-QGSYD46Z.js?v=96f51caf:12:50) at index.js:99:2

If I try to use Link component on that route, the root page just refreshes and it doesn't even let me visit the subject.$subjectId.tsx route. I don't see this problem when using JSON.stringify. So for example this code just works fine.

//export async function loader() {
  //return json({any: "thing"});
//}

export async function loader() {
   return new Response(JSON.stringify({ any: "thing" }))
}

export default function LessonDisplay() {
  return (
    <>
    </>
  );
}

This happens only on dev. If I build and start it all works just fine

System Info

Windows 11, any browser, latest Remix

Used Package Manager

npm

Expected Behavior

I would not expect to get this error

Actual Behavior

See the reproduction notes

[MetaMmodern]

I'm getting same thing, doesn't look like it breaks anything though in my case.. doing json return in an action which is not being called upon page load, I think that's why my case is not breaking

[Nemikolh]

I'm seeing a similar issue and in my case it's caused by the vite:esbuild plugin that does not remove the import to @remix-run/node.

I confirmed this by adding the vite-plugin-inspect to my vite config:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import Inspect from 'vite-plugin-inspect';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [remix(), tsConfigPaths(), Inspect()],
});

On a simple page test.tsx, such as:

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

export async function loader({ request }: LoaderFunctionArgs) {
  return null;
}

export default function Page() {
  return (
    <div className="flex h-screen w-full items-center justify-center px-4">
      A test page
    </div>
  );
}

This is what I see:

However, on a fresh project (see https://stackblitz.com/edit/remix-run-node-vite-esbuild-bug), the import is correctly elided:

I'm wondering if there's a way to know which version of esbuild my project is using. After adding drizzle-kit to my project, I have now an additional version.

Could also be a tsconfig.json issue. I'll also look into that and come back with my findings in case it helps anyone.

[Nemikolh]

Oh I found my issue after printing the options provided to esbuild. I had set "verbatimModuleSyntax": true in my tsconfig.json but I had misunderstood this option.

Re-reading the docs on this field, it means that doing this:

import { type xyz } from "xyz";

does not erase the import, while doing this:

import type { xyz } from "xyz";

does under this option.

So this isn't a bug with esbuild or remix, it's me first adding importsNotUsedAsValues, then getting a suggestion to use the new verbatimModuleSyntax instead and then ending up here because I was getting a process is not defined error.

Except that I only noticed that much later when realizing that HMR was no longer working.