我正在研究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