Search code examples
javascriptjupyteres6-modulesjupyter-contrib-nbextensions

How to load ES6 module for Jupyter notebook extension?


I currently use Jupyter Notebook Server version 5.7.0. I would like to write a Jupyter notebook extension, that loads some ES6 module by adding a script tag to the document, e.g:

<script type="module" scr='./es6module.js'>

The script tag is added but I did not manage to set the scr path correctly/provide my file with the correct mime type.

The above script tag looks for the es6module.js file in the notebook-dir.

I also tried to reference a file in my extensions folder:

<script type="module" scr='/nbextensions/my_extension_folder/es6module.js'>

For both cases I get

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

=>Is there some http path, where the files are served with the required mime type to allow for ES6 modules? Maybe something like

<script type="module" scr='/http/nbextensions/my_extension_folder/es6module.js'>

=>Or should I try to start my own http server using Python?

Jupyter.notebook.kernel.execute('http.server');

Example extension code:

define([
    'require',
    'jquery',
    'base/js/namespace'       
], function(
    requirejs,
    $,
    Jupyter       
) {

    var load_ipython_extension = function() {  
        if (Jupyter.notebook !== undefined && Jupyter.notebook._fully_loaded) {
            init();                    
        } else {
            console.log("[workspace_module] Waiting for notebook availability")
            events.on("notebook_loaded.Notebook", function() {
                init();                           
            })
        }
    };

    function init(){

        console.log("[workspace_module] trying to load workspace.js")

        var moduleScript = document.createElement('script');
        moduleScript.setAttribute('type','module'); 

        moduleScript.setAttribute('src','/nbextensions/my_extension_folder/es6module.js');  

        document.head.appendChild(moduleScript);
    }


    return {
        load_ipython_extension: load_ipython_extension       
    };

});

Edit

Might be related to

https://github.com/jupyter/notebook/pull/4468


Solution

  • I tried it with Jupyter Notebook version 5.7.8 and loading ES6 modules works now.