SolidJS•10mo ago

Can't find variable: theme

I'm writing a solid + SUID + Tauri application, and I tried to start simple, by setting the application theme; but for some reason, when I actually try to run the app, whatever I put in for the value of theme is reported as 'can't find' (even though it clearly can) This issue occurs both in Chrome and in the Tauri window My code so far looks like this:

function App() {
    const [themeColour, setThemeColour] = createSignal(
        getSavedColourScheme() // 'light' or 'dark'; this is known to work
    );
    createEffect(() => {
        window.localStorage.theme = themeColour();
    });

    const palette = createMemo(() => createPalette({
        mode: themeColour(),
        primary: {
            main: themeColour() == 'dark' ? '#bb86fc' : '#6200ee',
        },
        secondary: {
            main: '#03dac6',
        },
    }));

    const theme = createTheme({palette});
    console.log(themeColour(), palette(), theme); // this prints a valid theme object

    return <>
        <ThemeProvider theme={theme}> {/* for some reason, this errors */}
            <CssBaseline />
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="h1">{theme}</Typography> {/* This shows '[object Object]' */}
                </Toolbar>
            </AppBar>
        </ThemeProvider>
    </>;
}

function App() {
    const [themeColour, setThemeColour] = createSignal(
        getSavedColourScheme() // 'light' or 'dark'; this is known to work
    );
    createEffect(() => {
        window.localStorage.theme = themeColour();
    });

    const palette = createMemo(() => createPalette({
        mode: themeColour(),
        primary: {
            main: themeColour() == 'dark' ? '#bb86fc' : '#6200ee',
        },
        secondary: {
            main: '#03dac6',
        },
    }));

    const theme = createTheme({palette});
    console.log(themeColour(), palette(), theme); // this prints a valid theme object

    return <>
        <ThemeProvider theme={theme}> {/* for some reason, this errors */}
            <CssBaseline />
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" component="h1">{theme}</Typography> {/* This shows '[object Object]' */}
                </Toolbar>
            </AppBar>
        </ThemeProvider>
    </>;
}

8 Replies

bigmistqke•10mo ago

strange, can u reproduce it on the playground?

lxsmnsyc•10mo ago

seems like this was affected by the new Vite (Refresh) version, I've fixed this now, we just need to roll a release (or you can rollback your refresh version for now)

StarwortOP•10mo ago

I can wait for the release; is there a place to get pinged for that?

lxsmnsyc•10mo ago

like when a release happens?

StarwortOP•10mo ago

Yeah

lxsmnsyc•10mo ago

but yeah here's the related issue: https://github.com/solidjs/solid-refresh/issues/59#event-11817283458

GitHub

Uncaught ReferenceError: ___ is not defined · Issue #59 · solidjs/s...

This code is raising an unexpected ReferenceError: import { createQuery } from "@tanstack/solid-query"; import { For, Match, Switch } from "solid-js"; import { RESTClient } from...

StarwortOP•10mo ago

Aight

lxsmnsyc•10mo ago

for the release, we usually don't make announcements anyways if you're using Vite, I think a patch release is available, it rolls back to an older version of Refresh we are planning to keep this in beta for now

Gaming

Programming

Can't find variable: theme