Cannot use v2 with requirejs

[lilorox]

Hi,

I can't get Chart.js v.2.0.2 working with requirejs.
Here is a basic example: https://jsfiddle.net/pa7x2ymq/

[lilorox]

This does not seem to work with 1.1.1 either: https://jsfiddle.net/oL9gh6be/1/
Am I doing something wrong?

[JelteMX]

I am having the same problem. I think this is due to the fact that they changed the buildscripts. The structure is totally different from v2.0.0-beta2

[RichardHeelin]

A quick work around is to add a shim for Chart.js, setting the exports flag to Chart, i.e.:

requirejs.config({
    baseUrl: '/js',
    paths: {
        'Chart': 'lib/Chart.min'
    },
    shim: {
        'Chart': {
            exports: 'Chart'
        }
    }
});

[JelteMX]

Hmmmm for the time being I have just built it using

> browserify src/chart.js -s chartjs -o build.js

Which created a normal AMD build for me that does work with requirejs.

[sassomedia]

Same issue here, was not able to get it built that way but the shim worked for me.

[sassomedia]

Guess I spoke too soon... the shim worked fine locally, though once the code was minified and ran from the server, I was getting errors due to the Chart object not containing various properties, i.e. Chart.defaults.global.elements was missing.

@JelteMX when running your command, I'm getting following error:

src/chart.js: line 1: /*!: No such file or directory
src/chart.js: line 2: CONTRIBUTING.md: command not found
src/chart.js: line 3: CONTRIBUTING.md: command not found
src/chart.js: line 4: CONTRIBUTING.md: command not found
src/chart.js: line 5: CONTRIBUTING.md: command not found
src/chart.js: line 6: CONTRIBUTING.md: command not found
src/chart.js: line 7: CONTRIBUTING.md: command not found
src/chart.js: line 8: CONTRIBUTING.md: command not found
src/chart.js: line 9: dist/: is a directory
src/chart.js: line 12: syntax error near unexpected token `('
src/chart.js: line 12: `var Chart = require('./core/core.js')();'

anything else you did prior to that?

[sassomedia]

Turns out that the build errors were due to copy/pasting the literal command up there that includes a >, which basically creates a file with "browserify" name, so that obviously won't work. Probably was meant to be a $ to indicate a terminal command.

In any case, just running browserify src/chart.js -s chartjs -o build.js still gave me an error;

Error: Cannot find module 'chartjs-color' from '/Users/elewis/Downloads/Chart.js-2.0.2/src/core'
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:107:15)

anything that I'm missing?

[etimberg]

@sassomedia I updated one of the dependencies to come from NPM rather than straight from git. Try wiping node_modules and re-running npm install

[sassomedia]

@etimberg thanks, that did the trick. Now running browserify does work and I'm able to load the chart, however it's the unminified code complete with moment.js (which I already have), so it's massive.

[etimberg]

@sassomedia I think you need to block browserify from pulling in moment. In our gulpfile we do:

var nonBundled = browserify('./src/chart.js')
    .ignore('moment')
    .bundle()
    .pipe(source('Chart.js'))
    .pipe(insert.prepend(header))
    .pipe(streamify(replace('{{ version }}', package.version)))
    .pipe(gulp.dest(outDir))
    .pipe(streamify(uglify({
      preserveComments: 'some'
    })))
    .pipe(streamify(concat('Chart.min.js')))
    .pipe(gulp.dest(outDir));