Latest beta versions are having build issues in nextjs/vercel

[subzero79]

Hi there i have an issue with nextjs failing to build on the latest beta version due to the use of require to import in library.

The latest working version at build is v3.0.0-beta.35

This is the error

Detected Next.js version: 12.2.5
--
16:30:25.155 | Running "yarn run build"
16:30:25.421 | yarn run v1.22.17
16:30:25.447 | $ next build
16:30:25.996 | info  - Linting and checking validity of types...
16:30:30.421 |  
16:30:30.421 | ./components/beta-components/cart-display/search-popper.tsx
16:30:30.422 | 53:25  Warning: Component definition is missing display name  react/display-name
16:30:30.422 |  
16:30:30.422 | ./components/beta-components/touch-card.tsx
16:30:30.423 | 87:26  Warning: Component definition is missing display name  react/display-name
16:30:30.423 |  
16:30:30.423 | info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
16:30:47.587 | info  - Creating an optimized production build...
16:31:35.291 | info  - Compiled successfully
16:31:35.291 | info  - Collecting page data...
16:31:39.829 | Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /vercel/path0/node_modules/d3-time-format/src/index.js
16:31:39.830 | require() of ES modules is not supported.
16:31:39.830 | require() of /vercel/path0/node_modules/d3-time-format/src/index.js from /vercel/path0/node_modules/react-charts/lib/utils/buildAxis.linear.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
16:31:39.830 | Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /vercel/path0/node_modules/d3-time-format/package.json.
16:31:39.831 |  
16:31:39.831 | at new NodeError (internal/errors.js:322:7)
16:31:39.831 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1102:13)
16:31:39.831 | at Module.load (internal/modules/cjs/loader.js:950:32)
16:31:39.832 | at Function.Module._load (internal/modules/cjs/loader.js:790:12)
16:31:39.832 | at Module.require (internal/modules/cjs/loader.js:974:19)
16:31:39.832 | at require (internal/modules/cjs/helpers.js:101:18)
16:31:39.832 | at Object.<anonymous> (/vercel/path0/node_modules/react-charts/lib/utils/buildAxis.linear.js:18:21)
16:31:39.832 | at Module._compile (internal/modules/cjs/loader.js:1085:14)
16:31:39.832 | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
16:31:39.832 | at Module.load (internal/modules/cjs/loader.js:950:32) {
16:31:39.833 | code: 'ERR_REQUIRE_ESM'
16:31:39.833 | }
16:31:39.833 |  
16:31:39.833 | > Build error occurred
16:31:39.834 | Error: Failed to collect page data for /beta/orders
16:31:39.834 | at /vercel/path0/node_modules/next/dist/build/utils.js:743:15 {
16:31:39.835 | type: 'Error'
16:31:39.835 | }
16:31:39.914 | error Command failed with exit code 1.
16:31:39.914 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[fergusmeiklejohn]

yeah I'm getting the same error in a Remix app

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/react-charts/node_modules/d3-time-format/src/index.js from /node_modules/react-charts/lib/utils/buildAxis.linear.js not supported.
Instead change the require of index.js in /node_modules/react-charts/lib/utils/buildAxis.linear.js to a dynamic import() which is available in all CommonJS modules.

[joshuabaker]

With Next’s popularity, it’d be great to have this work off the self with it.

Get around this in the interim by using next/dynamic.

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import("react-charts").then((mod) => mod.Chart), {
  ssr: false,
});

[MoSattler]

If you run into this issue with remix, check this out: https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

[fergusmeiklejohn]

I fixed the problem with Remix by adding this to the remix config: serverDependenciesToBundle: ["react-charts", "d3-time-format"],