You must be logged in to post your query.
Home › Forums › Chart Support › CanvasJS with Webpack and VueJS
Tagged: VueJS, Webpack
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: '/' } } ] };
@cedstrash
We are looking into it and will get back to you at the earliest.
—– Sanjoy Debnath Team CanvasJS
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
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.
Sorry, CanvasJS doesn’t provide ES6 modules as of now.
—- Sanjoy Debnath Team CanvasJS
You must be logged in to reply to this topic. Login/Register