dash.exceptions.InvalidCallbackReturnValue

Dash Python
1

Hello!
I’m having issues when I try running this code.
I get this error

dash.exceptions.InvalidCallbackReturnValue: 
The callback for property `children`
of component `page-content` returned a value
which is not JSON serializable.

In general, Dash properties can only be
dash components, strings, dictionaries, numbers, None,
or lists of those.

I’m also getting another error related to PIL

AttributeError: module 'PIL.Image' has no attribute 'Image'

My code is like this

import dash
import dash_cytoscape as cyto
import dash_core_components as dcc
import dash_html_components as html
import dash_reusable_components as drc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

import networkx as nx
import community

import plotly.graph_objects as go

from datetime import datetime as dt
from random import randint
from itertools import islice
from matplotlib.colors import is_color_like

import pandas as pd
import numpy as np
import re
import textwrap
import itertools

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

navBar = dbc.NavbarSimple(
			children=[
				dbc.DropdownMenu(
					children=[
						dbc.DropdownMenuItem("Más Páginas", header=True),
						dbc.DropdownMenuItem("Panel de Control", href="/panelControl"),
						dbc.DropdownMenuItem("Animación", href="/nodosAnimacion")
						],
					nav=True,
					in_navbar=True,
					label="Más",
					),
				],
			brand="Banco Santander Análisis de Palabras",
			brand_href="/panelControl",
			color="primary",
			dark=True
			)

cardControlPanel = dbc.Card(
	[
		dbc.FormGroup(
			[
			drc.NamedDropdown(
				name="Layout", 
				id="dropdown-layout",
				options=drc.DropdownOptionsList(
					"grid", 
					"circle", 
					"concentric",
					"breadthfirst", 
					"cose"),
				value="cose", 
				clearable=False)
			]
		),
		dbc.FormGroup(
			[
			drc.NamedDropdown(
				name="Category",
				id="category", 
				options=drc.DropdownOptionsList(
					"Promotor",
					"Detractor",
					"Neutro"),
				value="Promotor",
				clearable=False,
				style={"width", "90%"})
			]
		),
		dbc.FormGroup(
			[
			drc.NamedSlider(
				name="Numero de Nodos",
				id="nodes-number",
				min=10,
				max=30,
				step=2,
				value=10,
				marks={value:str(value) for value in range(10, 31, 2)})
			]
		),
		dbc.FormGroup(
			[
			drc.NamedInput(
				name="Search", 
				id="input-box-word",
				type="text"),
			html.Button(
				"Submit",
				id="button-submit"),
			html.Button(
				"Clear",
				id="button-clear")
			]
		)

	],
	body=True
)

layoutControlPanel = dbc.Container(
	[
		html.H1("Panel de Control"),
		html.Hr(),
		dbc.Row(
			[
				dbc.Col(cardControlPanel, md=4),
				dbc.Col(dcc.Graph(id="control-panel"), md=8)
			],
			align="center",
		),
	],
	fluid=True
)

content = html.Div(id="page-content")

app.layout = html.Div([dcc.Location(id="url"), navBar, content])

@app.callback(Output("page-content", "children"), 
			[Input("url", "pathname")])
def render_page_content(pathname):
    if pathname == "/panelControl":
        return html.Div([layoutControlPanel])
    elif pathname == "/nodosAnimacion":
        return html.P("Aqui van los Nodos")


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