Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Custom component with Multi-Page Apps

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

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.

Excellent thanks for the link, that worked perfectly.

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