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.
Related
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.
I have a react component in this path: host/qr-ui/v1/report-detail/:year/:quarter
which is not my home page. when I reload it I get this error:
GET ../qr-ui/v1/report-detail/:year/static/js/2.e2743d9e.chunk.js net::ERR_ABORTED 404
well my static file is not here. but why it cannot find the location to static file.
I'm using react-scripts. and this is my package.json
{
"name": "qr-ui-v1",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router": "5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.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"
]
}
}
and this is my app.js
import React from 'react';
import './App.css';
import './css/Button.css';
import './css/Jumbo.css';
import './css/Form.css';
import ReportManagerComponent from './components/ReportManagerComponent.js'
import ReportDetailComponent from './components/ReportDetailComponent.js'
import Nav from './components/Nav.js'
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
function App() {
return (
<React.Fragment>
<Router basename='/qr-ui/v1'>
<Nav/>
<Switch>
<Route exact path='/' component={ReportManagerComponent} />} />
<Route exact path='/report-detail/:year/:quarter' component={ReportDetailComponent} />}/>
</Switch>
</Router>
</React.Fragment>
);
}
export default App;
In first component I redirect to the second one but cannot load the second one directly.
I'm developing a React frontend with react-bootstrap. React is working fine, but when I use any react-bootstrap component in any page, Chrome just shows a fully blank page.
I think the problem might be in the index.html. I have this in the <head> tag, but no alert showing, I'm not sure if it should.
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"></script>
<script>var Alert = ReactBootstrap.Alert;</script>
Anyway, here's all the other code I consider relevant:
This is my index.js:
import React from 'react';
import {createRoot} from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
This is my App.js working fine, Chrome shows the text:
import React from 'react';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
</div>
);
}
This is my App.js not working. It doesn't give any error, just a completely blank page, not even the text shows.
import React from 'react';
import { Button } from 'react-bootstrap';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
<Button variant="primary" type="button" value="Input" />
</div>
);
}
This happens with any bootstrap component, not only the Button (I've tried a few). I'm new to React, so any kind of help is welcome.
EDIT: Here's a screenshot of the Chrome console when the blank page problem happens.
EDIT 2: Here's my package.json:
{
"name": "asignacionesfrontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"http-proxy-middleware": "^2.0.4",
"jest-editor-support": "^30.0.2",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.50.0",
"sweetalert": "^2.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prestart": "node aspnetcore-https && node aspnetcore-react"
},
"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"
]
}
}
It seems like you have set up your react-bootstrap & bootstrap not properly. When using react-bootstrap, you don't need the js-bundle from bootstrap, but the css. You have two options:
Install bootstrap (npm i bootstrap) and add import 'bootstrap/dist/css/bootstrap.min.css'; to your index.js or App.js file
Or use CDN: Paste following snippet into your index.html:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
https://react-bootstrap.netlify.app/getting-started/introduction/#stylesheets
I solved it. I needed to actually install all the packages with npm in my project folder. I had them installed in my Windows user folder and globally, but not in my project.
Basically, just open a cmd in your project folder and run:
C:\SomePath\MyReactProject>npm install react-bootstrap bootstrap
Try this
<Button href="#" variant="primary" type="button" value="Input" />
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.
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}/>