CanvasJS with Webpack and VueJS

[cedstrash]

Hi,

I’m creating a VueJS app and I’d like to use CanvasJS.
I’ve npm installed the library, I’m importing it in my Vue component the ES6 way, but when I’m trying to build I get an error saying this:

Module parse failed: ….\node_modules\canvasjs\src\charts\index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export SplineChart from ‘../charts/spline’;
| export ColumnChart from ‘../charts/column’;
| export StackedColumnChart from ‘../charts/stacked_column’;

It looks like my Webpack config is incomplete, could someone help me with this ?

Here is my rules config:

module.exports.module = {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    js: 'babel-loader' + Mix.babelConfig(),
                    scss: 'vue-style-loader!css-loader!sass-loader',
                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
                },

                postcss: [
                    require('autoprefixer')
                ]
            }
        },

        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader' + Mix.babelConfig()
        },

        {
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader']
        },

        {
            test: /\.(png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
                name: 'images/[name].[ext]?[hash]',
                publicPath: '/'
            }
        },

        {
            test: /\.(woff2?|ttf|eot|svg|otf)$/,
            loader: 'file-loader',
            options: {
                name: 'fonts/[name].[ext]?[hash]',
                publicPath: '/'
            }
        }
    ]
};

[Sanjoy]

@cedstrash

We are looking into it and will get back to you at the earliest.

—–
Sanjoy Debnath
Team CanvasJS

[Sanjoy]

@cedstrash

Please checkout this example on using CanvasJS chart in Vue.js. You don’t need to build official CanvasJS library, you can include the CanvasJS script in the head of the HTML.

___
Sanjoy Debnath
Team CanvasJS

[cedstrash]

Hi, thanks for your answer.

I’ve done that before but I’m using Webpack to bundle many things together, for example all my 3rd party libraries are combined and minified in a single js bundle.
That’s why I need ES6 modules.

[Sanjoy]

@cedstrash

Sorry, CanvasJS doesn’t provide ES6 modules as of now.

—-
Sanjoy Debnath
Team CanvasJS