TypeError: Object(...) is not a function in GIThub pages

Hi, so this issue has me stumped.
I have a React app where if I run it using npm start, it works/displays fine but if I push it to github pages it doesn’t display anything. I looked at the console logs and see the error TypeError: Object(…) is not a function on my hook useEffect. I think that this hook is causing the issue because if I strip it down to just console.logs I still get the error. If I remove the hook the app will display in github pages but not function properly without the hook. I was thinking it could be my semicolon placement and tried many things then I also made it so it would render onchange only (firstRender is a useRef).
thanks for the help! I just don’t get why it works in npm start but not in github pages or how I can make npm start throw the same errors

useEffect(() => {

    if (firstRender.current) {

      console.log("FIRST");

      firstRender.current = false;

    } else if (timestate.work === "Yes" && audio.current === null) {

      console.log("TEST");

    } else if (timestate.work === "Yes") {

      console.log("TEST");

    } else if (timestate.work === "No") {

      console.log("TEST");

    }

  }, [timestate.work]);

Could you provide a link to the repo? I don’t think there is enough information to be helpful.

The first thing I would want to check is how useEffect is being imported. Also, could you cut and past the exact error code?

Sure, link to Repo: GitHub - Grandmaracha/Workout_Timer: Tabata timer
link to Github pages site: React App

Error:TypeError: Object(…) is not a function
l App.js:43
React 12
13 index.js:6
i (index):1
t (index):1
r (index):1
main.f5961f7b.chunk.js:1
react-dom.production.min.js:216:199
React 5
unstable_runWithPriority scheduler.production.min.js:18
React 9
13 index.js:6
i (index):1
t (index):1
r (index):1
main.f5961f7b.chunk.js:1

OK, I don’t understand this:

import { useEffect } from "react/cjs/react.development";

I’m not sure what you’re trying to import here. Is there a reason why this wouldn’t be import directly from React? I would have expected something like:

import React, { useState, useRef, useEffect } from "react";

Yeah, this doesn’t make sense, you just need

import { useState, useRef, useEffect } from "react";

If you’ve any modules using react functions, import them from “react”, not from some other source, otherwise delete those imports. Has your editor autocompleted an import for you?

Hey yeah, that was weird and yes editor did autocompleted that for me. I’m going to check my settings why it imported like that. Anyways thanks guys that fixed it!! Can’t believe I never looked at my imports while troubleshooting for 2 days.

Thanks so much!

It won’t be in the settings, if it’s done what I assume it’s actually working fine. When you write useEffect in the code, and it pops up with the box asking if you want to automatically import, what it’s doing is looking in node_modules for package/s that export that function/object/whatever. And that module is one of the exports from the react package, so you’ve just said yes to that – the correct import will have been in the list as well

Side note, but you don’t need to import React anywhere, you just import the functions you use from it if you happen to be using them in a module (useEffect, useRef etc)

Also, as far as I can tell cjs is “CommonJS" so it might also only work with require maybe? Not sure and it doesn’t really matter you already got the correct answers.

Yeah, I’m not a big fan of auto imports for that reason - they sometimes do weird things. If you do use one, be sure to confirm it.