ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 327:2-10 export 'callback' (imported as 'callback') was not found in 'chart.js/helpers' (module has no exports)

[panw-contact]

Expected behavior

webpack.config.js

var CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: [
    './public/src/index.js'
  ],
  output: {
    path: __dirname + '/public/',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devtool: "source-map",
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    }]
  },
  stats: {
    // Configure the console output
    errorDetails: true, //this does show errors
    colors: false,
    modules: true,
    reasons: true
  },
  progress: true,
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
    new webpack.DefinePlugin({ //<--key to reduce React's size
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: 'sourcemaps/[file].map',
      exclude: /node_modules/,
    })
  ],

  resolve: {
    extensions: ['', '.js', '.jsx'],
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './public'
  }
};```

module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current', }, }, ], ['@babel/preset-typescript', { 'allowNamespaces': true }], ], plugins: [ '@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator' ], };

**Versions used  package.json:**

"chart.js": "^3.8.0",
"chartjs-plugin-zoom": "1.0.1",
"react-chartjs-2": "^4.0.0",
    
No errors




### Current behavior

 errors

```ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 327:2-10
export 'callback' (imported as 'callback') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/resources/subscription_mgmt/SubscriptionCreditsUsage.tsx 16:0-45 19:94-104
 @ ./src/resources/subscription_mgmt/index.ts 3:0-65 7:15-38
 @ ./src/resources/index.ts 16:0-52 17:0-155
 @ ./src/App.tsx 16:0-39 97:11-19
 @ ./src/index.tsx 8:0-24 10:38-41
ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 368:2-6
export 'each' (imported as 'each') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/resources/subscription_mgmt/SubscriptionCreditsUsage.tsx 16:0-45 19:94-104
 @ ./src/resources/subscription_mgmt/index.ts 3:0-65 7:15-38
 @ ./src/resources/index.ts 16:0-52 17:0-155
 @ ./src/App.tsx 16:0-39 97:11-19
 @ ./src/index.tsx 8:0-24 10:38-41
ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 376:2-10
export 'callback' (imported as 'callback') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/resources/subscription_mgmt/SubscriptionCreditsUsage.tsx 16:0-45 19:94-104
 @ ./src/resources/subscription_mgmt/index.ts 3:0-65 7:15-38
 @ ./src/resources/index.ts 16:0-52 17:0-155
 @ ./src/App.tsx 16:0-39 97:11-19
 @ ./src/index.tsx 8:0-24 10:38-41
ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 404:2-6
export 'each' (imported as 'each') was not found in 'chart.js/helpers' (module has no exports)

Module not found: Error: Can't resolve '../dist/helpers.esm' in node_modules/chart.js/helpers'
Did you mean 'helpers.esm.js'?

Reproducible sample

https://codesandbox.io/s/react-chartjs-2-chart-js-issue-template-forked-ro5dfk?file=/src/App.tsx

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v3.8.0

Browser name and version

Chrome

Link to your project

No response

[LeeLenaleee]

The sample you linked does not seem to throw any errors like you describe, can you update it to reflect the behaviour you see

[panw-contact]

we are using webpack and babel as mentioned above and hence the errors. It is unable to resolve ../dist/helpers.esm

[mlandalv]

I think the problem is that chart.js/helpers/helpers.mjs is missing .js in the export path.

Should be.

export * from '../dist/helpers.esm.js';

[ghost]

I found the same problem in my application today while i was deploying to heroku (same version of chart.js 3.8.0)

remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:        
remote:        Module not found: Error: Can't resolve '../dist/helpers.esm' in '/tmp/build_69eec022/web_client/node_modules/chart.js/helpers'
remote:        Did you mean 'helpers.esm.js'?
remote:        BREAKING CHANGE: The request '../dist/helpers.esm' failed to resolve only because it was resolved as fully specified
remote:        (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
remote:        The extension in the request is mandatory for it to be fully specified.
remote:        Add the extension to the request.

in the node_module file inside './dist' there are only 2 files with the name 'helpers' and have the .esm.js and .mjs extensions. I notice what @mlandalv indicates too, probably is the missing extension

My last deploy was on Friday so, may be this modifications are the origin of the issue commit here

[panw-contact]

@mlandalv @JS-TCIT - what is the solution to fix this issue in my environment? Is there a quick turnaround for this issue?

[shawnhooper]

Confirmed that this is happening in my environment as well. Updated package.json to have version 3.8.2 be installed and the build worked again.

[panw-contact]

I changed it to 3.8.0 and it started working fine. But curious why this was pushed as part of v3 and not v4 if it is such a big change.

[etimberg]

There was a bug with 3.8.1 that was resolved in 3.8.2. See #10513 for the fix

[genyslt]

export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ..

ERROR in ../XWYZ/node_modules/chart.js/helpers/helpers.mjs 1:0-36
Module not found: Error: Can't resolve '../dist/helpers.esm' in '/XWYZ/node_modules/chart.js/helpers'
Did you mean 'helpers.esm.js'?
BREAKING CHANGE: The request '../dist/helpers.esm' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve '../dist/helpers.esm' in '/XWYZ/node_modules/chart.js/helpers'
  using description file: /XWYZ/node_modules/chart.js/helpers/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /XWYZ/node_modules/chart.js/package.json (relative path: ./dist/helpers.esm)

After upgrade from 3.8.2 to 3.9.0

[LeeLenaleee]

Fixed in #10552