TypeError: Failed to resolve module specifier "h3" after successful build for node-server preset

My app is able to build with

npm run build

npm run build

npm run build

npm run build, but my app is mostly not working once I run it. I see the following error in my console:

localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "h3". Relative references must start with either "/", "./", or "../".

localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "h3". Relative references must start with either "/", "./", or "../".

localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "h3". Relative references must start with either "/", "./", or "../".

localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "h3". Relative references must start with either "/", "./", or "../".

Since

h3

h3

h3

h3 is a dependency of Tanstack Start, I wanted to check here first to see if there is a potential issue with my build setup. Below is my app config:

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ["stream", "buffer", "process", "util"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
        h3: "/node_modules/h3/dist/index.mjs",
      },
    },
    optimizeDeps: {
      include: ["h3"],
    },
    build: {
      rollupOptions: {
        external: [/^node:.*/],
        output: {
          globals: {
            stream: "stream-browserify",
          },
        },
      },
    },
  },
  server: {
    preset: "node-server",
  }
});

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ["stream", "buffer", "process", "util"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
        h3: "/node_modules/h3/dist/index.mjs",
      },
    },
    optimizeDeps: {
      include: ["h3"],
    },
    build: {
      rollupOptions: {
        external: [/^node:.*/],
        output: {
          globals: {
            stream: "stream-browserify",
          },
        },
      },
    },
  },
  server: {
    preset: "node-server",
  }
});

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ["stream", "buffer", "process", "util"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
        h3: "/node_modules/h3/dist/index.mjs",
      },
    },
    optimizeDeps: {
      include: ["h3"],
    },
    build: {
      rollupOptions: {
        external: [/^node:.*/],
        output: {
          globals: {
            stream: "stream-browserify",
          },
        },
      },
    },
  },
  server: {
    preset: "node-server",
  }
});

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ["stream", "buffer", "process", "util"],
        globals: {
          Buffer: true,
          global: true,
          process: true,
        },
      }),
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
    resolve: {
      alias: {
        stream: "stream-browserify",
        h3: "/node_modules/h3/dist/index.mjs",
      },
    },
    optimizeDeps: {
      include: ["h3"],
    },
    build: {
      rollupOptions: {
        external: [/^node:.*/],
        output: {
          globals: {
            stream: "stream-browserify",
          },
        },
      },
    },
  },
  server: {
    preset: "node-server",
  }
});

still-lime•4/9/25, 3:48 PM

why configure those aliases and polyfills?

abstract-purpleOP•4/9/25, 4:36 PM

With the given app.config:

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
  },
  server: {
    preset: "node-server",
  },
});

import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
  },
  server: {
    preset: "node-server",
  },
});

I get this error:

✓ 7174 modules transformed.
✗ Build failed in 5.18s
[12:34:18 PM]  ERROR  ../../node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js (2:9): "Readable" is not exported by "__vite-browser-external", imported by "../../node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js".
file: /Users/edward/Dev/Herd/herd/node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js:2:9

1: import { ReadableStream } from "node:stream/web";
2: import { Readable } from "node:stream";
            ^
3: import { createControlledPromise } from "@tanstack/router-core";
4: function transformReadableStreamWithRouter(router, routerStream) {



 ERROR  Exited with code: 1                                                                                                                                                                            12:34:18 PM

    at CommandChild.pipedStdoutBuffer (/Users/edward/Dev/Herd/herd/node_modules/dax-sh/esm/mod.js:9392:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)



 ERROR  Exited with code: 1                                                                                                                                                                            12:34:18 PM

error: script "build" exited with code 1

✓ 7174 modules transformed.
✗ Build failed in 5.18s
[12:34:18 PM]  ERROR  ../../node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js (2:9): "Readable" is not exported by "__vite-browser-external", imported by "../../node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js".
file: /Users/edward/Dev/Herd/herd/node_modules/@tanstack/start-server-core/dist/esm/transformStreamWithRouter.js:2:9

1: import { ReadableStream } from "node:stream/web";
2: import { Readable } from "node:stream";
            ^
3: import { createControlledPromise } from "@tanstack/router-core";
4: function transformReadableStreamWithRouter(router, routerStream) {



 ERROR  Exited with code: 1                                                                                                                                                                            12:34:18 PM

    at CommandChild.pipedStdoutBuffer (/Users/edward/Dev/Herd/herd/node_modules/dax-sh/esm/mod.js:9392:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)



 ERROR  Exited with code: 1                                                                                                                                                                            12:34:18 PM

error: script "build" exited with code 1

still-lime•4/9/25, 4:41 PM

looks like you are calling some sever only functionality from the client

still-lime•4/9/25, 4:41 PM

e.g. in a loader or a beforeLoad

abstract-purpleOP•4/9/25, 4:51 PM

Oh OK, I am calling parseCookies in a try/catch that is executing on the frontend. I will try isolating that logic and see if my build works after that, will let you know

abstract-purpleOP•4/9/25, 5:10 PM

Can I use getCookiegetCookie in a loader, or will it cause the same issue?

still-lime•4/9/25, 5:10 PM

same issue

still-lime•4/9/25, 5:10 PM

beforeLoad and loader are isomorphic, that means they run on both the server and the client

still-lime•4/9/25, 5:11 PM

if you want something to always run on the server, you need to wrap it into a server function

still-lime•4/9/25, 5:11 PM

there is also the option to have functions that behave differently on client and server. if you need that, then use createIsormorphicFncreateIsormorphicFn

abstract-purpleOP•4/9/25, 5:14 PM

I think that is what I need.

Here is the use case:

On the server, I want to use a cookie which contains my Authorization header
On the client, I want to call a method which will give me my Authorization header

abstract-purpleOP•4/9/25, 5:15 PM

Where are the docs for this?

still-lime•4/9/25, 5:15 PM

no docs yet

still-lime•4/9/25, 5:16 PM

its easy though

import { createIsomorphicFn } from '@tanstack/react-start'

const getEcho = createIsomorphicFn()
  .server((input: string) => 'server received ' + input)
  .client((input) => 'client received ' + input)

import { createIsomorphicFn } from '@tanstack/react-start'

const getEcho = createIsomorphicFn()
  .server((input: string) => 'server received ' + input)
  .client((input) => 'client received ' + input)

abstract-purpleOP•4/9/25, 7:29 PM

This worked for me BTW, thank you!

Aabstract-purple This worked for me BTW, thank you!

rubber-blue•4/12/25, 6:12 PM

I wondering how did you access the headers or the cookies on the client?

Rrubber-blue I wondering how did you access the headers or the cookies on the client?

still-lime•4/12/25, 6:13 PM

you dont access them on the client, you need a server function for that

abstract-purpleOP•4/12/25, 11:44 PM

yeah i access cookies on the server and i have a function to access local storage for my header on the client

TypeError: Failed to resolve module specifier "h3" after successful build for node-server preset

Similar Threads

Similar Threads

Similar Threads