Home forums Using CanvasJS CanvasJS with Webpack and VueJS

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  Sanjoy 10 months, 1 week ago.

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

    cedstrash
    Member

    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

    Sanjoy
    Participant

    @cedstrash

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

    —–
    Sanjoy Debnath
    Team CanvasJS

    #18963

    Sanjoy
    Participant

    @cedstrash

    Here is an example of 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

    #18966

    cedstrash
    Member

    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

    Sanjoy
    Participant

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