webpack / typescript question

[vmiklos]

Hi,

I'm trying to upgrade chartjs from 2 to 3 in https://github.com/vmiklos/osm-gimmisn/, which uses webpack and typescript. I created a minimal repro here:

https://github.com/vmiklos/chartjs-demo

How to reproduce the problem:

• clone the repo:

git clone https://github.com/vmiklos/chartjs-demo
cd chartjs-demo

• build the baseline, which is a working chartjs3 / webpack / typescript setup:

git checkout HEAD^
npm install
npx webpack --mode=production --config webpack.config.js

• then set up chartjs-plugin-datalabels:

git checkout main

Here is the commit: vmiklos/chartjs-demo@4c3f881 -- it just adds the dependency and imports + registers the plugin, the actual chart does not try to use it yet.

• now try to build this:

npx webpack --mode=production --config webpack.config.js

The output I get is:

assets by status 199 KiB [cached] 1 asset
orphan modules 430 KiB [orphan] 4 modules
runtime modules 274 bytes 1 module
./src/browser/main.ts + 4 modules 432 KiB [built] [code generated]

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 41:18-31
export 'isNullOrUndef' (imported as 'isNullOrUndef') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 579:0-5
export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 586:15-21
export 'toFont' (imported as 'toFont') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 586:22-29
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 587:16-23
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 590:13-20
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 591:14-21
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 593:23-30
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 594:19-26
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 595:20-27
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 596:19-26
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 597:13-20
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 598:12-19
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 603:14-21
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 604:15-22
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 606:15-24
export 'toPadding' (imported as 'toPadding') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 606:25-32
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 608:16-23
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 610:17-24
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 611:22-29
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 612:23-30
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 613:23-30
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 614:23-30
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 628:18-25
export 'resolve' (imported as 'resolve') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 632:14-28
export 'valueOrDefault' (imported as 'valueOrDefault') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 632:29-37
export 'callback' (imported as 'callback') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 633:14-27
export 'isNullOrUndef' (imported as 'isNullOrUndef') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 755:0-5
export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1018:6-19
export 'isNullOrUndef' (imported as 'isNullOrUndef') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1024:6-14
export 'isObject' (imported as 'isObject') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1025:9-22
export 'isNullOrUndef' (imported as 'isNullOrUndef') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1027:16-29
export 'isNullOrUndef' (imported as 'isNullOrUndef') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1103:12-17
export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1111:21-26
export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1125:4-8
export 'each' (imported as 'each') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1158:6-14
export 'callback' (imported as 'callback') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

WARNING in ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 1285:4-9
export 'merge' (imported as 'merge') was not found in 'chart.js/helpers' (module has no exports)
 @ ./src/browser/main.ts 2:0-56 4:15-30

ERROR in ./node_modules/chart.js/helpers/helpers.esm.js 1:0-36
Module not found: Error: Can't resolve '../dist/helpers.esm' in '/home/vmiklos/git/chartjs-demo/node_modules/chart.js/helpers'
resolve '../dist/helpers.esm' in '/home/vmiklos/git/chartjs-demo/node_modules/chart.js/helpers'
  using description file: /home/vmiklos/git/chartjs-demo/node_modules/chart.js/helpers/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/vmiklos/git/chartjs-demo/node_modules/chart.js/package.json (relative path: ./dist/helpers.esm)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/vmiklos/git/chartjs-demo/node_modules/chart.js/dist/helpers.esm doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/vmiklos/git/chartjs-demo/node_modules/chart.js/dist/helpers.esm.ts doesn't exist
      as directory
        /home/vmiklos/git/chartjs-demo/node_modules/chart.js/dist/helpers.esm doesn't exist
 @ ./node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.esm.js 7:0-126 41:18-31 579:0-5 586:15-21 586:22-29 587:16-23 590:13-20 591:14-21 593:23-30 594:19-26 595:20-27 596:19-26 597:13-20 598:12-19 603:14-21 604:15-22 606:15-24 606:25-32 608:16-23 610:17-24 611:22-29 612:23-30 613:23-30 614:23-30 628:18-25 632:14-28 632:29-37 633:14-27 755:0-5 1018:6-19 1024:6-14 1025:9-22 1027:16-29 1103:12-17 1111:21-26 1125:4-8 1158:6-14 1285:4-9
 @ ./src/browser/main.ts 2:0-56 4:15-30

webpack 5.65.0 compiled with 1 error and 37 warnings in 8049 ms

While I expect that the build just finishes without errors, similar to when not yet using chartjs-plugin-datalabels.

Any idea what is the problem here? Thanks! :-)

[vmiklos]

At least it would be good to know what is a known-good setup for chartjs-plugin-datalabels and typescript. https://chartjs-plugin-datalabels.netlify.app/guide/typescript.html explicitly talks about typescript, so would it be that nobody tried to use this plugin with webpack? That would be a bit surprising, but perhaps that's it. Or is there anything special in my webpack config?

Thanks!

[vmiklos]

vmiklos/chartjs-demo@843f55e fixes the problem, it was a webpack config problem, nothing to do with chartjs-plugin-datalabels. Thanks @balazsbotond for answering this.

[panw-contact]

@vmiklos - I still am getting the same errors even after making webpack.config.js changes as suggested.
I am getting errros in another chartjs package

Module not found: Error: Can't resolve '../dist/helpers.esm' in '/Users/skashyap/Documents/Projects/fwaas/web/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.


error Command failed with exit code 1.
ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 309:2-6

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


ERROR in ../../node_modules/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js 317:2-6

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

This is my webpack.config.js

var webpack = require('webpack');
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$|\.m?js/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: 'sourcemaps/[file].map',
      exclude: /node_modules/,
    })
  ],

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

[ghost]

I had the same problem. I solved it by adding to module.rules

{ test: /\.m?js/, resolve: { fullySpecified: false } }

Source: Link

PD: I am using Laravel Mix.

[panw-contact]

module.rules

This fix isn't working for me.

[ghost]

Maybe it will help you a little more. Attached are the files of how I have it configured.

webpack.extend.txt
webpack.mix.txt

Sorry for my bad English

[panw-contact]

Maybe it will help you a little more. Attached are the files of how I have it configured.

webpack.extend.txt webpack.mix.txt

Sorry for my bad English

Thanks @urielgi .
I will try this fix.