3

I am trying to use RequireJS to load the plotly and d3 libraries in my js code. I have tried this:

require.config({
    paths: {
       d3: '/static/scripts/plotly/dependencies/d3.v3.min',
       plotly: '/static/scripts/plotly/plotly.min'
    }
}); 
require(['d3'], function(d3) {
    d3();
}); 
require(['plotly'], function(plotly) {
    plotly();
});    

But this doesn't work. When my js function is called I get:

Uncaught ReferenceError: plotly is not defined
Uncaught ReferenceError: Plotly is not defined
Uncaught ReferenceError: d3 is not defined
Uncaught TypeError: d3 is not a function

What is the proper way to use RequireJS in this situation?

Updating post with current version of code, still not working.

In the calling script I have this now:

require.config({
    paths: {
        heatmap: '/static/scripts/heatmap',
        d3: '/static/scripts/plotly/dependencies/d3.v3.min',
        plotly: '/static/scripts/plotly/plotly.min',
    }
});
require(['d3', 'plotly', 'heatmap'], function(d3, plotly, heatmap) {
    generate_heatmap();
});

And it fails with:

Uncaught ReferenceError: Plotly is not defined(anonymous function) @ plotly.min.js:17

The function Plotly (upper case P) is defined in plotly.min.js. Do I have to add some reference to that function somewhere?

3 Answers 3

2

You need a shim for Plotly since it depends on D3, and according to the Plotly docs, it looks like jQuery is also needed. Your config should look like:

/*
main.js file
*/
require.config({
  paths: {
    d3: '/static/scripts/plotly/dependencies/d3.v3.min',
    jquery: '/path/to/jquery',
    plotly: '/static/scripts/plotly/plotly.min'
  },

  shim: {
    plotly: {
      deps: ['d3', 'jquery'],
      exports: 'plotly'
    }
  }
});

require(['d3', 'plotly'], function(d3, plotly) {
  console.log(plotly); // Object {Lib: Object, util: Object...}
  console.log(d3); // Object {version: "3.5.6", behavior: Object...}
});

In your index.html you should have only a single script tag:

<script data-main="main" src="/path/to/require/folder/require.js"></script>

If you want to use D3 and Plotly in another JS file that uses require then you should be using the AMD style:

/*
foo-bar.js
*/
define(['d3', 'plotly'], function(d3, plotly) {
    var foo = {};

    function bar() {
       // Some code here...
    }

    // This will allow other modules to use
    // the foo object and the bar function.
    return fooBar {
        foo: foo,
        bar: bar
    }
});

Now, you can use foo-bar.js in another module (assuming the two files are on the same directory level):

define(['./foo-bar'], function(fooBar) {
    console.log(fooBar.foo) // Object
    console.log(fooBar.bar) // function() {}
});
Sign up to request clarification or add additional context in comments.

5 Comments

I already have jquery loaded so I don't need that. My function that depends on d3 and plotly is not an anonymous function. It is called from another js file that also uses RequireJS. When I added that function name like this require(['d3', 'plotly'], function generate_heatmap(d3, plotly) then it is no longer found by when it's called. Is there a way to use this with a named function?
If you're using Require.js, then you should also use it to load jQuery. Require.js doesn't like it when you load other JS files using additional <script> tags. You should only have a single <script data-main="main" src="require.js"> where main` is referring to you JS file with require.config. See my updated answer.
Well if that is a requirement, then I don't think RequireJS will work for me. This is part of a very large django based app with a lot of js files and template files with js code in them. JS libs get loaded all over the place and I cannot change all that. I am just trying to add some new functionality to one place. In this instance the url is invoked with a jQuery load() and if I put any js code in the html that is loaded it gets ignored. So I can't load js libs with <script> tags in that html. Hence trying to use RequireJS. Also, if I use an anonymous function as you show, how do I call it?
Please see my latest update which I hope answers your question.
Thanks for the excellent example.I understand it much better now,and I was able to get it working.However this is a django based app, and when I ran using the development server (which I need to do frequently for debugging) the require.js file was not found.I have frequently had issues with the django development server not finding static files, but I've only experienced it with CSS files, never with js files. I don't have time to debug that, so at least for now I'm not using require and I'm bringing in all the js files I need it our common.html template. Not so efficient, but what can you do?
1

I had the same problem, it's a defect/oversight in Plotly. The error occurs on the last line of the library itself (plotly.js / plotly.min.js):

...:414}]},{},[305])(305)});Plotly.version='1.0.0';

I suspect this is a problem with the module pattern being used and the library's own code to detect AMD loaders.

I was able to workaround it removing the last line, which I'd guess doesn't cause any break in functionality.

...:414}]},{},[305])(305)});

Comments

0

Have you tried coupling your third Java script file with these two files. Here is a suggestion:

require.config({
    paths: {
       d3: '/static/scripts/plotly/dependencies/d3.v3.min',
       plotly: '/static/scripts/plotly/plotly.min',
       myfile: '/stattic/scripts/myfile',
    }
});

require(['d3', 'plotly', 'myfile'], function(d3, plotly, myfile) {
    generate_heatmap();
});

1 Comment

I tired that and it's still not working. I updated my original post to show the current code and error.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.