(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 <LessonDisplay> 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.

[neviaumi]

I have seem the similar problems and solution i use was try boundary the @remix-run/node

by create remix-run.node.server.ts file and contain below in the file

export { json } from "@remix-run/node"

and your route file use the file above instead of use @remix-run/node directly.

This way can make sure Vite know it was server only file cleanly .

[stephen776]

Also seeing this issue on 2.14.0 and swapping all deprecated json for new data helper. Single Fetch and unstable_RouteConfig are enabled

[boedy]

Ran into the same issue yesterday. This article helped me fix it: https://dev.to/boostup/uncaught-referenceerror-process-is-not-defined-12kg

[dustineichler]

Also seeing this:

remix v2.16.0 vite vite/5.2.11 darwin-arm64 node-v21.1.0

on:

import { json } form "@remix-run/node"

Console error:

Uncaught ReferenceError: process is not defined
    js util.js:109
    __require chunk-QGSYD46Z.js:12
    js index.js:2
    __require chunk-QGSYD46Z.js:12
    node_modules @remix-run_node.js:27315
    __require chunk-QGSYD46Z.js:12
    node_modules @remix-run_node.js:27503
    __require chunk-QGSYD46Z.js:12
    <anonymous> 

Replaced deprecated import with:

return new Response(
    JSON.stringify({})
)

[github-actions[bot]]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!