Fail nextjs 12 build with amcharts 5

Question

I'm trying to build my nextjs project which uses amcharts 5. However the build is failing on amcharts 5 due to an unexpected export. Can anyone point me in the right direction to tackle this build error? Thanks

> Build error occurred
/home/****/public_html/****/node_modules/@amcharts/amcharts5/index.js:1
export { Root } from "./.internal/core/Root";
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.9504 (/home/****/public_html/****/.next/server/pages/veve/market/components/TradingChart/PrimaryChart.js:69:18)
    at __webpack_require__ (/home/****/public_html/****/.next/server/webpack-runtime.js:25:42)
    at Object.8707 (/home/****/public_html/****/.next/server/chunks/8707.js:15:77) {
  type: 'SyntaxError'
}

Answer 1

I fixed this issue in an angular project but as it is a Jest issue, this should hopefully work for you.

Create a folder adjacent to node_modules called __mocks__. To make this work for me in amCharts 5, I created the following folder and files. Note that the .js files below are completely empty. This is by design.

app/
?? node_modules/
?? __mocks__/
?  ?? @amcharts/
?  ?  ?? amcharts5/
?  ?  ?  ?? themes/
?  ?  ?  ?  ?? Animated.js
?  ?  ?  ?? index.js
?  ?  ?  ?? xy.js

This was based on expanding what I found in the jest mocks documentation.

It is also worth noting, that I use Nx for the workspace and since it has nested jest.config.js files, I had to move my __mocks__ folder adjacent to that.

Hope this helps you (assuming not too late).