Trouble Loading *.mjs file

Dash Python
1

I’m trying to learn how to use an mjs file in Dash. So far I have a file, example.mjs, in the assets folder. It contains this code

// Export a named function
export function greet(name) {
  return `Hello, ${name}!`;
}

// Export a default variable
const PI = 3.14159;
export default PI;

when I run my app, I get this error in the developer console

Dash mjs Error
Dash mjs Error1034×309 4.15 KB

I read the docs and don’t see much in the way of an example to see what I’m missing. I’m using Dash 3.2.0. Any tips would be appreciated!

2

I’m having this exact same issue. I have several clientside callbacks in separate .js files that I would like to simplify by defining some reusable functions in a separate file.

Here’s my simplified file structure:

--> assets
----> clientside_callbacks
------> otd_callback.js
------> backlog_callback.js
------> figure_functions.mjs
--> app.py
--> pages
----> page_1
----> page_2
----> etc...

Here’s figure_functions.mjs - the intent is that this is a module with some common functions used for updating figures and traces that would be used in multiple callback functions.

export function hide_all_traces(figure) {
    /**
     * Hides all traces in figure
     */
    for (var key in figure['data']) {
        figure['data'][key]['visible'] = false;
    }
};

Here’s a simplified version of otd_callback.js In the real app there are a large number of clientside callbacks, so to keep it organized I would like to be able to group them by page.

import { hide_all_traces } from "./figure_functions.mjs";

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        update_otd_trace_visibility: function(figure) {

            hide_all_traces(figure);

            // other stuff

            const updated_figure = Object.assign({}, figure);
            return updated_figure; 
        }
    }
});

backlog_callback.js is similar and also depends on functions in figure_functions.mjs. The goal is to not have a single giant .js file for all my clientside callbacks and also not need to copy functions from figure_functions.mjs into each callback file.

When running my app I get the error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.

Any insight is very much appreciated!

3

This idea might sound stupid (and I thought for a while if posting it) but did you try renaming the file to figure_functions.js?

@Arick feedback would be appreciated

4

Not a stupid idea! I originally tried using figure_functions.js but that resulted in an error about imports not allowed outside of a module. I read in the docs that you could import modules using the .mjs file type.

I was able to find a work around though - as you suggested, I changed the file to figure_functions.js, then removed the export keywords and defined them as regular functions. In the files where I use these functions (like otd_callback.js) I removed the import and this just … worked?

I’m much more familiar with Python than JS, so my Python brain is struggling with why this would work - how can I use a function I defined in a completely different file without importing it? It works, but I’m not satisfied with it :smiley:

Also, I’m wondering if this is a bug in Dash, or if I’m misunderstanding the documentation here: Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly .

5

I’m just guessing, but the error you got sounds like if at some point the browser tries to use the function defined in the mjs file and the corresponding file is then uploaded to the internal server. This server checks the mime type and does not recognize it as valid js and defaults to mime type text. Which is not allowed and the corresponding error is raised.

Even if it might be complete bs, I like my little story :joy:

6

Hi @Arick

Actually, .mjs files do work in Dash. The error you had was because you can’t use import in a regular .js file. It also has to be a .mjs file.

It’s ok to define functions in different files. Dash loads all the .js (and .mjs) file at the start. They are loaded by file name, sorted alphanumerically so you may have to be careful where they are defined. If the function is used inside another function, it’s ok, because it’s called at run-time. But if it was called in the top level, it would have to be loaded already.

Here’s an example of using .mjs files in dash.

assets/clientside.mjs

import {display} from "./clientsideModule.mjs";

window.dash_clientside = window.dash_clientside || {};

window.dash_clientside.clientside_module = {
    transform: function(v) {
        // other stuff

        return display(v)
    },
}

assets/clientsideModule.mjs

const display = (value) => 'Client says "' + value + '"';

export {display};

app.py


from dash import Dash, Input, Output, ClientsideFunction, html, dcc
app = Dash()

app.layout = html.Div(
    [
        dcc.Input(id="input"),
        html.Div(id="output-clientside"),
        html.Div(id="output-serverside"),
    ]
)

@app.callback(Output("output-serverside", "children"), Input("input", "value"))
def update_output(value):
    return 'Server says "{}"'.format(value)

app.clientside_callback(
    ClientsideFunction(namespace="clientside_module", function_name="transform"),
    Output("output-clientside", "children"),
    Input("input", "value"),
)

if __name__ == "__main__":
    app.run(debug=True)
4 Likes
7

Hello @AnnMarieW , thank you so much for your reply - this worked perfectly!

2 Likes