Build failed with cloudfare/next-on-pages

[itsminh99]

I setup NextJS + MUI V5 + cloudfare/next-on-pages(link) then build failed when using using _app.tsx and _document.tsx in example link: https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript/pages.

`
info - Collecting page data...

16:02:47.297 | ▲
16:02:48.060 | ▲ evalmachine.:1341
16:02:48.060 | ▲ var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
16:02:48.089 | ▲ ^
16:02:48.089 | ▲
16:02:48.090 | ▲ ReferenceError: document is not defined
16:02:48.090 | ▲ at createCache (evalmachine.:1341:21)
16:02:48.090 | ▲ at createEmotionCache (evalmachine.:109:56)
16:02:48.090 | ▲ at Object.8139 (evalmachine.:668:71)
16:02:48.090 | ▲ at webpack_require (evalmachine.:25:42)
16:02:48.090 | ▲ at Object.5270 (evalmachine.:30:20)
16:02:48.090 | ▲ at webpack_require (evalmachine.:25:42)
16:02:48.091 | ▲ at webpack_exec (evalmachine.:355:48)
16:02:48.091 | ▲ at evalmachine.:356:56
16:02:48.091 | ▲ at Function.webpack_require.O (evalmachine.:63:23)
16:02:48.091 | ▲ at evalmachine.:357:56
16:02:48.091 | ▲
16:02:48.091 | ▲
16:02:48.091 | ▲ > Build error occurred
16:02:48.092 | ▲
16:02:48.092 | ▲ Error: Failed to collect page data for /abc
16:02:48.092 | ▲ at /opt/buildhome/repo/node_modules/next/dist/build/utils.js:916:15
16:02:48.092 | ▲ at processTicksAndRejections (internal/process/task_queues.js:95:5) {
16:02:48.092 | ▲ type: 'Error'
16:02:48.092 | ▲ }
16:02:48.092 | ▲

info - Collecting page data...

15:56:00.281 | ▲
15:56:00.924 | ▲ evalmachine.:3525
15:56:00.924 | ▲ var asyncWrite = true && ['v0.10', 'v0.9.'].indexOf(process.version.slice(0, 5)) > -1 ? setImmediate : pna.nextTick;
15:56:00.924 | ▲ ^
15:56:00.925 | ▲
15:56:00.925 | ▲ TypeError: Cannot read property 'slice' of undefined
15:56:00.925 | ▲ at Object.1690 (evalmachine.:3525:70)
15:56:00.925 | ▲ at webpack_require (evalmachine.:25:42)
15:56:00.925 | ▲ at Object.1090 (evalmachine.:4340:20)
15:56:00.925 | ▲ at webpack_require (evalmachine.:25:42)
15:56:00.925 | ▲ at Object.4422 (evalmachine.:1948:14)
15:56:00.925 | ▲ at webpack_require (evalmachine.:25:42)
15:56:00.926 | ▲ at Object.2313 (evalmachine.:7117:16)
15:56:00.926 | ▲ at webpack_require (evalmachine.:25:42)
15:56:00.926 | ▲ at Object.888 (evalmachine.:1451:67)
15:56:00.926 | ▲ at webpack_require (evalmachine.:25:42)
15:56:00.926 | ▲
15:56:00.929 | ▲
15:56:00.929 | ▲ > Build error occurred
15:56:00.929 | ▲ Error: Failed to collect page data for /
15:56:00.929 | ▲ at /opt/buildhome/repo/node_modules/next/dist/build/utils.js:916:15
15:56:00.929 | ▲ at processTicksAndRejections (internal/process/task_queues.js:95:5) {
15:56:00.929 | ▲ type: 'Error'
15:56:00.929 | ▲ }
15:56:00.930 | ▲
15:56:00.990 | ▲ npm ERR! code ELIFECYCLE
15:56:00.991 | ▲

`

[Andarist]

Your bundler is configured to use browser files but you are clearly running the final bundle on the server. I consider this to be a problem. You can configure it to prefer worker files over files targeting a browser - that should fix this problem for you.