Import of chart.js 4 results in module not found

Expected behavior

When I import chartjs in the style:

import Chart from 'chart.js/auto';

it should import without error.

Current behavior

When I try to import like this:

import Chart from 'chart.js/auto';

I get the following in the webpack output:

ERROR in ...

Module not found: Error: Package path ./auto is not exported from package …\node_modules\chart.js (see exports field in …\node_modules\chart.js\package.json)

node v16.15.0 npm 8.5.5 webpack 5.74.0 ts-loader babel 7.19.6

I can resolve this issue by changing the chart.js package.json to not use nested conditional exports. i.e.:

"exports": {
    ".":  "./dist/chart.js",
    "./auto": "./auto/auto.js",
    "./helpers": "./helpers/helpers.js"
  },

Instead of the current:

"exports": {
    ".": {
      "import": "./dist/chart.js",
      "types": "./dist/types.d.ts"
    },
    "./auto": {
      "import": "./auto/auto.js",
      "types": "./auto/auto.d.ts"
    },
    "./helpers": {
      "import": "./helpers/helpers.js",
      "types": "./helpers/helpers.d.ts"
    }
  },

I assume this is a node version or config issue or something? As I guess there’s no way everyone is seeing this?

Reproducible sample

none

Optional extra steps/info to reproduce

No response

Possible solution

Removing nested conditional exports does resolve this for us.

Context

Stopping us from upgrading.

chart.js version

4.0.1

Browser name and version

No response

Link to your project

No response

[np-np-np]

I just did what you linked, but with some extra strings:

resolve: {
  conditionNames: ['import', 'node', 'default']
}

It was ‘default’ that was blowing up @babel/runtime (at runtime on _interopRequireDefault). It seems obvious now, but it wasn’t to me at the time. My dep was brought in through react-transition-group. And the standard Stack Overflow search for that error sends you off way in the wrong direction.

I don’t think I needed ‘node’. Others may need ‘require’. It’s kind of on the user to track the dep tree, look at the package.jsons, work out what conditionals there are and add them to the array. Which kind of sucks.

Also worth drawing attention to the webpack docs note that the order of names in the array is important as it states order of preference. Could see that tripping people up.

Thinking about it some more… conditionNames use is fraught with potential problems.

[dangreen]

@np-np-np could you please share how you change webpack config ?