nextJS 应用程序中的节点模块包错误：语法错误：未找到命名导出“x”。请求的模块“x”是 CommonJS 模块

Question

我有以下问题。我正在使用 Chartjs 并使用笛卡尔轴创建一个图表 https://www.chartjs.org/docs/latest/axes/cartesian/time.html

为此，我需要一个适配器，并且我正在安装 Chartjs-adapter-date-fns。 运行应用程序或构建时，我收到以下错误，该错误来自节点模块文件夹 ../node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js:7

我收到此错误

import { _adapters } from 'chart.js';
         ^^^^^^^^^
SyntaxError: Named export '_adapters' not found. The requested module 'chart.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'chart.js';
const { _adapters } = pkg;

我正在使用这些版本，根据文档应该没问题 https://github.com/chartjs/chartjs-adapter-date-fns/blob/master/README.md

    "chart.js": "^3.6.2",
    "chartjs-adapter-date-fns": "^3.0.0",
    "date-fns": "^2.29.3",

并按照刚刚描述的方式导入它

import "chartjs-adapter-date-fns";

由于适配器是节点模块中的外部包，因此我无法按照错误提示更改它。

附加信息：应用程序本身使用 nextJs v13 运行，但图表组件位于 Turbo monorepo 内的单独组件包中，仅使用 React。依赖项安装在此组件包中。

在组件包内运行例如故事书时，我没有收到错误。仅在 nextjs 应用程序中。可以和nextjs配置有关吗？有人可以帮忙或者有想法吗！

Answer 1

我遇到了类似的问题并设法解决了它。该问题源于在 Next.js 环境中使用时 Chart.js 及其适配器之间的模块兼容性。这对我有用：

1. 使用特定版本的 Chart.js 及其适配器：

    "chart.js": "3.9.1",
    "chartjs-adapter-luxon": "1.2.1",
    "chartjs-plugin-streaming": "2.0.0",
    "luxon": "2.3.0"
    "stream-browserify": "^3.0.0",
    "browserify-zlib": "^0.2.0",
    "util": "^0.12.5",
    "https-browserify": "^1.0.0",
    "stream-http": "^3.2.0"

2. 更新您的图表组件导入：

    import Chart from 'chart.js/auto';
    import 'chartjs-adapter-luxon';
    import StreamingPlugin from 'chartjs-plugin-streaming';
    Chart.register(StreamingPlugin);

3. 添加或修改next.config.js

const nextConfig = {
      webpack: (config) => {
        config.resolve.fallback = {
          ...config.resolve.fallback,
          "stream": require.resolve("stream-browserify"),
          "zlib": require.resolve("browserify-zlib"),
          "util": require.resolve("util"),
          "https": require.resolve("https-browserify"),
          "http": require.resolve("stream-http"),
        };
        return config;
      },
    };
    
    module.exports = nextConfig;

这些更改通过使用特定版本、更改导入方法以及配置 Next.js 的 webpack 以提供必要的后备措施，解决了我的模块兼容性问题。实施这些更改后，我能够在 Next.js 应用程序中使用 Chart.js 及其适配器，不会出现错误。