Can canvasjs work with webpack

Question

I am trying to use canvasjs in a webpack-based project.
I import canvasjs via code below
import '../third/canvasjs/canvasjs.min';
But there is an error of &#8220;Uncaught ReferenceError: chart is not defined&#8221; when code below is executed:
b && (chart = this.chart || this, chart.render())
It occurs when I execute code below:
chart2.title.set('fontSize', chart1.title.get('fontSize'), true)
It seems canvasjs.min.js is not in &#8220;use strict&#8221; mode, but it is now running in a &#8220;use strict&#8221; context.

adithya-menon · Answer

@jgurtz,

We have just added CanvasJS React Chart & StockChart packages to NPM registry. Now, you can add our React chart & stockchart packages to your React application via NPM. Please refer to the release blog for more information. Please check out our NPM package and let us know your feedback.

---
Adithya Menon,
Team CanvasJS

jkeith · Answer

I forgot to mention that I derived the above by following the React instructions for create-react-app (https://canvasjs.com/docs/charts/integration/react/), then doing a "yarn eject" to see the loader it was using in webpack. I had to trial-and-error my way through the correct path, presets, and plugins that made it work with the rest of my project.

jkeith · Answer

I found I needed to fiddle with my Webpack config a bit to get something working. In case it helps somebody else, this is what worked for my React app...

1. Copied canvasjs.min.js and canvasjs.react.js to a new folder at the root called "assets"
2. Installed some babel stuff "npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties"
3. Modified my webpack.config.js to use babel to load canvasJS files
`
                {
                    test: /\.js$/,
                    include: [
                        path.resolve(__dirname, 'assets'),
                    ],
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', { targets: "defaults" }],
                                "@babel/preset-react"
                            ],
                            "plugins": [
                                "@babel/plugin-proposal-class-properties"
                            ]
                        }
                    }
                },
`

I'm not entirely sure all of the babel setting are correct or necessary, but I found it to work via trial-and-error so I'm likely to keep it as-is. I hope this helps.

indranil · Answer

@jgurtz,

We have just released v2.1 with module import/export with which you can easily integrate front-end framework like React, Angular, Vuejs, etc. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

___________
Indranil Deo,
Team CanvasJS

jgurtz · Answer

@vishwas

Thank you for getting back to us so fast!

That's great news but, this brings up new concerns. The trial version would be nice and easy to use since it's available through NPM but if the commercial version isn't, then we have to manually install it when we deploy. This would become annoying especially if the package has any dependencies because we wouldn't have the package manager to resolve dependencies.

I'm not necessarily saying it's a deal breaker but ease of use is very important because we plan on using whichever graphing library we choose in multiple projects.

Also, when do you think the npm package(s) will be ready?

Front End Technology Samples

Server Side Technology Samples

FORUMS

Login to Ask a Question or Reply

Can canvasjs work with webpack