Module parse failed: Unexpected token

[bonbonsiregar]

Expected behavior

I expect no error when trying to import chartjs like this:

import Chart from 'chart.js/auto'

Current behavior

Instead, I got an error like this when I'm trying to:

import Chart from 'chart.js/auto'

this is the error that appears in my terminal

./node_modules/chart.js/dist/chart.js 554:18
Module parse failed: Unexpected token (554:18)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| };
| class DatasetController {
>   static defaults = {};
|   static datasetElementType = null;
|   static dataElementType = null;

Reproducible sample

https://codepen.io/pen?template=BapRepQ

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

This is because you likely are using we pack 4 which does not support static properties, so you will need to update to webpack 5, or use the babel/preset-env config with the babel loader to transpile it

[dangreen]

@bonbonsiregar Here is the article about dependencies transpilation.

[abdullah-mylobby]

babel/preset-env config with the babel loader to transpile it

Can you please share an example of doing it or an article?

[dreysolano]

@abdullah-mylobby I had this issue with a different package (contentful), and this config resolved the issue for me. This is a weback config extension for a Nuxt2 project, but should essentially be what you need for a webpack 4 build:

config.module.rules.push({
  test: /\.[cm]?js$/,
  exclude: /node_modules\/(?!(contentful\/dist|@contentful\/live-preview)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              browsers: ['last 2 versions', 'ie >= 11'],
            },
          },
        ],
      ],
      plugins: ['@babel/plugin-proposal-class-properties'],
    },
  },
})

Need to install @babel/plugin-proposal-class-properties for this specific issue. Note that I also had to use a negative lookahead assertion in the exclude regex to include the necessary package files for transpiling. Hope this helps.