Error [ERR_REQUIRE_ESM]: require() of ES Module not supported

[arthurgailes]

Description

Adding d3, a popular library, causes the server to fail to render when in production mode. I've tried setting the package.json to "type":"module", but that starts a cascade of failures that I can't get out of. Note that this only occurs when serving or building with {prerender:true} - no problem when running ts-node in dev mode.

After installing d3-format, I edited Counter.tsx in the react-ts boilerplate to the following

import React, { useState } from 'react'
import { format } from 'd3-format'

export { Counter }

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button type="button" onClick={() => setCount((count) => count + 1)}>
      Counter {format(',.0f')(count)}
    </button>
  )
}

Footnote: I tried loading the offending component conditionally, as in the docs, but The server did not finish this Suspense boundary: The server used "renderToString" which does not support Suspense.

Error Stack

> cross-env NODE_ENV=production ts-node ./server

Server running at http://localhost:3000
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/d3-format/src/index.js from /home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/dist/server/assets/index.page.12705ad8.js not supported.
Instead change the require of index.js in /home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/dist/server/assets/index.page.12705ad8.js to a dynamic import() which is available in all CommonJS modules.
    at Object.require.extensions.<computed> [as .js] (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/ts-node/dist/index.js:851:20)
    at Module.<anonymous> (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/dist/server/assets/index.page.12705ad8.js:4:16)
    at Object.require.extensions.<computed> [as .js] (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/ts-node/dist/index.js:851:20)
    at /home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/dist/server/pageFiles.js:19:12
    at async Object.pageFile.loadFile (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/parseGlobResults.js:26:40)
    at async Promise.all (index 0)
    at async loadPageFilesServerSide (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/vite-plugin-ssr/dist/cjs/shared/getPageFiles/analyzePageServerSide/loadPageFilesServerSide.js:8:5)
    at async Promise.all (index 0)
    at async loadPageFilesServer (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/vite-plugin-ssr/dist/cjs/node/renderPage.js:368:69)
    at async renderPageContext (/home/.../Downloads/vite-plugin-ssr-main/boilerplates/boilerplate-react-ts/node_modules/vite-plugin-ssr/dist/cjs/node/renderPage.js:66:23)

[brillout]

Seems unrelated to vps.

Closing as per https://brillout.github.io/rules/.

[arthurgailes]

You are correct, my apologies. The problem here lay with vite ssr and its handling of workspace dependencies. For future visitors, this is addressed in vitejs/vite#9710

[brillout]

Thanks for the update 👌