Chartist-js: Import not working with webpack+babel

[dlwalsh]

I'd like to use chartist in the manner below. My workflow uses webpack and babel.

import Chartist from 'chartist';

This throws the following in the browser: Uncaught TypeError: Cannot set property 'Chartist' of undefined

I have got around this by forking chartist and tweaking the factory code in the manner described here: https://github.com/gregjacobs/Autolinker.js/issues/86#issuecomment-74487812

It would be great if this could be incorporated into the master branch.

[gionkunz]

hey there. Thanks for the report. We use grunt-umd which is using the UMD pattern from Adi Osmani. Can you check against grunt-umd? I know they are using templates that can also be customized. Not sure if we should just override those. Ill also take a look whats haplening never used it with webpack but browserify and systemjs.

[DavidWells]

+1 on this. I fixed the same way with https://github.com/gregjacobs/Autolinker.js/issues/86#issuecomment-74487812

if I changed https://github.com/gregjacobs/Autolinker.js/blob/master/dist/Autolinker.js#L2
to if (root && typeof define === 'function' && define.amd) {

[hambyiii]

+1 from me as well. Would rather use Chartist than D3 but lack of webpack+babel support will push me off.

[kinetifex]

+1 Any updates or timeline on this?

[opensourceportfolio]

was anyone able to find a clean solution without resorting to forking the code?

[chiefcll]

https://github.com/gionkunz/chartist-js/pull/772

[gionkunz]

Thanks @chiefcll . This will be distributed with the next release.

[maxknee]

When will the new release go out?

[gionkunz]

0.9.9 is scheduled for the upcoming weekend

[ricardobanegas]

For me this is still broken with latest version 0.10.1.

Uncaught TypeError: Cannot set property 'Chartist' of undefined

When using latest Webpack 2 + Babel + babel-preset-es2015

import Chartist from 'chartist'

Update: Problem gets resolved when updating to babel-preset-es2016, but this is not ideal.

Any ideas on how to solve this?

[gionkunz]

Maybe someone on this thread can answer? I don't use Chartist on webpack that much.

[ricardobanegas]

I still have the error, so I had to patch it myself. I guess the problem lies within the way Chartist declares the module for universal use.

Maybe this article shares some light on the subject?
Javascript Library starter using Webpack & ES6

Also, I noticed that you're using grunt-umd, and it has been patched to 2.4.0, could be worth to update and see if that solves the problem.

[gionkunz]

Ok, I'll create a task to update to the latest grunt-umd.

[noorhammad]

Does anyone have a patch for the webpack issue?

https://github.com/gregjacobs/Autolinker.js/issues/86#issuecomment-74487812

Does not resolve.

[sternert]

@ricardobanegas "so I had to patch it myself":
How did you patch it?

[powerbuoy]

Any progress on this? I'm having the same issue with Aurelia CLI.

[MartinMuzatko]

Import works flawlessly. As stated in another issue, not all plugins return functions.

import Chartist from 'chartist' worked perfectly.

[MartinMuzatko]

Now having the same problem with babel-preset-env ^^'

[hovancik]

I'm trying to use Chartists with Rails 5.2 (webpacker) and import does not work for me.

[wiscow]

having this issue also. Importing 'chartist' does not seem to resolve the issue. the Js resolves but having issues with the css.

[mlg87]

three years later, and this still seems to be an issue. why is this closed? both import Chartist from 'chartist' and require('chartist') lead to this error for me

edit: using 0.10.1

[math0ne]

I fixed this by changing:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module unless amdModuleId is set
    define('Chartist', [], function () {
      return (root['Chartist'] = factory());
    });
  } else if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory();
  } else {
    root['Chartist'] = factory();
  }
}(this, function () {

to this:

(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory();
  } else {
    root['Chartist'] = factory();
  }
}(this, function () {

I'm sure I'm doing something wrong but this worked for me.