We Keep Coding

application cannot be run on localhost or with github page

Can I ask for help? Initially, the application that I built using React JS could run on localhost. However, when I try to deploy using GitHub pages, the application cannot be run even though the React code has been deployed to GitHub.
This is the json package that I set to deploy with GitHub pages
{
"name": "movie-app",
"version": "0.1.0",
"homepage": "http://xcage88.github.io/movie-app",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"gh-pages": "^5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-router-dom": "^6.8.0"
}
}
this is code index and app.js
App.js :
import { Route, Routes } from 'react-router-dom';
import SignUp from './component/SignUp';
import ForgotForm from './component/ForgotForm';
import LoginForm from './component/LoginForm';
import MainPage from './component/MainPage';
function App() {
return (
<div>
<div>
<Routes>
<Route path='/' exact element={<LoginForm/>}/>
<Route path='/forgot' element={<ForgotForm/>}/>
<Route path='/sign-up' element={<SignUp/>}/>
<Route path='/main/*' element={<MainPage/>}/>
</Routes>
</div>
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './style/style.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
when I try to run it, the result is like this:
run in GitHub pages
run in localhost
if you want to try it, click or copy/paste the link below
react app

I can't exactly tell you why you are getting the error from the first screenshot. It seems like it is some Google-Thingy.
I found this related question and it seems like you have to set a flag to ignore or disable this "feature". As I looked further into the topic, in your case it's more about enabling the feature instead of disabling.
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
Maybe you find more when you search for "floc google".
For your localhost problem, it seems like the path is just / instead of /movie-app.

Unable to use imported SASS styles in my React js project

I have followed the same process I use in most of my projects for importing SASS styles. I created my react app app. Installed SASS with the following command npm install node-sass I import my SASS file into my app components as shown below:
import React from "react";
import { ProvideAuth, useAuth } from "./use-auth.js";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './test.scss';
function App() {
const auth = useAuth();
return (
<ProvideAuth>
<Router>
<nav>
<div>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</div>
<div>
<button onClick={() => auth.signin()}>Sign In</button>
<button onClick={() => auth.signout()}>Sign Out</button>
</div>
</nav>
<Switch>
<Route exact path="/">
home
</Route>
<Route path="/about">
about
</Route>
</Switch>
</Router>
</ProvideAuth>
);
}
export default App;
This SASS file 'test.scss' is kept within the same folder as App.js
I have kept the contents of this SASS file very basic for the sake of testing:
nav{
display: flex;
background: blue;
}
The project compiles without any errors yet none of my styles are applied. Below is the package.json for my project:
{
"name": "wally",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"firebase": "^8.7.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^1.1.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Okay I have no real answer to my own question but effectively I rebuilt the project and things seemed to work fine. Effectively turning it off and on again.
I viewed some other similar questions and some people had issues integrating sass with react-router. Not too sure if that's related to my particular issue, nonetheless reinstalling everything from new seemed to solve things.

React.JS: Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I have been working on a front-end (following a tutorial) for React.js and have ran into an error:
× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
I have looked into each one of these issues and cannot seem to find the problem.. If anyone has a pointer that would be very helpful..
The 'App' Code:
import React from "react";
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
import memories from "./images/memories.png";
const App = () => {
return (
<Container maxwidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
</Container>
);
};
export default App;
The 'Package.json' Code:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The 'index.js' Code:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
EDIT: as requested, i've added a few more files which maybe causing the issue.

My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)

I have been developing a website in React using React-Bootstrap, and it has worked fine up until I installed and configured React-Router-Dom and started implementing routes, links, etc...(I have also installed react-router-bootstrap to work with it)
I am almost certain it is react-router-dom that is the issue as at the beginning, I was having similar issues. When I made a new fresh project, I decided not to install react-router-dom until towards the end of the development.
When I run NPM Start, it appears on my browser with the React favicon and name of the app, but the loading spinner is just constantly loading.
In the Command-Line, the development server compiles successfully, and there are no errors - so I'm finding it hard to work out where the issue is.
All relevant code is below.
App.js
import './App.css';
import Navigation from "./Components/Nav";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
import Karousel from './Components/Carousel';
import YtCard from './Components/Cards/YoutubeCard';
import BandcampCard from './Components/Cards/BandcampCard';
import SpotifyCard from './Components/Cards/SpotifyCard';
import Footer from './Components/Footer';
import { FormspreeProvider } from '#formspree/react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import { HashRouter } from 'react-router-dom'
import Contact from './Pages/Contact';
function App({Component, pageProps }) {
return (
<FormspreeProvider project="{music-boostrap}">
<Router>
<div className="app">
<div className="navigation">
<Navigation/>
</div>
<Switch>
<Route exact path="/" component={App}/>
<Route path="/contact" component={Contact}/>
</Switch>
<div className="carousel">
<Container className="carousel-container" fluid>
<Karousel/>
</Container>
</div>
<div className="description">
<Container fluid>
<Row>
<Col className="desc-col">
<YtCard/>
</Col >
<Col className="desc-col">
<BandcampCard/>
</Col>
<Col className="desc-col">
<SpotifyCard/>
</Col>
</Row>
</Container>
</div>
<Footer/>
</div>
</Router>
</FormspreeProvider>
);
}
export default App;
package.json
{
"name": "music-bootstrap",
"version": "0.1.0",
"private": true,
"dependencies": {
"#formspree/react": "^2.2.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.7.3",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
If any files are missing with code you might think is relevant to solving these issues, please let me know!

You're attempting to render App inside App, which results in an endless recursion, you need to use a different component here
<Route exact path="/" component={App}/>

React-router-dom and history doesn't work

I'm trying to import react-router-dom and history for work with React-router but doesn't work and I get this error.
I imported this packages:
yarn add react-router-dom
yarn add history
I'm working under v14.4.0 version of node.
This is my code:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const history = createHistory();
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();
package.json (for check a lot of versions xd):
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
```
If you need additional information for help me to solve the problem, don't doubt it for ask for.
Thanks a lot!!

Try importing it like this:
import { createBrowserHistory } from "history";
const history = createBrowserHistory();