search

artus9033 / chartjs-plugin-dragdata

Draggable data points plugin for Chart.js
MIT License
261 stars 55 forks source link

Chart is not defined error when trying to import #59

Closed martaver closed 4 years ago

martaver commented 4 years ago

I'm trying to set this plugin up with react-chartjs-2, according to your demo.

I read your Gotchas section, which shows that I have to import chartjs-plugin-dragdata.

But when I do that I just get:

ReferenceError: Chart is not defined
    at eval (webpack:///external_%22Chart%22?:1:18)
    at Object.chart.js (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:816:1)
    at __webpack_require__ (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:20:30)
    at eval (webpack:///./src/index.js?:2:66)
    at Module../src/index.js (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:805:1)
    at __webpack_require__ (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:20:30)
    at /Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:84:18
    at Object.<anonymous> (/Users/martaver/Projects/sightful/git/sightful/node_modules/chartjs-plugin-dragdata/dist/chartjs-plugin-dragdata.js:87:10)

My import code:

import Chart from 'chart.js';
import 'chartjs-plugin-dragdata';

Using version chartjs-plugin-dragdata@1.1.3, chart.js@2.6.0 (as per demo) and react-chartjs-2@2.1.0 (also as per demo).

Without trying to import chartjs-plugin-dragdata, my Line chart renders fine (just not draggable, obviously).

Any idea what might be going on?

martaver commented 4 years ago

The line that fails is the export:

eval("module.exports = Chart;\n\n//# sourceURL=webpack:///external_%22Chart%22?");
martaver commented 4 years ago

Ahhhh got it!

Brain fart... I'm using nextjs and it was looking for the Chart instance during serverside render, probably on window (which didn't exist).

martaver commented 4 years ago

Thanks :D

chrispahm commented 4 years ago

That's good to now! I had a similar issue when trying to use the plugin in an Observable, where it silently failed to load due to a the missing window.Chart object... Anyway good you found it!

ylkhayat commented 9 months ago

@martaver I am wondering how did you get this to work with NextJS? I have been trying to link the plugin to the react-chartjs-2 but it's not working. Can you please provide what extra code did you write specific to NextJS that helped connecting the plugin to the package?

Im-Goutham commented 7 months ago

Do we have a solution on how to use with nextjs? @chrispahm @ylkhayat @martaver