Custom component with Multi-Page Apps

Dash Python
1

I built a custom component (https://plot.ly/dash/plugins) that runs a html script element, and that is working fine. For example here’s how I use it

import dashcomps  # my component directory
....
app.layout = html.Div([
    html.H1("Testing component"),
    dashcomps.Script(scriptText='console.log("testing js code")')
])

However, when I try to use this same component on a multi-page app following the User Guide, it says in the browser console that the component was not found.

Here is the code snippet (based on https://plot.ly/dash/urls):

import dashcomps  # my component directory
....
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

page_1_layout = html.Div([
    html.H1("Testing login"),
    dashcomps.Script(scriptText='console.log("testing js code")')
])

page_2_layout = html.Div([
    html.H1("Testing validate"),
    dashcomps.Script(scriptText='console.log("testing js code")')
])

index_page = html.Div([
    dcc.Link('Go to Login', href='/login'),
    html.Br(),
    dcc.Link('Go to Validate', href='/logout'),
])

# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/login':
        return page_1_layout
    elif pathname == '/logout':
        return page_2_layout
    else:
        return index_page

Here is the console error:

Uncaught (in promise) Error: dashcomps was not found.
    at Object.resolve (bundle.js?v=0.11.1:9)
    at s (bundle.js?v=0.11.1:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.1:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.1:9)
    at Array.map (<anonymous>)
    at s (bundle.js?v=0.11.1:9)
    at e.value (bundle.js?v=0.11.1:9)
    at p._renderValidatedComponentWithoutOwnerOrContext (react-dom@15.4.2.min.js?v=0.11.1:13)

Any suggestions on what could be leading to this? Does the multi-page app approach somehow change the import statement?

1 Like
2

For now you will need to display a hidden version of the component in the initial layout, see Display tables in Dash for more context.

3

Excellent thanks for the link, that worked perfectly.

4

Worked for me too, but just going to add that I was missing app.scripts.config.serve_locally = True and without it, this error persisted. Just wanted to put this out there in case anyone else runs into the same issue!

1 Like