Next.js not executing any custom code but markup

Question

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. No matter what i do, no logs are being showed in console and no attribute being set.

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"
    }
}

And a github repo, in case anybody want to run it yourself. https://github.com/Kuurcha/parahumanslegaldb

So far i've tried:

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.
Reducing code of the app to the simplest button and form in my application
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.

I'm expecting to get a message into a console or change a variable when executing ts code. It was executing before, and rolling back doesn't help.

An actual result is nothing. Events aren't being fired, code isn't being executed only html markup and elements from react bootstrap seem to show up on webpage.

How it looks like on my end:

npm run dev. Tried building and starting (not a dev) with default commands also, effect is the same. — Kurcha, Aug 22 '23 at 00:20
On my way to reinstall npm, node.js and any global react dependencies i have. — Kurcha, Aug 22 '23 at 00:41
No, I mean whats the expected result vs whats happening now. — Robin Thomas, Aug 22 '23 at 00:42
Expected result is to get any results from ts code. Either logging in console, or changing the variable. Right now the console in chrome dev tools is empty and the attribute is null. Will attach the screenshot of it in my end to the post. — Kurcha, Aug 22 '23 at 00:44
Which code isnt executed? From your repo, all I see are your form select code and `useEffect` hook and theme. All those work for me. — Robin Thomas, Aug 22 '23 at 00:49
nor UseEffect isn't being executed nor Form.Select (from react.bootstrap) onChange event. — Kurcha, Aug 22 '23 at 00:50
yes, i completely deleted .next and node_modules, after that i deleted the entire repo locally and cloned it from remote, and proceeded to "npm i" => "npm run dev" — Kurcha, Aug 22 '23 at 00:55
This is what I'm getting in my local: https://i.imgur.com/nh2g6Ki.gif. Is this the expected result? — Robin Thomas, Aug 22 '23 at 00:58
You have a glaring syntax error in your code in ``. It looks your your `onChange` handler is not in an `onChange` prop. Is that how your code actually is? — Alex Wayne, Aug 22 '23 at 00:59
my bad, i just didn't copy it corretly, i'll change the code appropriately — Kurcha, Aug 22 '23 at 01:05

Kurcha · Accepted Answer · 2023-08-22T01:41:47.070

0

I have zero idea why, i have zero idea what exactly caused it, but for some god forsaken reason 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

edited Aug 22 '23 at 01:41

answered Aug 22 '23 at 01:21

Kurcha

11
4

Tested out a bit on the second PC where issue still persists to try and figure out the reason, and node.js and react apps work just fine. The example "npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"" does work fine too. – Kurcha Aug 22 '23 at 12:34

Next.js not executing any custom code but markup

1 Answers1