Chart v4：找不到模块：错误：包路径。未从包 node_modules/chart.js 导出

Question

我正在维护一个使用chart.js作为依赖项（不是peerDependency）的react组件库。

我将chart.js从3.9.1升级到4.0.1。

我的库仍然可以正常编译，但现在当我导入库时，它会在我的 React 应用程序上引发错误：

Module not found: Error: Package path . is not exported from package node_modules/chart.js

我正在使用汇总构建所有内容，这是我的配置：

import path from 'path';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import typescript from '@rollup/plugin-typescript';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';
import copy from 'rollup-plugin-copy';
import autoprefixer from 'autoprefixer';
import postcssUrl from 'postcss-url';
import pkg from './package.json' assert { type: 'json' };
import {fileURLToPath} from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const { dependencies = {}, peerDependencies = {} } = pkg;

const externals = [...Object.keys(dependencies), ...Object.keys(peerDependencies)];

const src = path.resolve(__dirname, 'src');
const input = path.resolve(src, 'index.ts');
const assets = path.resolve(src, 'assets');
const dest = path.resolve(__dirname, 'dist');

export default [
  {
    input,
    external: (id) => externals.some((dep) => id === dep || id.startsWith(`${dep}/`)),
    plugins: [
      typescript({ tsconfig: './tsconfig.json' }),
      commonjs(),
      json(),
      resolve({ browser: true }),
      babel({
        extensions: ['.ts', '.js', '.tsx', '.jsx'],
      }),
      image(),
      postcss({
        plugins: [
          autoprefixer,
          postcssUrl({
            url: 'inline',
            basePath: assets,
          }),
        ],
      }),
      copy({
        targets: [
          { src: 'src/**/_*.scss.d.ts', dest },
          { src: 'src/**/_*.scss', dest },
        ],
      }),
    ],
    output: [
      {
        file: pkg.main,
        format: 'cjs',
      },
      { name: pkg.name, file: pkg.module, format: 'es' },
      {
        name: pkg.name,
        file: pkg.browser,
        format: 'umd',
        globals: {
          react: 'React',
        },
      },
      {
        name: pkg.name,
        file: pkg['browser:min'],
        format: 'umd',
        globals: {
          react: 'React',
        },
        plugins: [terser()],
      },
    ],
  },
];

有人知道为什么这样做吗？

我尝试删除 node_modules 和 package-lock.json 并在我的库和前端应用程序上重新安装，但我仍然遇到相同的错误。

我尝试从文档中提到的“chart.js/auto”导入，但它抛出：

Module not found: Error: Package path ./auto is not exported from package node_modules/chart.js

我查看了node_modules/chart.js/package.json 文件，那里有一组定义良好的导出。但由于它是随着升级而来的，并且没有其他库向我抛出过这个错误，我猜它来自升级。

Answer 1

发现错误。我认为这是图书馆本身的问题。它不是必需的，因为 package.json 文件中缺少条件子路径。我无能为力。我会降级直到推送修复。

Answer 2

Chart.js v4 是一个仅 ESM 的包，因此您的项目也应该是一个 ES 模块。您可以尝试修改 resolve.conditionnames 选项并添加

import

条件。

在 Github 上查看此问题