dash.exceptions.InvalidIndexException: Missing item new DashRenderer in index

I am creating a multi page Dash App. I tried to use html and css as it in inside the dash file like shown in this article https://towardsdatascience.com/how-to-build-a-complex-reporting-dashboard-using-dash-and-plotl-4f4257c18a7f
Here is my app.py file

import dash
import dash_renderer
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, url_base_pathname='/analytical_dashboard/')
server = app.server
app.config.suppress_callback_exceptions = True
index_string = ""

And here is my index.py

# -*- coding: utf-8 -*- 
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# see https://community.plot.ly/t/nolayoutexception-on-deployment-of-multi-page-dash-app-example-code/12463/2?u=dcomfort
from app import server
from app import app
import dash_renderer
import layouts  
import callbacks

# see https://dash.plot.ly/external-resources to alter header, footer and favicon
app.index_string = ''' 
  
<!DOCTYPE html>
<html lang="en">

<head>
    {%metas%}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Analytical Dashboard
    </title>
    {%css%}
    <link rel="ad icon" href="https://th.bing.com/th/id/R54834c49f801e088a0025aa14cbe7273?rik=46RqsjmhOPL07g&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_233159.png&ehk=%2b5fqaAKJrzuPFrAbhOf48hUhA0T4Ljwsq10Dzc3E13w%3d&risl=&pid=ImgRaw" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   

</head>

<body style="background-color:#202A44;">
 {%app_entry%}
  <footer>
            {%config%}
            {%scripts%}
  </footer>

    <!-- SIDEBAR -->
    <div class="sidebar">
        <div class="sidebar-logo">
            <img src="https://lh3.googleusercontent.com/wbAtqQNAh-ITzDVKWx5Ad09p3xHVndfQHc08j47kOJ0XO6Gq6zxc9hm4QQNczCsL29QTiWD8dKh6PJI-hT-gCnrAet-KX85y6wCSAaamM8LxE5S1wZ5y7uK4Or8JYVss0g=w1280" alt="Company logo">
            <div class="sidebar-close" id="sidebar-close">
                <i class='bx bx-left-arrow-alt'></i>
            </div>
        </div>
        <div class="sidebar-user">
            <div class="sidebar-user-info">
                <img src="https://img.icons8.com/android/48/000000/user.png" alt="User picture" class="profile-image">
            </div>
            <button class="btn btn-outline">
                <i class='bx bx-log-out bx-flip-horizontal'></i>
            </button>
        </div>
        <!-- SIDEBAR MENU -->
        <ul class="sidebar-menu">
            <li>
                <a href="#" class="active">
                    <i class='bx bx-home'></i>
                    <span><img src="https://img.icons8.com/small/32/000000/dashboard.png" alt="dash-home" class="home-icon">
                   dashboard-home
                   </span>
                </a>
            </li>
            <li class="sidebar-submenu">
                <a href="#" class="sidebar-menu-dropdown">
                    <i class='bx bx-user-circle'></i>
                    <span>
                    <img src="https://img.icons8.com/metro/26/000000/guest-male.png"/>
                    account</span>
                    <div class="dropdown-icon"></div>
                </a>
                <ul class="sidebar-menu sidebar-menu-dropdown-content">
                    <li>
                        <a href="#">
                            <img src="https://img.icons8.com/android/24/000000/edit.png"/>
                            edit profile
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          <img src="https://img.icons8.com/windows/32/000000/gear.png"/>  
                          account settings
                        </a>
                    </li>
                   
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class='bx bx-shopping-bag'></i>
                    <span>
                    <img src="https://img.icons8.com/plumpy/24/000000/gender-neutral-user.png"/>
                   customer</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class='bx bx-chart'></i>
                    <span>
                    <img src="https://img.icons8.com/material-outlined/24/000000/total-sales-1.png"/>
                    sales</span>
                </a>
            </li>
            
            <li class="sidebar-submenu">
                <a href="#" class="sidebar-menu-dropdown">
                    <i class='bx bx-category'></i>
                    <span>
                    <img src="https://img.icons8.com/material-sharp/24/000000/feedback.png"/>
                    feedback</span>
                    <div class="dropdown-icon"></div>
                </a>
                <ul class="sidebar-menu sidebar-menu-dropdown-content">
                  
                </ul>
            </li>
            <li class="sidebar-submenu">
                <a href="#" class="sidebar-menu-dropdown">
                    <i class='bx bx-category'></i>
                    <span>
                    <img src="https://img.icons8.com/metro/26/000000/process.png"/>
                    process</span>
                    <div class="dropdown-icon"></div>
                </a>
                <ul class="sidebar-menu sidebar-menu-dropdown-content">
                    <li>
                        <a href="#">
                             <img src="https://img.icons8.com/metro/26/000000/compass.png"/>
                             process monitoring
                        </a>
                    </li>
                    <li>
                        <a href="#">
                           <img src="https://img.icons8.com/windows/32/000000/product.png"/>
                           product
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          <img src="https://img.icons8.com/metro/26/000000/product.png"/>   
	          top products
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class='bx bx-mail-send'></i>
                    <span>
                      <img src="https://img.icons8.com/material-outlined/24/000000/mail.png"/>
                       mail</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class='bx bx-chat'></i>
                    <span>
                        <img src="https://img.icons8.com/metro/26/000000/chat.png"/>
                        chat</span>
                </a>
            </li>
            <li class="sidebar-submenu">
                <a href="#" class="sidebar-menu-dropdown">
                    <i class='bx bx-cog'></i>
                    <span>
                    <img src="https://img.icons8.com/material-sharp/24/000000/settings.png"/>
                    settings</span>
                    <div class="dropdown-icon"></div>
                </a>
            </li>
        </ul>
        <!-- END SIDEBAR MENU -->
    </div>
    <!-- END SIDEBAR -->
</body>
</html>

'''


app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

# Update page
# # # # # # # # #
def display_page(pathname):
    if pathname == '/analytical_dashboard-chef@home/':
        return app.index_string
    else:
        return noPage


# # # # # # # # #
external_css = ["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
                "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
                "//fonts.googleapis.com/css?family=Raleway:400,300,600",
                "https://codepen.io/bcd/pen/KQrXdb.css",
                "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
                "https://codepen.io/dmcomfort/pen/JzdzEZ.css"]

for css in external_css:
    app.css.append_css({"external_url": css})

external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
               "https://codepen.io/bcd/pen/YaXojL.js"]

for js in external_js:
    app.scripts.append_script({"external_url": js})

if __name__ == '__main__':
    app.run_server(debug=True)

When I run this I’m seeing this exception:

Can you help me tell what element should I add to dissolve this exception?