SolidJS•11mo 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•11mo ago

strange, can u reproduce it on the playground?

lxsmnsyc•11mo 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•11mo ago

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

lxsmnsyc•11mo ago

like when a release happens?

StarwortOP•11mo ago

Yeah

lxsmnsyc•11mo 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•11mo ago

Aight

lxsmnsyc•11mo 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