SSR: Cannot find module 'react'

[dennispost99]

Description

I'm currently trying to set up prerendering with Vite and Preact and it always fails when I want to use the ssr plugin in combination with React libraries.
To limit the problem I created a new project again with npm init preact, then added a React UI library and just imported one component.

Now when I start the application and navigate to the home page I get the following error:

23:25:43 [vite-plugin-ssr][request(1)] HTTP request: /
23:25:44 [vite][request(1)] Error when evaluating SSR module /pages/index/index.page.tsx: failed to import "@mui/material"
|- Error: Cannot find module 'react'
Require stack:
- D:\repos\preact-test\node_modules\@mui\utils\isMuiElement.js
- D:\repos\preact-test\node_modules\@mui\utils\index.js
- D:\repos\preact-test\node_modules\@mui\material\node\styles\index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (D:\repos\preact-test\node_modules\@mui\utils\isMuiElement.js:7:37)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (D:\repos\preact-test\node_modules\@mui\utils\index.js:297:44)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (D:\repos\preact-test\node_modules\@mui\material\node\styles\index.js:278:14)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (D:\repos\preact-test\node_modules\@mui\material\node\index.js:995:15)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at Loader.import (internal/modules/esm/loader.js:178:24)
    at nodeImport (file:///D:/repos/preact-test/node_modules/vite/dist/node/chunks/dep-df561101.js:56019:17)
    at ssrImport (file:///D:/repos/preact-test/node_modules/vite/dist/node/chunks/dep-df561101.js:55912:24)
    at eval (D:/repos/preact-test/pages/index/index.page.tsx:3:44)
    at instantiateModule (file:///D:/repos/preact-test/node_modules/vite/dist/node/chunks/dep-df561101.js:55974:9)

My page

import { Box } from '@mui/material';

export function Page() {
	return (
		<div>
			<Box>
				Text I want to display
			</Box>
		</div>
	);
}

Without SSR everything works fine.

Here are my vite.config.ts and package.json:

vite.config.ts

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
import ssr from 'vite-plugin-ssr/plugin';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [preact(), ssr({ prerender: true })],
	resolve: {
		alias: {
			"react-dom/test-utils": "preact/test-utils",
			"react-dom": "preact/compat",     // Must be below test-utils
			"react/jsx-runtime": "preact/jsx-runtime",
			react: "preact/compat",
		},
	}
});

package.json

{
	"name": "example",
	"private": true,
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview"
	},
	"dependencies": {
		"@emotion/react": "^11.11.1",
		"@emotion/styled": "^11.11.0",
		"@mui/icons-material": "^5.14.3",
		"@mui/material": "^5.14.4",
		"preact": "^10.16.0",
		"preact-render-to-string": "^6.2.0"
	},
	"devDependencies": {
		"@preact/preset-vite": "^2.5.0",
		"eslint": "^8.47.0",
		"eslint-config-preact": "^1.3.0",
		"typescript": "^5.1.6",
		"vite": "^4.3.2",
		"vite-plugin-ssr": "^0.4.135"
	}
}

I added the resolve.alias section later to the vite.config.ts, but that had no effect.

[brillout]

If you want the react alias to apply to MUI then you have to add MUI to ssr.noExternal.

[brillout]

Create a minimal reproduction; I'll have a look at it.

[dennispost99]

Done. https://github.com/dennispost99/vite-ssr-reproduction

[brillout]

Fork with pnpm lock file: https://github.com/brillout/vps-preact-mui.

[brillout]

@dennispost99 See vitejs/vite#14158. In the meantime, a workaround you can try is to manually apply the alias to node_modules/@mui/ yourself; quite ugly, but I don't see another option here.