jQuery flot charts generate "Uncaught TypeError: e.setTimeout is not a function" with webpack

Viewed 431

When I include jquery.flot.resize.js via webpack, "Uncaught TypeError: e.setTimeout is not a function" is generated.

Here is my code.

import "jquery.flot/jquery.flot.js";
import "jquery.flot/jquery.flot.resize.js";

That makes type error in browser console like this.

Uncaught TypeError: e.setTimeout is not a function

If it load the same javascript with tag, it works well. The error only occurs on webpack.

3 Answers

In my case, following syntax solved this issue:

import * as [some-name] from '[reference to your file or directory]';

The error is caused by the assumption in the "jquery.flot.resize.js" that this contains window, which doesn't hold when compiling with webpack. The problematic code is not the sourcecode itself but in the copy-and-pasted dependency (jQuery resize event).

The problem seems to have been solved in October 2019 when they pasted a different version of the dependency. This change was released in flot 4.2.0.

If you need to use earlier version of flot the problem can be solved using webpack imports-loader, e.g. (having added imports-loader to the app (dev) dependencies):

// ./webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: require.resolve("jquery.flot/jquery.flot.resize.js"),
                use: "imports-loader?this=>window"
            }
        ]
    }
};

found the solution, apparently it is simpler than it seems for some way the graphs that they send to call with zero data get to fail so it is not necessary to paint the graph if there is no data to graph they are still at zero every month, then validate if There is no data to paint putting a message type "without data" instead of painting the graph in zeros it worked for me.

no data ? (No Results) : (chart)

Related