NextJs + amcharts：生产构建错误：ReferenceError：未定义addEventListener

Question

我正在研究nextjs项目并使用amcharts库。

构建生产版本时，出现以下错误。

> Build error occurred
{ ReferenceError: addEventListener is not defined
    at new Registry (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:4945:9)
    at Module.u55L (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:5159:16)
    at __webpack_require__ (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:29:31)
    at Object.11 (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:334:18)
    at __webpack_require__ (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:29:31)
    at D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:124:18
    at Object.<anonymous> (D:\XKDashboardClient\.next\server\static\FsJlbi7eD-pYXPY5IEwnp\pages\patientDetails.js:127:10)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32) type: 'ReferenceError' }
Automatically optimizing pages .npm ERR! code ELIFECYCLE

这是我的next.config.js文件

const withCSS = require("@zeit/next-css");
const withImages = require("next-images");
const withFonts = require("nextjs-fonts");
const withTM = require("next-transpile-modules")([
  "react-native-vector-icons",
  "@amcharts/amcharts4/core",
  "@amcharts/amcharts4/charts",
  "@amcharts/amcharts4/themes/animated",
]); // pass the modules you would like to see transpiled


module.exports = withCSS(
  withTM(
      withImages(
        withFonts({
          /* config options here */
          env: {
            API_URL: "http://localhost:4000/api/",
            SOCKET_URL: "http://localhost:4000/",
          },
        })
    )
  )
);

如果我注释掉下面的代码，则它可以正常工作并且没有错误。 此代码来自-node_modules @ amcharts \ amcharts4.internal \ core \ Registry.js

更新

我通过从webpack文件中删除amcharts来修复了构建错误。并在页面加载时像下面一样导入它。

let am4core = null;
let am4charts = null;
let am4themesAnimated = null;
if (process.browser) {
  console.log("process.browser", process.browser);
  am4core = require("@amcharts/amcharts4/core");
  am4charts = require("@amcharts/amcharts4/charts");
  am4themesAnimated = require("@amcharts/amcharts4/themes/animated");
  am4core.useTheme(am4themesAnimated.default);
}

现在，我的产品构建正常，图表在首次加载时也加载良好。 当我刷新页面时，它显示以下错误：

charts.js:1 Uncaught ReferenceError: am4internal_webpackJsonp is not defined
    at charts.js:1
(anonymous) @ charts.js:1
maps.js:1 Uncaught ReferenceError: am4internal_webpackJsonp is not defined
    at maps.js:1