tsur / canvasjs

39 stars 40 forks source link

CanvasJS with Webpack and VueJS #10

Closed CedsTrash closed 6 years ago

CedsTrash commented 6 years ago

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

Thanks

vrimar commented 6 years ago

Your webpack config should be fine, the package itself isn't properly built. Check out my fork to get it working https://github.com/vasilrimar/canvasjs. You can install through npm by running npm install --save github:vasilrimar/canvasjs and importing using import * as CanvasJs from 'canvasjs'.

CedsTrash commented 6 years ago

Thanks a lot @vasilrimar, it works perfectly with your package. Any idea about what's wrong on the original package ?

vrimar commented 6 years ago

@cedriccouret If you look at the source, the modules aren't properly exported (here for example)

CedsTrash commented 6 years ago

Ok I see, thanks a lot for your time !