Facing app crash after importing using given example

[gargmegham]

Code:

import React from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import Table from '../components/Table'
import Cover from '../components/Cover'

const PortfolioMonthlySummaryReport = ({ data }) => {
  return (
    <div id="PortfolioMonthlySummaryReport">
      <Cover
        companyName={data.metadata.companyName}
        headerDate={data.metadata.headerDate}
      />
      <Table
        scanDate={data.scanDate}
        scanDate2MonthsAgo={data.scanDate2MonthsAgo}
        scanDate1MonthAgo={data.scanDate1MonthAgo}
        companies={data.companies}
        title={'Portfolio Scores'}
      />
      <ReactSpeedometer />
      <Table
        scanDate={data.scanDate}
        scanDate2MonthsAgo={data.scanDate2MonthsAgo}
        scanDate1MonthAgo={data.scanDate1MonthAgo}
        companies={data.portoliocompanies}
        title={'Portfolio Scores'}
      />
    </div>
  )
}

export default PortfolioMonthlySummaryReport

Error:

xyz/node_modules/ts-node/dist/index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module xyz/node_modules/lodash-es/isNumber.js from xyz/node_modules/react-d3-speedometer/dist/core/util/index.js not supported.
Instead change the require of isNumber.js in xyz/node_modules/react-d3-speedometer/dist/core/util/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.require.extensions.<computed> [as .js] (xyz/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (xyz/node_modules/react-d3-speedometer/dist/core/util/index.js:1:616)
    at Object.require.extensions.<computed> [as .js] (xyz/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (xyz/node_modules/react-d3-speedometer/dist/core/config/index.js:1:374)
    at Object.require.extensions.<computed> [as .js] (xyz/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (xyz/node_modules/react-d3-speedometer/dist/index.js:1:1284)
    at Object.require.extensions.<computed> [as .js] (xyz/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (xyz/src/Reports/PortfolioMonthlySummaryReport.jsx:8:48)
    at Module.m._compile (xyz/node_modules/ts-node/dist/index.js:857:29)
    at Object.require.extensions.<computed> [as .jsx] (xyz/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (xyz/src/routes/PortfolioMonthlySummaryReportRoute.ts:18:57)
    at Module.m._compile (xyz/node_modules/ts-node/dist/index.js:857:29)
    at Object.require.extensions.<computed> [as .ts] (xyz/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (xyz/src/server.ts:9:62)
    at Module.m._compile (xyz/node_modules/ts-node/dist/index.js:857:29)
    at Object.require.extensions.<computed> [as .ts] (xyz/node_modules/ts-node/dist/index.js:859:16)
    at phase4 (xyz/node_modules/ts-node/dist/bin.js:466:20)
    at bootstrap (xyz/node_modules/ts-node/dist/bin.js:54:12)
    at main (xyz/node_modules/ts-node/dist/bin.js:33:12)
    at Object.<anonymous> (xyz/node_modules/ts-node/dist/bin.js:579:5) {
  code: 'ERR_REQUIRE_ESM'
}
[nodemon] app crashed - waiting for file changes before starting...

[palerdot]

Your build step does not understand importing es modules. You should update your app build step so that it is able to import es modules (maybe try vite, esbuild, webpack5 etc). To verify, maybe add https://www.npmjs.com/package/lodash-es as a dependency and see if you can import any of the helper functions from lodash-es. If you cannot use es modules, you will not be able to use this library.

[ConnorOnTheWeb]

I'm getting this error using NextJS 13. Reading that NextJS 12 and up should be able to use ES Modules by default.

It actually worked the moment I added it, but when I refresh the page or visit the page later it crashes and sends the same error re lodash.

Error: require() of ES Module /Users/user/code/project/node_modules/lodash-es/isNumber.js from /Users/user/code/project/node_modules/react-d3-speedometer/dist/core/util/index.js not supported.
Instead change the require of isNumber.js in /Users/user/code/project/node_modules/react-d3-speedometer/dist/core/util/index.js to a dynamic import() which is available in all CommonJS modules.

Code was copy pasted from the example without changes.

[palerdot]

Reading that NextJS 12 and up should be able to use ES Modules by default.

Please share a nextjs documentation link to check on this behavior.

[ConnorOnTheWeb]

Reading that NextJS 12 and up should be able to use ES Modules by default.

Please share a nextjs documentation link to check on this behavior.

https://github.com/vercel/next.js/discussions/29348

Not finding much documentation on the main website, only in Issues. It sounds very simple, with two solutions... I've tried adding "type": "module" and it broke Next Auth. I've tried adding the .mjs extension to the page, but then the page shows a 404. So, I'm not really sure what's to be done about ES Modules here.

Currently getting it to work (very slow) on routed-to instances and ~50% of page refreshes by bringing it in as a dynamic import. It's still throwing a fit about react-d3-speedometer importing lodash-es/isNumber.js.

[ConnorOnTheWeb]

Found the issue. When I installed using yarn add react-d3-speedometer it was installing version 1.x which the documentation says works for React 17. I am using React 18, recognized the version number and installed using yarn add react-d3-speedometer@2.x and it works great!