I am getting a blank screen in react app after running it with npm start it worked adequately till yesterday but now it is getting this error and I don't think the code is getting rendered because when I checked the inspect window to enable javascript
package.json
{
"name": "buildfolks",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.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"
},
"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": {
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.1.8"
},
"main": "postcss.config.js",
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
App.js
import { useEffect } from "react";
import "./App.css";
import Nav from './Nav.js';
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
}
<Nav />
export default App;
I am also using tailwind css
CodePudding user response:
Your App()
function does not return anything, try to make it return <Nav />
:
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
return <Nav />;
}
CodePudding user response:
Your App component is missing the return
statement.
import { useEffect } from "react";
import "./App.css";
import Nav from './Nav.js';
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
return (
<Nav />
)
}
export default App;