remix-serve production build: Cannot read properties of undefined (reading 'unstable_singleFetch') | Remix | Page 1

craggy wave May 9, 2024, 4:52 PM

Anyone else having trouble building a production build with Remix 2.9.1? Not using single fetch, but I get this:

$ NODE_OPTIONS='--import tsx' yarn remix vite:build
...build...
$ yarn remix-serve build/server/index.js

/src/node_modules/@remix-run/serve/dist/cli.js:114
    nativeFetch: build.future.unstable_singleFetch
                              ^
TypeError: Cannot read properties of undefined (reading 'unstable_singleFetch')
    at run (/src/node_modules/@remix-run/serve/dist/cli.js:114:31)

vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev'
import { installGlobals } from '@remix-run/node'
import react from '@vitejs/plugin-react'
import { remixDevTools } from 'remix-development-tools'
import viteEnvOnly from 'vite-env-only'
import inspectPlugin from 'vite-plugin-inspect'
import topLevelAwait from 'vite-plugin-top-level-await'
import tsconfigPaths from 'vite-tsconfig-paths'

import { inPlaywright, inVitest } from '@myorg/test-utils'

import type { ConfigEnv, UserConfig } from 'vite'

const port = 3000

export default function defineConfig({ command, mode }: ConfigEnv): UserConfig {
  installGlobals()

  return {
    build: {
      minify: true,
      sourcemap: true,
    },
    clearScreen: false,
    define: {
      // https://vitest.dev/guide/in-source#production-build
      'import.meta.vitest': 'undefined',
    },
    server: {
      port,
    },
    ssr: {
      noExternal: [/react-use/],
    },
    plugins: [
      viteEnvOnly(),
      topLevelAwait(),
      !inVitest() && !inPlaywright() && inspectPlugin(),
      tsconfigPaths(),
      !inVitest() &&
        !inPlaywright() &&
        remixDevTools({
          client: {
            defaultOpen: false,
            panelLocation: 'bottom',
            position: 'bottom-left',
            requireUrlFlag: true,
            urlFlag: 'rdt',
          },
          includeInProd: false,
        }),
      !inVitest()
        ? remix({
            appDirectory: 'src',
            ignoredRouteFiles: ['**/*.test.{js,jsx,ts,tsx}', '**/*.css'],
            serverModuleFormat: 'esm',
          })
        : react(),
    ],
  }
}

Aye, this also happens on Remix 2.9.0. I'm using Vite 5.2.11 and Node 20.12.2, BTW.

Downgrading back to 2.8.1 I get a different message (root path required), which seems some folks are getting here as well:

$ yarn remix-serve build/server/index.js

/src/node_modules/serve-static/index.js:40
    throw new TypeError('root path required')
          ^
TypeError: root path required
    at Function.serveStatic [as static] (/src/node_modules/serve-static/index.js:40:11)
    at run (/src/node_modules/@remix-run/serve/dist/cli.js:129:57)

I thought I tested building production on vite and don't believe I saw any issues, but now 🤷‍♂️

And... I think I figured it out. Seems to be a problem with vite-plugin-top-level-await. After dumbing my vite.config.ts file down step by step, removing that plugin allows Remix 2.8.1 and 2.9.1 to build / run successfully (also had to remove all of my top-level awaits, of course)

#remix-serve production build: Cannot read properties of undefined (reading 'unstable_singleFetch')