Ng2-charts: RollUp and require

Created on 14 Jun 2017  路  3Comments  路  Source: valor-software/ng2-charts

I

 include: ['node_modules/rxjs/**', 'node_modules/ng2-charts/**'
           ]
            , namedExports: { 'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule'] }

Bu at browser show

bundle.min.js:1 Uncaught ReferenceError: require is not defined
    at bundle.min.js:1
    at bundle.min.js:1

when open it show problem with chart.js Core and all dependency problem, when i put this to comonjs , show problem with some './conversions'

Most helpful comment

I had the same issues as you are describing, here is my rollup config file that is working

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

export default {
    entry: 'src/main-aot.js',
    dest: 'dist/build.js', // output a single application bundle
    sourceMap: true,
    sourceMapFile: 'dist/build.js.map',
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: [
                '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/index.js': ['ChartsModule']
            }
        }),
        uglify()
    ]
}

Hope this helps...

All 3 comments

I had the same issues as you are describing, here is my rollup config file that is working

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

export default {
    entry: 'src/main-aot.js',
    dest: 'dist/build.js', // output a single application bundle
    sourceMap: true,
    sourceMapFile: 'dist/build.js.map',
    format: 'iife',
    plugins: [
        nodeResolve({ jsnext: true, module: true }),
        commonjs({
            include: [
                '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/index.js': ['ChartsModule']
            }
        }),
        uglify()
    ]
}

Hope this helps...

Was getting ReferenceError: require is not defined on Build.js when using rollup on a project with ng2-charts (I believe due to use of require in the chart.js file used in ng2-charts). After chasing my tail for a full day on this, @SinghSukhdeep your solution worked perfectly.

This package has been updated to Angular 7, check out the demo app. If this issue is still relevant, feel free to reopen this with a stacklitz/codepen/... example showing the issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dj-techs picture dj-techs  路  3Comments

brandonreid picture brandonreid  路  3Comments

RKornu picture RKornu  路  3Comments

sarn3792 picture sarn3792  路  4Comments

shenriksen4 picture shenriksen4  路  3Comments