"[vite] Named export 'Response' not found." even though installGlobals called from vite.config.ts in dev mode

[mogarick]

I've just upgraded from v1 to v2. Using Remix server clasical works without issues but when trying to use vite I'm getting this "Named export 'Response' not found" even though I added installGlobals to vite.config.ts.

I was using node 18. I upgraded to Node 20 but got the same error.
I'm getting the error for th "remix vite:dev" command. It's the first part I'm trying to migrate to vite.

I hope someone can help me or give me a hint.

NOTE: If I install node-fetch and use it for all de Response parts used in my loaders or actions the error goes away but Isn't it supposed to work without needing to do that and just by adding the installGlobals function call?

Here is my vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

import { createRoutesFromFolders } from "@remix-run/v1-route-convention";

installGlobals();

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    remix({
      //Se quita el . para ignore cualquier archivo al momento de intentar aplicar la convención de non nested routes y así deje la funcionalidad de V1, con la parte routes(...)
      ignoredRouteFiles: ["**/*"],
      
      future: {
       
      },
      routes(defineRoutes) {
        // uses the v1 convention, works in v1.15+ and v2
        return createRoutesFromFolders(defineRoutes);
      },
      
    }),
    tsconfigPaths(),
  ],
});

Here is my package.json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix vite:build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "remix vite:dev",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
    "start": "remix-serve ./build/server/index.js",
    "test": "jest",
  },
  "type": "module",
  "dependencies": {
    "@headlessui/react": "^2.1.2",
    "@react-pdf/renderer": "^3.0.0",
    "@remix-run/node": "2.10.2",
    "@remix-run/react": "2.10.2",
    "@remix-run/router": "^1.8.0",
    "@remix-run/serve": "2.10.2",
    "@remix-run/v1-route-convention": "^0.1.4",
    "csv": "^6.2.0",
    "date-fns": "^2.29.1",
    "date-fns-tz": "^1.3.7",
    "debug": "^4.3.4",
    "lodash.groupby": "^4.6.0",
    "lodash.isequal": "^4.5.0",
    "mongodb": "^4.8.1",
    "nanoid": "^3.3.4",
    "object-path": "^0.11.8",
    "objects-to-csv": "^1.3.6",
    "qs": "^6.11.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "sort-by": "^0.0.2",
    "tiny-invariant": "^1.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-typescript": "^7.18.6",
    "@remix-run/dev": "2.10.2",
    "@remix-run/eslint-config": "2.10.2",
    "@tailwindcss/forms": "^0.5.3",
    "@types/csv-stringify": "^3.1.0",
    "@types/jest": "^28.1.6",
    "@types/lodash.groupby": "^4.6.7",
    "@types/lodash.isequal": "^4.5.6",
    "@types/objects-to-csv": "^1.3.3",
    "@types/qs": "^6.9.7",
    "@types/react": "^17.0.47",
    "@types/react-dom": "^17.0.17",
    "@types/sort-by": "^1.2.3",
    "autoprefixer": "^10.4.12",
    "babel-jest": "^28.1.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "concurrently": "^7.4.0",
    "eslint": "^8.20.0",
    "jest": "^28.1.3",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "^5.5.3",
    "vite": "^5.3.3",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "engines": {
    "node": ">=20"
  }
}

Here is the tscongi.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "./domain/types/sort-by.d.ts"
  ],
  "compilerOptions": {
    "types": ["@remix-run/node", "vite/client"],
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/domain/*": ["./domain/*"],
      "~/utils/*": ["./utils/*"],
      "~/app/*": ["./app/*"],
      "~/uic/*": ["./uic/*"]
    },
    "noEmit": true
  }
}

Here is the stack trace I'm getting in the browser

[akomm]

You shouldn't be importing Response at all, because its globally available, once you use the installGlobals

[mogarick]

Thank you @akomm. :)

Now I'm getting Typescript complaining but it appears more related to my VSCODE config. If it doesn't find the import it assumes the use of a Response global object but looks like it is considering the Response object for web. Do you think it's effectively a vscode TS engine issue or something elese?

Thank you in advance.

[akomm]

You are passing it node ReadableStream, its not the same as web standard ReadableStream.

TS Playground

[akomm]

Just for reference. Response body is itself a web ReadableStream. Both the one you can instantiate (new) or for example get via web fetch. I recommend check the BodyInit type and the supported types. Passing through stream if possible is good for non blocking processing. Other input types require "collecting" data before sending the response.