T
TanStackā€¢6mo ago
like-gold

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

My app is able to build with 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 "../".
Since 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",
  }
});
11 Replies
foreign-sapphire
foreign-sapphireā€¢6mo ago
why configure those aliases and polyfills?
like-gold
like-goldOPā€¢6mo ago
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
foreign-sapphire
foreign-sapphireā€¢6mo ago
looks like you are calling some sever only functionality from the client e.g. in a loader or a beforeLoad
like-gold
like-goldOPā€¢6mo ago
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 Can I use getCookie in a loader, or will it cause the same issue?
foreign-sapphire
foreign-sapphireā€¢6mo ago
same issue beforeLoad and loader are isomorphic, that means they run on both the server and the client if you want something to always run on the server, you need to wrap it into a server function there is also the option to have functions that behave differently on client and server. if you need that, then use createIsormorphicFn
like-gold
like-goldOPā€¢6mo ago
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 Where are the docs for this?
foreign-sapphire
foreign-sapphireā€¢6mo ago
no docs yet šŸ™‚ 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)
like-gold
like-goldOPā€¢6mo ago
This worked for me BTW, thank you!
fascinating-indigo
fascinating-indigoā€¢5mo ago
I wondering how did you access the headers or the cookies on the client?
foreign-sapphire
foreign-sapphireā€¢5mo ago
you dont access them on the client, you need a server function for that
like-gold
like-goldOPā€¢5mo ago
yeah i access cookies on the server and i have a function to access local storage for my header on the client

Did you find this page helpful?