Error when using Paper from MUI with prerender and only in Production

[teukuridho]

I got the following error when using Paper from MUI after building for production with setting prerender: true

(node:12166) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/teukuridho/Documents/Works/PersonalWorks/vike-unilever-ert/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/Paper/index.js:3
export { default } from './Paper';
^^^^^^

SyntaxError: Unexpected token 'export'

This is the piece of my code

import Paper from '@mui/material/Paper';
...
<TableContainer component={Paper}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>No</TableCell>
...

I have followed https://vike.dev/broken-npm-package#workaround;

Change exports

import PaperXD from '@mui/material/Paper';
// @ts-ignore
const Paper = PaperXD.default

Settings cjsInterop

cjsInterop({
        dependencies: [
          // Add problematic npm package here
          "@mui/icons-material/Menu",
          "@mui/material/Paper",
          "@mui/icons-material/Edit",
        ]
    }),

Settings noExternal

ssr: {
    noExternal: ['@mui/material/Paper']
  }

Nothing works; how do I resolve this? thanks 🙏

[brillout]

Minimal reproduction welcome and I'll have a look at it.

[teukuridho]

well this is kinda silly,
In my main project, I imported the Paper with import Paper from '@mui/material/Paper'; based on MUI documentation and got the error with prerendered production
In test project I imported this way import { Paper } from "@mui/material"; and it ran without error with prerendered production

don't know how this works, anyway if you want to have a look, this is the repo: https://github.com/teukuridho/vike-react-paper-mui-test

[teukuridho]

I have updated the repo https://github.com/teukuridho/vike-react-paper-mui-test with the reproduction steps

[brillout]

https://github.com/brillout/vike-with-mui

[teukuridho]

Thank you for taking time.
It works, but when I set prerender: true in ssr in vite.config.ts, it still returns this error

(node:58271) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
1.0_@[email protected][email protected][email protected]/node_modules/@mui/material/Paper/index.js:3
export { default } from './Paper';

A solution I have found is to properly import it Paper like this import { Paper } from "@mui/material";, and build and no errors get thrown. Maybe this is just a Vite thing, not Vike

[brillout]

I further improved the DX around all that.

Let me know if you still have issues or questions.