Next.js Discord

Discord Forum

Next.js not executing any custom code but markup

Answered
Snowshoe posted this in #help-forum
Open in Discord
SnowshoeOP
I'm trying to make a website, for now there's only functionality to change themes by changing dropdown item (theme = attribute, uses css variables)
Everything worked correctly, but today for some reason any ts code stopped executing.


Here's github repo, since relevant code exceed message limit: https://github.com/Kuurcha/parahumanslegaldb
Related code from repo will be in next message after the post.

No matter what i do, no logs are being showed in console and no attribute being set.

So far i've tried:
1) Reproducing simple example using sample next.js project, change the component to client and added button with console.log. It doesn't seem to work.
2) Reducing code of the app to the simplest button and form in my application
3) Downloading repository and "npm run dev" it on another PC, since i suspected it's somehow environment related

I have zero idea what is causing it, since i have a version control i rolled back to the previous version, and still the same issue.
Basically: Markup works, but no any typescript code being executed.
Any ideas what might be causing this?
Answered by Snowshoe
I have zero idea why, i have zero idea what exactly caused it, but the answered turned out to be completely reinstall node, next.js and everything related to it. Appdata, temp, cache etc

I used this instruction: How to completely remove node.js from Windows

https://stackoverflow.com/questions/76949323/next-js-not-executing-any-custom-code-but-markup
View full answer

3 Replies

SnowshoeOP
Code: 

'use client';
import { createContext, useEffect, useState } from 'react';
import { Themes, setCssTheme } from './misc/themes';
import { Form } from 'react-bootstrap';

const ThemeContext = createContext(Themes.PrincessPink);
const themeOptions = Object.values(Themes).map((theme) => (
    <option value={theme} key={theme}>
        {theme}
    </option>
));
export default function Home() {
    const [theme, setTheme] = useState(Themes.PrincessPink);
    useEffect(() => {
        setCssTheme(theme);
    });
    return (
        <main className="flex min-h-screen flex-col items-start justify-normal">
            <ThemeContext.Provider value={theme}>
                <Form.Select
                    className="m-4"
                    onChange={(e) => {
                        //TO DO: If the source code of the page is modified and incorrect value will be passed into here, will it break? How to handle this?
                        setTheme(e.target.value as Themes);
                        setCssTheme(theme);
                    }}
                >
                    {themeOptions}
                </Form.Select>
            </ThemeContext.Provider>

            <div className="ml-4"> selected theme: {theme} </div>
        </main>
    );
}


theme code:

export enum Themes {
    PrincessPink = 'PrincessPink',
    OrangeDanger = 'OrangeDanger',
    NextJsExample = 'NextJsExample',
}
export function setCssTheme(theme: Themes) {
    document.documentElement.setAttribute('data-theme', theme);
    console.log('theme set to: ' + document.documentElement.getAttribute('data-theme'));
}
Dependencies, since they might matter: 

{
    "name": "parahumanslegaldb",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "prepare": "husky install"
    },
    "dependencies": {
        "@types/node": "20.4.9",
        "@types/react": "18.2.20",
        "@types/react-dom": "18.2.7",
        "autoprefixer": "10.4.14",
        "bootstrap": "^5.3.1",
        "eslint": "8.46.0",
        "eslint-config-next": "13.4.13",
        "next": "^13.4.13",
        "postcss": "8.4.27",
        "react": "^18.2.0",
        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "tailwindcss": "3.3.3",
        "typescript": "5.1.6"
    },
    "devDependencies": {
        "eslint-config-prettier": "^9.0.0",
        "husky": "^8.0.3",
        "jest": "^29.6.2",
        "prettier": "3.0.2"
    }
}
SnowshoeOP
I have zero idea why, i have zero idea what exactly caused it, but the answered turned out to be completely reinstall node, next.js and everything related to it. Appdata, temp, cache etc

I used this instruction: How to completely remove node.js from Windows

https://stackoverflow.com/questions/76949323/next-js-not-executing-any-custom-code-but-markup
Answer