Cannot import due to require() of ESM Module error on latest version

[jmtimko5]

Bug description
After upgrading to 5.5.2 all imports of the form import * as am5 from "@amcharts/amcharts5";

result in the following error:

/Users/josephtimko/work/netspring/firewatch/node_modules/@amcharts/amcharts5/.internal/core/render/Slice.js:1
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/josephtimko/work/netspring/firewatch/node_modules/d3-shape/src/index.js not supported.
Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/josephtimko/work/netspring/firewatch/node_modules/@amcharts/amcharts5/.internal/core/render/Slice.js:1)
    at Generator.next (<anonymous>)
    at Object.<anonymous> (/Users/josephtimko/work/netspring/firewatch/node_modules/@amcharts/amcharts5/index.js:1)
    at Generator.next (<anonymous>)
    at eval (webpack-internal:///@amcharts/amcharts5:1)
    at Object.@amcharts/amcharts5 (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:9183:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/components/charts/processors/amChartsSankeyProcessor/amChartsSankeyProcessor.ts:4:77)
    at Module../src/components/charts/processors/amChartsSankeyProcessor/amChartsSankeyProcessor.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:2890:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/components/charts/processors/index.ts:2:106)
    at Module../src/components/charts/processors/index.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:2938:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/stores/ChartDataStore/ChartDataStore.ts:8:91)
    at Module../src/stores/ChartDataStore/ChartDataStore.ts (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:8620:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/components/editors/ExploreEditor/withHeaderAndTile/withHeaderAndTile.tsx:33:100)
    at Module../src/components/editors/ExploreEditor/withHeaderAndTile/withHeaderAndTile.tsx (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:3996:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/components/editors/ExploreEditor/subtypes/RawQueryEditor/RawQueryEditor.tsx:8:131)
    at Module../src/components/editors/ExploreEditor/subtypes/RawQueryEditor/RawQueryEditor.tsx (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:3762:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/components/editors/ExploreEditor/ExploreEditor.tsx:6:134)
    at Module../src/components/editors/ExploreEditor/ExploreEditor.tsx (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:3339:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/pages/app/exploration/[explorationID].tsx?__sentry_wrapped__:21:110)
    at Module../src/pages/app/exploration/[explorationID].tsx?__sentry_wrapped__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:8572:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at eval (webpack-internal:///./src/pages/app/exploration/[explorationID].tsx:5:92)
    at Module../src/pages/app/exploration/[explorationID].tsx (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:8560:1)
    at __webpack_require__ (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:29:31)
    at /Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:124:18
    at Object.<anonymous> (/Users/josephtimko/work/netspring/firewatch/.next/server/pages/app/exploration/[explorationID].js:127:10)
    at requirePage (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/require.js:1)
    at loadComponents (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/load-components.js:1)
    at async DevServer.findPageComponents (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:74:257)
    at async DevServer.renderToHTML (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:135:827)
    at async DevServer.renderToHTML (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:56:580)
    at async Router.execute (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/Users/josephtimko/work/netspring/firewatch/node_modules/next/dist/next-server/server/next-server.js:34:504) {
  code: 'ERR_REQUIRE_ESM'
}

Environment (if applicable)
amcharts version: 5.5.2 (upgrading from 5.1.7)
Typescript: 4.7.2
Nextjs: 10.0.8
React: 17.0.2

[jmtimko5]

I have found the it is version 5.1.10 which is the first version where I run into this, corresponding with the d3 upgrade. Any help on this would be greatly appreciated.

[Pauan]

We don't use require anywhere, and I can't reproduce that error. It sounds like something is going wrong with your setup.

Could you please share your code? Either in a ZIP file or code sandbox.

[github-actions]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

[davidjb]

I've added an example for reproducing this issue over in #1266

[martynasma]

OK, so the fix to this is dependent on us finding the solution for #1265

Let's keep this open, until we are able to figure type: "module".