Home Forums Chart Support CanvasJS with Webpack and VueJS

CanvasJS with Webpack and VueJS

Viewing 5 posts - 1 through 5 (of 5 total)
  • #18938

    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: '/'
                }
            }
        ]
    };
    
    #18947

    @cedstrash

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

    —–
    Sanjoy Debnath
    Team CanvasJS

    #18963

    @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.

    canvasjs chart integration with vuejs

    ___
    Sanjoy Debnath
    Team CanvasJS

    #18966

    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.

    #19195

    @cedstrash

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

    —-
    Sanjoy Debnath
    Team CanvasJS

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.