图表 v4：找不到模块：错误：Package 路径。 不从 package node_modules/chart.js 导出

Question

I'm maintaining a react component library that uses chart.js as a dependency (Not peerDependency).

I upgraded chart.js from 3.9.1 to 4.0.1.

My library still compiles fine but now it throws an error on my react app when I'm importing the lib:

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

I'm building everything with rollup here is my config:

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()],
      },
    ],
  },
];

Does someone has any idea why it is doing so?

I tried to delete node_modules and package-lock.json and reinstall both on my library and front app but I still have the same error.

I tried to import from 'chart.js/auto' as mentioned in the documentation but it throws:

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

I looked at node_modules/chart.js/package.json file and there is a well defined set of exports there. But as it came with the upgrade and no other library has ever throw me this error I guess it comes from the upgrade.

Answer 1

Found the bug. As I thought it is a problem with the library itself. It cannot be required since the conditional subpath is missing from the package.json file. Nothing I can do. I'll downgrade untill the push a fix.