'You may need an appropriate loader to handle this file type' issue when upgrading from 2.9.4 to 3.1.1

[vamsigutta]

We have a react application which uses chartjs to display various graphs. As there are more options from 3.1 for customizing the graphs, we were trying to upgrade the chartjs version from 2.9.4 to 3.1.1. After the upgrade the We are facing the error that appropriate loader is not present. The error does not show which loader is needed for the latest version to work. Please find the error message below
Module parse failed: C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\chart.js\dist\chart.js Unexpected token (9166:12) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (9166:12) at Parser.pp$4.raise (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseIdent (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:2189:12) at Parser.pp$3.parsePropertyName (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:2052:101) at Parser.pp$3.parseObj (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1988:14) at Parser.pp$3.parseExprAtom (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1805:19) at Parser.pp$3.parseExprSubscripts (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\xxxx\xxxx_lightclient\lightclient-base\lightclient-webapp\src\main\webapp\webclient\node_modules\acorn\dist\acorn.js:1620:21) @ ./~/chart.js/auto/auto.js 1:17-41
Note :: The names of certain folders are changed to project the issue alone

[LeeLenaleee]

Are you using chart.js as a bare lib or are you using a wrapper, in which case it might not be up to date and not support chart.js v3

[vamsigutta]

No we are not using any wrapper @LeeLenaleee , We are using it as a bare lib

[LeeLenaleee]

Can you provide a working example of your issue because it seems to be working fine in react (https://codesandbox.io/s/react-chart-js-forked-gpdr4?file=/src/index.js)

[vamsigutta]

I am trying to reproduce the situation in a new application, but meanwhile, I want to let you know that we are using webpack version 1.12.9 with the configuration mentioned below

var webpack = require('webpack');
var path = require('path');
const APP_DIR = path.resolve(__dirname, '../src');
const OUTPUT_DIR = path.resolve(__dirname, '../target/assets');
const TARGET_REST_URL = "https://" + process.env.SERVERHOSTNAME + "/";
const HTTP_LOCAL_PROTOCOL = "http://";
const HTTP_LOCAL_HOST="localhost";
const HTTP_LOCAL_PORT = 8080;

const common = {
  // Important! Do not remove ''. If you do, imports without
  // an extension won't work anymore!
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
}

module.exports = {
  devServer: {
    port: HTTP_LOCAL_PORT,
    proxy: DEBUG ?  {
    '/resources': {
      target: HTTP_LOCAL_PROTOCOL + HTTP_LOCAL_HOST+ ':' + HTTP_LOCAL_PORT +'/',
      pathRewrite: {'^/resources' : ''},
    },
    '/nmclient/api/*': {
      target: TARGET_REST_URL,
      secure: false
    },
    '/wbm/locales/*': {
      target: TARGET_REST_URL,
      secure: false
    },
    '/wbm/custom/*': {
      target: TARGET_REST_URL,
      secure: false
    }
  } : null
  },
  entry: ['es6-promise', APP_DIR + "/main.js"],
  devtool: DEBUG ? "inline-sourcemap" : null,
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include : APP_DIR,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      },
	  {
		test: /\.json$/,
		include: /node_modules/,
		loader: 'json-loader'
      }
    ]
  },
  output: {
    path: OUTPUT_DIR,
    publicPath: "/assets/",
    filename: "bundle.js"
  },
  plugins: DEBUG ? [
    new webpack.DefinePlugin({
     'process.env': {
       'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       'HTTPSERVER_HOSTNAME': JSON.stringify(process.env.SERVERHOSTNAME)
     },

     __CLIENT__: true,
     __SERVER__: false,
     __DEVELOPMENT__: true,
     __DEVTOOLS__: true
   }),
  ] : [
  new webpack.DefinePlugin({
   'process.env': {
     NODE_ENV: '"production"'
   },

   __CLIENT__: true,
   __SERVER__: false,
   __DEVELOPMENT__: false,
   __DEVTOOLS__: false
 }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false ,
    compress:{
      drop_console:true,
    }
    }),
  ],
};

[jledentu]

Mmh, it seems that chart.js/dist/chart.js contains object spread syntax ({ ...object }), that triggers the error. You can fix the error by including the chart.js lib in your /\.jsx?$/ rule, but I think there is an issue in Chart.js.

[jledentu]

Actually Chart.js 3 doesn't support legacy browsers, so it's normal to find Object spread syntax in the library. The issue is that your configuration doesn't support this syntax.

[vamsigutta]

Thanks @jledentu , The issue was babel was not transpiling the code for chartjs, When the configuration is changed to include the chartjs folder as well, the issue got resolved