Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. and Prerender (html): Received a 500 status code from `entry.server.tsx` while prerendering the `/` path.
Closed this issue · 1 comments
kuuuuy commented
reflex: 0.8.9
python: 3.12
os: windows 11
When I run "reflex run --env prod", an error occurs
I found that when I use the "echarts" control of "reflex_echarts", errors will be generated
import json
import random
import asyncio
import reflex as rx
from pyecharts import options as opts
from pyecharts.charts import Kline, Line
class State(rx.State):
option: dict = json.loads(
Line().add_xaxis([0, 1, 2]) \
.add_yaxis("kk", [0, 2, 3]) \
.set_global_opts(
title_opts=opts.TitleOpts(title="demo"),
datazoom_opts=[
opts.DataZoomOpts(
is_show=True,
type_='inside',
),
opts.DataZoomOpts(
is_show=True,
type_='slider',
),
],
xaxis_opts=opts.AxisOpts(),
) \
.dump_options_with_quotes()
)
_task: bool = False
@rx.var(cache=False)
def get_r(self) -> int:
return random.randint(1, 10)
@rx.event
def get(self):
self.option['xAxis'][0]['data'].append(len(self.option['xAxis'][0]['data']) + 1)
self.option['series'][0]['data'].append([len(self.option['xAxis'][0]['data']) + 1, self.get_r])
@rx.event
def clear(self):
self.option['xAxis'][0]['data'] = [0]
self.option['series'][0]['data'] = [0, 0]
from reflex_echarts import echarts
def index() -> rx.Component:
return rx.vstack(
echarts (
option=State.option,
),
rx.button("button", on_click=State.get),
rx.button("clear", on_click=State.clear),
align="center",
)Creating Production Build failed with exit code 1
$ react-router build
rolldown-vite v7.1.5 building for production...
transforming...
✓ 2578 modules transformed.
rendering chunks...
computing gzip size...
build/client/.vite/manifest.json 3.14 kB │ gzip: 0.59 kB
build/client/assets/__reflex_global_styles-V5m_xA4h.css 694.35 kB │ gzip: 83.36 kB
build/client/assets/reflex-env-CostSbh-.js 0.28 kB │ gzip: 0.18 kB
build/client/assets/_404_._index-Bwj3K91n.js 0.43 kB │ gzip: 0.31 kB
build/client/assets/rolldown-runtime-aUZGWTHk.js 0.62 kB │ gzip: 0.38 kB
build/client/assets/jsx-runtime-LPmOjBqq.js 4.09 kB │ gzip: 1.54 kB
build/client/assets/emotion-react.browser.esm-DHMO-yE9.js 21.11 kB │ gzip: 8.27 kB
build/client/assets/root-CtpZCqOr.js 43.68 kB │ gzip: 13.33 kB
build/client/assets/chunk-PVWAREVJ-ByEFXmki.js 115.55 kB │ gzip: 37.84 kB
build/client/assets/entry.client-tQlmaDMC.js 175.94 kB │ gzip: 55.54 kB
build/client/assets/esm-D_Qqu_Zw.js 558.50 kB │ gzip: 127.15 kB
build/client/assets/_index-CS3GRqUF.js 1,132.84 kB │ gzip: 370.42 kB
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:157:24 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m157 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249mc[0m[38;5;249mo[0m[38;5;249mn[0m[38;5;249ms[0m[38;5;249mt[0m[38;5;249m
[0m[38;5;249mm[0m[38;5;249mo[0m[38;5;249md[0m[38;5;249mu[0m[38;5;249ml[0m[38;5;249me[0m[38;5;249m [0m[38;5;249m=[0m[38;5;249m
[0m[38;5;249ma[0m[38;5;249mw[0m[38;5;249ma[0m[38;5;249mi[0m[38;5;249mt[0m[38;5;249m
[0meval[38;5;249m([0m[38;5;249m`[0m[38;5;249mi[0m[38;5;249mm[0m[38;5;249mp[0m[38;5;249mo[0m[38;5;249mr[0m[38;5;249mt[0m[38;5;249m([0m[38;5;249md[0m[38;5;249
ma[0m[38;5;249mt[0m[38;5;249ma[0m[38;5;249mU[0m[38;5;249mr[0m[38;5;249mi[0m[38;5;249m)[0m[38;5;249m`[0m[38;5;249m)[0m[38;5;249m;[0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:271:16 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m271 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m
[0m[38;5;249ma[0m[38;5;249m.[0m[38;5;249mh[0m[38;5;249mr[0m[38;5;249me[0m[38;5;249mf[0m[38;5;249m [0m[38;5;249m=[0m[38;5;249m
[0meval[38;5;249m?[0m[38;5;249m.[0m[38;5;249m([0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:334:15 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m334 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m
[0m[38;5;249m [0m[38;5;249m [0m[38;5;249m?[0m[38;5;249m
[0meval[38;5;249m([0m[38;5;249me[0m[38;5;249mv[0m[38;5;249me[0m[38;5;249mn[0m[38;5;249mt[0m[38;5;249m.[0m[38;5;249mp[0m[38;5;249ma[0m[38;5;249my[0m[38;5;249
ml[0m[38;5;249mo[0m[38;5;249ma[0m[38;5;249md[0m[38;5;249m.[0m[38;5;249mc[0m[38;5;249ma[0m[38;5;249ml[0m[38;5;249ml[0m[38;5;249mb[0m[38;5;249ma[0m[38;5;249mc
[0m[38;5;249mk[0m[38;5;249m)[0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:351:13 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m351 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m
[0m[38;5;249m?[0m[38;5;249m
[0meval[38;5;249m([0m[38;5;249me[0m[38;5;249mv[0m[38;5;249me[0m[38;5;249mn[0m[38;5;249mt[0m[38;5;249m.[0m[38;5;249mp[0m[38;5;249ma[0m[38;5;249my[0m[38;5;249
ml[0m[38;5;249mo[0m[38;5;249ma[0m[38;5;249md[0m[38;5;249m.[0m[38;5;249mj[0m[38;5;249ma[0m[38;5;249mv[0m[38;5;249ma[0m[38;5;249ms[0m[38;5;249mc[0m[38;5;249mr
[0m[38;5;249mi[0m[38;5;249mp[0m[38;5;249mt[0m[38;5;249m_[0m[38;5;249mc[0m[38;5;249mo[0m[38;5;249md[0m[38;5;249me[0m[38;5;249m)[0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:352:13 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m352 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m
[0m[38;5;249m:[0m[38;5;249m
[0meval[38;5;249m([0m[38;5;249me[0m[38;5;249mv[0m[38;5;249me[0m[38;5;249mn[0m[38;5;249mt[0m[38;5;249m.[0m[38;5;249mp[0m[38;5;249ma[0m[38;5;249my[0m[38;5;249
ml[0m[38;5;249mo[0m[38;5;249ma[0m[38;5;249md[0m[38;5;249m.[0m[38;5;249mf[0m[38;5;249mu[0m[38;5;249mn[0m[38;5;249mc[0m[38;5;249mt[0m[38;5;249mi[0m[38;5;249mo
[0m[38;5;249mn[0m[38;5;249m)[0m[38;5;249m([0m[38;5;249m)[0m[38;5;249m;[0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
[33m[EVAL] Warning:[0m Use of `eval` function is strongly discouraged as it poses security risks and may cause issues with minification.
[38;5;246m╭[0m[38;5;246m─[0m[38;5;246m[[0m utils/state.js:361:15 [38;5;246m][0m
[38;5;246m│[0m
[38;5;246m361 │[0m [38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m [0m[38;5;249m
[0m[38;5;249m [0m[38;5;249m [0m[38;5;249m?[0m[38;5;249m
[0meval[38;5;249m([0m[38;5;249me[0m[38;5;249mv[0m[38;5;249me[0m[38;5;249mn[0m[38;5;249mt[0m[38;5;249m.[0m[38;5;249mp[0m[38;5;249ma[0m[38;5;249my[0m[38;5;249
ml[0m[38;5;249mo[0m[38;5;249ma[0m[38;5;249md[0m[38;5;249m.[0m[38;5;249mc[0m[38;5;249ma[0m[38;5;249ml[0m[38;5;249ml[0m[38;5;249mb[0m[38;5;249ma[0m[38;5;249mc
[0m[38;5;249mk[0m[38;5;249m)[0m
[38;5;240m │[0m ──┬─
[38;5;240m │[0m ╰─── Use of `eval` function here.
[38;5;246m─────╯[0m
✓ built in 3.95s
rolldown-vite v7.1.5 building SSR bundle for production...
transforming...
⚠️ Paths with dynamic/splat params cannot be prerendered when using `prerender: true`. You may want to use the `prerender()` API to prerender the following
paths:
- *
✓ 19 modules transformed.
rendering chunks...
✓ 1 asset cleaned from React Router server build.
build\client\assets\__reflex_global_styles-V5m_xA4h.css
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at renderElement (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4692:11)
at retryNode (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4919:16)
at renderNodeDestructive (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4732:7)
at renderNode (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:5177:14)
at renderChildrenArray (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:5067:7)
at retryNode (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4933:9)
at renderNodeDestructive (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4732:7)
at renderElement (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4440:9)
at retryNode (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4919:16)
at renderNodeDestructive (E:\Works\RedRedFireFire\.web\node_modules\react-dom\cjs\react-dom-server.node.production.js:4732:7)
[Error: Unexpected Server Error]
✗ Build failed in 1.45s
Build failed with 1 error:
Error: Prerender (html): Received a 500 status code from `entry.server.tsx` while prerendering the `/` path.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link rel="modulepreload"
href="/assets/manifest-605ddf33.js"/><link rel="modulepreload" href="/assets/entry.client-tQlmaDMC.js"/><link rel="modulepreload"
href="/assets/jsx-runtime-LPmOjBqq.js"/><link rel="modulepreload" href="/assets/chunk-PVWAREVJ-ByEFXmki.js"/><link rel="modulepreload"
href="/assets/rolldown-runtime-aUZGWTHk.js"/><link rel="modulepreload" href="/assets/root-CtpZCqOr.js"/><link rel="modulepreload"
href="/assets/reflex-env-CostSbh-.js"/><link rel="modulepreload" href="/assets/emotion-react.browser.esm-DHMO-yE9.js"/><link rel="modulepreload"
href="/assets/esm-D_Qqu_Zw.js"/><link rel="modulepreload" href="/assets/_index-CS3GRqUF.js"/><script>
// Only run in browser environment, not during SSR
if (typeof document !== 'undefined') {
try {
const theme = localStorage.getItem("theme") || "system";
const systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
const resolvedTheme = theme === "system" ? systemPreference : theme;
// Apply theme immediately - blocks until complete
// Use classList to avoid overwriting other classes
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(resolvedTheme);
document.documentElement.style.colorScheme = resolvedTheme;
} catch (e) {
// Fallback to system preference on any error (resolve "system" to actual theme)
const fallbackTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.classList.remove("light", "dark");
document.documentElement.classList.add(fallbackTheme);
document.documentElement.style.colorScheme = fallbackTheme;
}
}
</script><link rel="stylesheet" href="/assets/__reflex_global_styles-V5m_xA4h.css" type="text/css"/></head><body><div data-is-root-theme="true"
data-accent-color="blue" data-gray-color="slate" data-has-background="true" data-panel-background="translucent" data-radius="medium" data-scaling="100%"
class="radix-themes css-0"><style data-emotion="css 17rg0dp">.css-17rg0dp{position:fixed;width:100vw;height:0;}</style><div title="Connection Error: "
class="css-17rg0dp"></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text"
aria-atomic="false"></section><h1 style="font-size:24px">Application Error</h1><pre style="padding:2rem;background:hsla(10, 50%, 50%,
0.1);color:red;overflow:auto"></pre><script>
console.log(
"💿 Hey developer 👋. You can provide a way better UX than this when your app throws errors. Check out
https://reactrouter.com/how-to/error-boundary for more information."
);
</script></div><script>((storageKey2, restoreKey) => {
if (!window.history.state || !window.history.state.key) {
let key = Math.random().toString(32).slice(2);
window.history.replaceState({ key }, "");
}
try {
let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}");
let storedY = positions;
if (typeof storedY === "number") {
window.scrollTo(0, storedY);
}
} catch (error) {
console.error(error);
sessionStorage.removeItem(storageKey2);
}
})("react-router-scroll-positions", null)</script><script>window.__reactRouterContext =
{"basename":"/","future":{"unstable_middleware":false,"unstable_optimizeDeps":true,"unstable_splitRouteModules":false,"unstable_subResourceIntegrity":false,
"unstable_viteEnvironmentApi":false},"routeDiscovery":{"mode":"initial"},"ssr":false,"isSpaMode":false};window.__reactRouterContext.stream = new
ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script><script
type="module" async="">import "/assets/manifest-605ddf33.js";
import * as route0 from "/assets/root-CtpZCqOr.js";
import * as route1 from "/assets/_index-CS3GRqUF.js";
window.__reactRouterRouteModules = {"root":route0,"routes/_index":route1};
import("/assets/entry.client-tQlmaDMC.js");</script><!--$?--><template id="B:0"></template><!--/$--><div hidden
id="S:0"><script>window.__reactRouterContext.streamController.enqueue("[{\"_1\":2,\"_3\":-5,\"_4\":5},\"loaderData\",{},\"actionData\",\"errors\",{\"_6\":7}
,\"root\",{\"_8\":9,\"_10\":-7,\"_11\":12},\"message\",\"Unexpected Server Error\",\"stack\",\"__type\",\"Error\"]\n");</script><!--$?--><template
id="B:1"></template><!--/$--></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var
a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var
f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else
f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._react
Retry&&b._reactRetry()}};$RC("B:0","S:0")</script><div hidden
id="S:1"><script>window.__reactRouterContext.streamController.close();</script></div><script>$RC("B:1","S:1")</script></body></html>
at prerenderRoute (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\vite.js:4313:11)
at processTicksAndRejections (node:internal/process/task_queues:105:5)
at handlePrerender (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\vite.js:4223:7)
at PluginContextImpl.handler (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\vite.js:3516:13)
at plugin (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:3155:4)
at plugin.<computed> (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:3417:12)
at normalizeErrors (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:2275:18)
at handleOutputErrors (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:3013:34)
at transformToRollupOutput (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:3007:2)
at RolldownBuild.write (file:///E:/Works/RedRedFireFire/.web/node_modules/rolldown/dist/shared/src-Chn1S4O2.mjs:4221:10)
at buildEnvironment (file:///E:/Works/RedRedFireFire/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:33366:64)
at Object.build (file:///E:/Works/RedRedFireFire/.web/node_modules/vite/dist/node/chunks/dep-Ql2zlmoZ.js:33780:19)
at buildEnvironment (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\cli\index.js:1890:5)
at async Promise.all (index 0)
at viteBuild (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\cli\index.js:1926:3)
at build (E:\Works\RedRedFireFire\.web\node_modules\@react-router\dev\dist\cli\index.js:1787:10) {
errors: [Getter/Setter]
}
error: script "export" exited with code 1
Run with --loglevel debug for the full log.
Creating Production Build: ━━━━━━━━━━━━━━━━━━━━━━━━━━╸━━━━━━━━━━━━━ 67% 2/3 0:00:06
[20:05:29] Reflex app stopped.
adhami3310 commented
that's not an issue in reflex, but in https://github.com/masenf/reflex-echarts