SolidJS•2y 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•2y ago

strange, can u reproduce it on the playground?

lxsmnsyc•2y 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•2y ago

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

lxsmnsyc•2y ago

like when a release happens?

StarwortOP•2y ago

Yeah

lxsmnsyc•2y 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•2y ago

Aight

lxsmnsyc•2y 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

Did you find this page helpful?