vite: Missing stacktrace on SSR import errors

[dcramer]

Reproduction

Had invalid default import for isbot, which was failing in entry.server.ts:

import isbot from "isbot";

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {
  if (isSitemapUrl(request)) return await sitemap(request, remixContext);

  return isbot(request.headers.get("user-agent"))
    ? handleBotRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
      )
    : handleBrowserRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
      );
}

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
    Memory: 10.22 GB / 15.57 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.0/bin/npm
    pnpm: 8.15.4 - ~/src/peated/node_modules/.bin/pnpm
    bun: 1.0.30 - ~/.bun/bin/bun
  Browsers:
    Chrome: 108.0.5359.124
  npmPackages:
    @remix-run/dev: ^2.8.1 => 2.8.1
    @remix-run/eslint-config: ^2.8.1 => 2.8.1
    @remix-run/express: ^2.8.1 => 2.8.1
    @remix-run/node: ^2.8.1 => 2.8.1
    @remix-run/react: ^2.8.1 => 2.8.1
    @remix-run/serve: ^2.8.1 => 2.8.1
    @remix-run/server-runtime: ^2.8.1 => 2.8.1
    vite: ^5.1.6 => 5.1.6

Used Package Manager

npm

Expected Behavior

Include some degree of a stacktrace to ensure the behavior is debuggable. It appears hidden within the Vite renderer, and its unclear if anything can be done about that.

Vite's SSR suggest you enrich the error with vite.ssrFixStacktrace, but I'm not familiar enough with their internals to know if that missing link is the issue here.

Actual Behavior

Unexpected Server Error

TypeError: __vite_ssr_import_4__.default is not a function

The error is swallowed inside of handleRequest (in @remix-run/express), so unable to diagnose further without reimplementing that (which I'm working on right now).

[dtrikannad]

I'm getting something similar at the same line of code in entry.server.ts. What is strange is that this works great while just running the following from the terminal, but can't debug through launch.json from within vscode. Not sure what the difference is.

npm run dev

The error I see in the browser when i load http://localhost:5173/ is:

Unexpected Server Error

TypeError: __vite_ssr_import_0__.jsxDEV is not a function

Here is my stacktrace:

TypeError: __vite_ssr_import_0__.jsxDEV is not a function
    at /Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:101:7
    at new Promise (<anonymous>)
    at handleBrowserRequest (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:98:10)
    at handleRequest (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:34:7)
    at handleDocumentRequestRR (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/server-runtime/dist/server.js:231:18)
    at process.processTicksAndRejections (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/lib/internal/process/task_queues.js:95:5)
    at async requestHandler (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/server-runtime/dist/server.js:108:18)
    at async nodeHandler (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/dev/dist/vite/plugin.js:837:27)
    at async /Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/dev/dist/vite/plugin.js:840:15 {stack: 'TypeError: __vite_ssr_import_0__.jsxDEV is no…les/@remix-run/dev/dist/vite/plugin.js:840:15', message: '__vite_ssr_import_0__.jsxDEV is not a function'}
TypeError: __vite_ssr_import_0__.jsxDEV is not a function
    at /Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:101:7
    at new Promise (<anonymous>)
    at handleBrowserRequest (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:98:10)
    at handleRequest (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/app/entry.server.tsx:34:7)
    at handleDocumentRequestRR (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/server-runtime/dist/server.js:284:20)
    at process.processTicksAndRejections (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/lib/internal/process/task_queues.js:95:5)
    at async requestHandler (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/server-runtime/dist/server.js:108:18)
    at async nodeHandler (/Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/dev/dist/vite/plugin.js:837:27)
    at async /Users/deeptrikannad/Documents/Business_Ideas/Acceledgy/Development/ai-research/extraction/node_modules/@remix-run/dev/dist/vite/plugin.js:840:15 {stack: 'TypeError: __vite_ssr_import_0__.jsxDEV is no…les/@remix-run/dev/dist/vite/plugin.js:840:15', message: '__vite_ssr_import_0__.jsxDEV is not a function'}

Here is my envinfo output:

  System:
    OS: macOS 14.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 14.25 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.4
  npmPackages:
    @langchain/community: ^0.0.43 => 0.0.43 
    @langchain/openai: ^0.0.25 => 0.0.25 
    @prisma/client: ^5.11.0 => 5.11.0 
    @remix-run/dev: ^2.8.1 => 2.8.1 
    @remix-run/node: ^2.8.1 => 2.8.1 
    @remix-run/react: ^2.8.1 => 2.8.1 
    @remix-run/serve: ^2.8.1 => 2.8.1 
    @tailwindcss/typography: ^0.5.12 => 0.5.12 
    @types/react: ^18.2.73 => 18.2.73 
    @types/react-dom: ^18.2.23 => 18.2.23 
    @typescript-eslint/eslint-plugin: ^7.4.0 => 7.4.0 
    @typescript-eslint/parser: ^7.4.0 => 7.4.0 
    autoprefixer: ^10.4.19 => 10.4.19 
    daisyui: ^4.9.0 => 4.9.0 
    eslint: ^8.57.0 => 8.57.0 
    eslint-import-resolver-typescript: ^3.6.1 => 3.6.1 
    eslint-plugin-import: ^2.29.1 => 2.29.1 
    eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0 
    eslint-plugin-react: ^7.34.1 => 7.34.1 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 
    isbot: ^5.1.3 => 5.1.3 
    langchain: ^0.1.30 => 0.1.30 
    mammoth: ^1.7.1 => 1.7.1 
    officeparser: ^4.0.8 => 4.0.8 
    pdf-parse: ^1.1.1 => 1.1.1 
    postcss: ^8.4.38 => 8.4.38 
    prisma: ^5.11.0 => 5.11.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    remix-auth-google: ^2.0.0 => 2.0.0 
    remix-auth-socials: ^2.0.6 => 2.0.6 
    tailwindcss: ^3.4.3 => 3.4.3 
    ts-node: ^10.9.2 => 10.9.2 
    typescript: ^5.4.3 => 5.4.3 
    vite: ^5.2.7 => 5.2.7 
    vite-tsconfig-paths: ^4.3.2 => 4.3.2 

[dtrikannad]

I do have a debug work around which is a pain in the @$$, but it works. I can run npm run dev from the commmand line and then just attach the debugger manually.

[stevan-borus]

Just stumbled upon this issue in my app..

Try

import { isbot } from 'isbot';

instead of

import isbot from 'isbot';

It resolved the problem for me