Chart.js: extend is not a function (v 2.7.0)

[roman-17]

Hi, we're using ng2-charts (v 1.6.0) which has dependency on chart.js
Everything was working fine - that is, until the last release.
Now we're getting

    TypeError: uF.extend is not a function
    at core.element.js:61
    at main-aot.js:3

The problem occurs with AoT build using rollup.
Rollup config:

import rollup      from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify';
import includePaths from 'rollup-plugin-includepaths';

export default {
    entry: '../ClientApp/account/dashboard/main-aot.js',
    dest: '../ClientApp/account/dashboard/bundle.js',
    sourceMap: true,    
    format: 'iife',
    plugins: [
        includePaths({
        include: {},
        paths: ['../ClientApp'],
        external: [],
        extensions: ['.js']
    }),
        nodeResolve({jsnext: true, module: true}),
        commonjs({
            include: [
                '../node_modules/rxjs/**', 
                '../node_modules/email-addresses-custom/lib/**', 
                '../node_modules/jstz-custom/**',               
                '../node_modules/rxjs/**',              
                '../node_modules/chart.js/**',
                '../node_modules/chartjs-color/**',
                '../node_modules/chartjs-color-string/**',
                '../node_modules/color-convert/**',
                '../node_modules/color-name/**',
                '../node_modules/ng2-charts/**'          
            ],
            namedExports: {
                '../node_modules/chart.js/dist/Chart.js': ['chart.js'],
                '../node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']
            }
        }),
        uglify()
    ]
}

Environment

• Chart.js version: 2.7.0
• Browser name and version: Chrome 60.0.3112

I am not sure whether is it problem with chart.js or just rollup config.

[simonbrunel]

We are reorganizing internal dependencies (#4478) but it's not fully done yet and still need to be evaluated sequentially from src/chart.js. extend is defined in src/core/core.helpers.js and is added to the helpers in chart.js#L9.

I guess your issue is that src/core/core.element.js is "compiled" before src/chart.js and so helpers.merge is not yet defined. Hopefully, this should be fixed in 2.8 (we also plan to switch to rollup and ES6 import/export).

Not sure what the workaround, maybe in your commonjs.include array you can try to replace:

'../node_modules/chart.js/**'

by

'../node_modules/chart.js/src/chart.js'`

[roman-17]

@simonbrunel thanks for quick response. Tried your workaround but now I'm getting

ReferenceError: require is not defined
 at core.js:3
 at main-aot.js:3

Do you know when 2.8 is scheduled for release?

[simonbrunel]

I don't know how rollup-plugin-commonjs works exactly, not sure why now it considers that require is not defined. Isn't it possible for you to simply include our UMD built (../node_modules/chart.js/dist/Chart.min.js or Chart.bundle.min.js) instead to have rollup processing our source files which are not yet fully designed to be imported separately?

We just released 2.7 (2 days ago), nothing planned for 2.8. We will certainly release a 2.7.1, but not sure #4478 will be done until then.

[roman-17]

Tried the following but still the same

commonjs({
            include: [
                '../node_modules/rxjs/**', 
                '../node_modules/email-addresses-custom/lib/**', 
                '../node_modules/jstz-custom/**', 
                '../node_modules/ng2-charts/**'             
            ],
              namedExports: {               
                '../node_modules/chart.js/dist/Chart.js': ['chart.js'],           
                '../node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']
            }

ReferenceError: require is not defined
    at chart.js:4
    at main-aot.js:3

Maybe I should try creating issue at ng2-charts github

[imranmomin]

@roman-17 - were you able to get a workaround for the issue.

[roman-17]

@imranmomin - for the time being, we're just using older version of chart.js - replacing whole folders of chart.js, chartjs-color and chartjs-color-string in node_modules (not so sure about necessity of replacing the last two, but it doesn't hurt)

It's far from ideal though..

[imranmomin]

Thanks @roman-17

[quiringk]

Been working on this all day, super frustrating because the error message doesn't easily lead you to believe that chart.js is causing the problem. Confirmed that all you need to do is go back to chart.js 2.6.0. The other folders are OK. (Note that ng2-charts install will install chart.js 2.7.0, so you need to specifically delete that and install 2.6.0 for just chart.js.)

[simonbrunel]

We are close to release 2.7.1: can someone be kind enough to prepare a package (or fiddle if possible) with everything needed to easily reproduce this issue and help us to find a temporary fix until 2.8? I'm not familiar with Angular and unfortunately don't have time to figure out how to setup that kind of environment.

[roman-17]

Well.. it looks like we are going to abandon ng2-charts, so someone else gotta do it.

[iquiw]

https://github.com/iquiw/chart-rollup

I'm not sure this is what you want, this simple repo can cause TypeError: helpers.extend is not a function.

[simonbrunel]

@iquiw thanks a lot, should be enough to investigate.

[benmccann]

@roman-17 would you be able to take a look at #4878? We're waiting for your feedback before releasing 2.7.1 with the fix for this issue. Thanks!

[roman-17]

@benmccann yeah, sorry - it does work indeed.
Even though, like I said earlier, we are most likely to abandon ng2-charts and chart.js.. but anyway: nice job and thank you.