Vite eats proper error messages and replaces them with just [vite] Error when evaluating SSR module

[loxs]

Describe the bug

I am trying to build a website with vite-plugin-ssr. It's very hard to work because I don't actually get proper error messages in my console. Here is the discussion that initiated this bug report: vikejs/vike#743

CC @brillout

Reproduction

https://github.com/loxs/vite-not-helpful-error-messages

Steps to reproduce

This is just a new project created via pnpm create vite-plugin-ssr@lates, then enabling SSR in vite config.
I have another commit to introduce a bug in the code: https://github.com/loxs/vite-not-helpful-error-messages/commit/712e1a2ef69650431de44afc5e8cec0da3a26e9a

If you run the project via pnpm run dev and visit http://localhost:3000
You will see something like the error message here: vikejs/vike#743

It doesn't actually contain any useful debug info

System Info

System:
    OS: macOS 12.6.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 134.80 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 111.1.49.128
    Chrome: 111.0.5563.110
    Firefox: 111.0
    Safari: 16.3
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.1.0
    vite: ^4.0.3 => 4.2.1

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

The Error when evaluating SSR module message is output here.

vite/packages/vite/src/node/ssr/ssrModuleLoader.ts

Lines 205 to 226 in 1dfecc8

	} catch (e) {
	mod.ssrError = e
	if (e.stack && fixStacktrace) {
	ssrFixStacktrace(e, moduleGraph)
	}
	server.config.logger.error(
	colors.red(
	`Error when evaluating SSR module ${url}:` +
	(e.importee ? ` failed to import "${e.importee}"\n` : '\n'),
	),
	{
	timestamp: true,
	clear: server.config.clearScreen,
	error: e,
	},
	)
	delete e.importee
	throw e
	}

The error is rethrown here (throw e) and then be thrown through ssrLoadModule.
If this error isn't output anywhere, the error message won't be shown.

Maybe vite-plugin-ssr does something like catch {} somewhere?

[brillout]

then be thrown through ssrLoadModule.

That's what VPS expects, but that doesn't actually seem to be the case here.

I've updated the reproduction with helpful debug logs. As you can see the errors aren't thrown by await ssrLoadModule(). Seems like Vite is swallowing them?

[brillout]

Seems like it's a Vite regresssion: when pinning to vite@4.0.3 the errors without stack trace are replaced with the original error including its stack trace.

(On a tangent: while the original error is much better, it isn't that helpful for most users either. I'm thinking maybe some kind of extra logged hint from Vite may help users that aren't that familiar with CJS/ESM compatibility problems.)

[sapphi-red]

That's what VPS expects, but that doesn't actually seem to be the case here.

I digged down a bit more. It seems the error is thrown to this line.
https://github.com/brillout/vite-plugin-ssr/blob/49021e8045591d793fb785127c4a1650d44df9ad/vite-plugin-ssr/shared/getPageFiles/parseGlobResults.ts#L50
Then, it is catched here.
https://github.com/brillout/vite-plugin-ssr/blob/49021e8045591d793fb785127c4a1650d44df9ad/vite-plugin-ssr/node/runtime/renderPage.ts#L125-L127

Seems like it's a Vite regresssion: when pinning to vite@4.0.3 the errors without stack trace are replaced with the original error including its stack trace.

Yes, there was a regression (#12322). I think #12324 has fixed that. Though, #12324 removes the stacktrace from the log.

[bluwy]

Though, #12324 removes the stacktrace from the log.

I thought throwing the error with the stack would log the stack too. If it doesn't, maybe we should bring it back 🤔 Though I think that might log double error messages.

[brillout]

I found the culprit: the error is being swallowed because viteDevServer.config.logger.hasErrorLogged(err) returns true but it should return false.

I've udpated the reproduction with new debug logs.

[sapphi-red]

Ah, I see.

hasErrorLogged(true) returns true because we are passing e here.

vite/packages/vite/src/node/ssr/ssrModuleLoader.ts

Line 220 in 1dfecc8

error: e,

So I guess we should bring back stack trace message here, or we shouldn't pass e.

[sun0day]

It seems #12324 forgot to test the error output after committing the newly reviewed code. I am going to fix that.

[brillout]

It's actually very helpful that the user land stack trace is logged. Maybe Vite can wrap the original error with that additional information.

Error while evaluating SSR module
    at /node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js
    at /pages/index/index.page.tsx
ReferenceError: module is not defined
    at eval (/node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js:8:3)
    at instantiateModule (file:///home/rom/tmp/vite-not-helpful-error-messages/node_modules/.pnpm/vite@4.2.1_@types+node@18.15.10/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:15)

While the first part is the user land stack trace:

Error while evaluating SSR module
    at /node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js
    at /pages/index/index.page.tsx

And the second part is the actual error, including the Vite land stack trace:

ReferenceError: module is not defined
    at eval (/node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js:8:3)
    at instantiateModule (file:///home/rom/tmp/vite-not-helpful-error-messages/node_modules/.pnpm/vite@4.2.1_@types+node@18.15.10/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:15)

To avoid problems with viteDevServer.config.logger.hasErrorLogged(err), the first part is prepended to originalError.message so that it's all only one Error.

In the future, Vite could add further information such as:

  Error while evaluating SSR module
      at /node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js
      at /pages/index/index.page.tsx
+ The following error seems to indicate a ESM-CJS compatibility problem, see https://vitejs.dev/cjs
  ReferenceError: module is not defined
      at eval (/node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-dev-runtime.js:8:3)
      at instantiateModule (file:///home/rom/tmp/vite-not-helpful-error-messages/node_modules/.pnpm/vite@4.2.1_@types+node@18.15.10/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:15)

[sun0day]

We do show the origin importer's entry, but only for the dynamicImport

vite/packages/vite/src/node/ssr/ssrModuleLoader.ts

Lines 212 to 215 in 9697e64

	server.config.logger.error(
	colors.red(
	`Error when evaluating SSR module ${url}:` +
	(e.importee ? ` failed to import "${e.importee}"\n` : '\n'),