Embedding not working from CDN

maartenbreddels commented 6 years ago

If I create a html page using a snippet generated from the the notebook using 'embed widget' menu item, that will not work:

embed-amd.js:198996 Uncaught (in promise) TypeError: Cannot read property 'BoxGeometryModel' of undefined
    at embed-amd.js:198996

The modules resolved to undefined :(

If I put jupyter-threejs.js used on readthedocs in the same directory, it does work, so I'm not sure what is wrong with the CDN version

vidartf commented 6 years ago

What is the line that fails? Something like require(...)? If so, what is the ... arguments, and what is the source of the require function?

maartenbreddels commented 6 years ago

https://github.com/jupyter-widgets/ipywidgets/blob/377594cb6f835d2c4ff3b7eb067f9868f7ff8f80/packages/html-manager/src/htmlmanager.ts#L77 module is undefined here. I tried debugging it, but have no idea how that is possible.

maartenbreddels commented 6 years ago

(btw, it's the line below that gives the exception)

vidartf commented 6 years ago

If you debug this line: https://github.com/jupyter-widgets/ipywidgets/blob/377594cb6f835d2c4ff3b7eb067f9868f7ff8f80/packages/html-manager/src/htmlmanager.ts#L73

What is the loader? Could you step into it until it does a require call?

maartenbreddels commented 6 years ago

loader is requireLoader, and it does do a request, that all goes fine, request leads tot a 200 status code, really confusing.

maartenbreddels commented 6 years ago

This is the html btw:

<html><head>

<!-- Load require.js. Delete this if your page already loads require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>
<!--<script src="jupyter-three.js"></script>-->
<script src="embed-amd.js"></script>
<script type="application/vnd.jupyter.widget-state+json">
{
    "version_major": 2,
    "version_minor": 0,
    "state": {
        "ec9dc4ad96864404b1e52bd144988b9a": {
            "model_name": "BoxGeometryModel",
            "model_module": "jupyter-threejs",
            "model_module_version": "~1.0.0",
            "state": {
                "_model_module_version": "~1.0.0",
                "_view_module": null,
                "_view_module_version": "",
                "depth": 15,
                "depthSegments": 15,
                "height": 10,
                "heightSegments": 10,
                "width": 5,
                "widthSegments": 5
            }
        },
        "2e11356c28e54a91b54cb2f119e3a1cd": {
            "model_name": "LayoutModel",
            "model_module": "@jupyter-widgets/base",
            "model_module_version": "1.0.0",
            "state": {}
        },
        "18f9305f97db4bcc819b3a0abc7ba1ea": {
            "model_name": "WebGLShadowMapModel",
            "model_module": "jupyter-threejs",
            "model_module_version": "~1.0.0",
            "state": {
                "_model_module_version": "~1.0.0",
                "_view_module": null,
                "_view_module_version": ""
            }
        },
        "87adeb97400e48c5bc59a32afbef6faa": {
            "model_name": "PreviewModel",
            "model_module": "jupyter-threejs",
            "model_module_version": "~1.0.0",
            "state": {
                "_model_module_version": "~1.0.0",
                "_view_module_version": "~1.0.0",
                "child": "IPY_MODEL_ec9dc4ad96864404b1e52bd144988b9a",
                "layout": "IPY_MODEL_2e11356c28e54a91b54cb2f119e3a1cd",
                "shadowMap": "IPY_MODEL_18f9305f97db4bcc819b3a0abc7ba1ea"
            }
        }
    }
}
</script>
</head>
<body>

<script type="application/vnd.jupyter.widget-view+json">
{
    "version_major": 2,
    "version_minor": 0,
    "model_id": "87adeb97400e48c5bc59a32afbef6faa"
}
</script>

</body>
</html>

vidartf commented 6 years ago

I think the problem is that requirejs is not built to take an URL as an argument. It works, but it's not how it is meant to be used, and it fails as pythreejs is exported as a named library (define(name, deps, factory)). I think ipywidgets should maybe do this when falling pack to CDN:

requirejs.config({
    paths: {
        moduleName: moduleNameToCDNUrl(moduleName, moduleVersion)
    }
});

maartenbreddels commented 6 years ago

Any idea why that only happens to pythreejs?

vidartf commented 6 years ago

Likely because it uses a named definition instead of an anonymous one.

vidartf commented 6 years ago

Having upstreamed the fix, which was accepted and released I will close this issue now.

maartenbreddels commented 6 years ago

👍

jupyter-widgets / pythreejs

Embedding not working from CDN #171