I'm currently trying to deploy my react app to either Netlify or GitHub Pages, but I'm receiving a 404 error or not loading the app. Everything runs fine on my local host. I'm not too sure if this is the problem, but I think I'm not properly calling my app or root from the index.html. Also I'm not sure if this is the problem.
Here is my github page (doesn't run the app): https://mattfang1999.github.io/matt-task-manager-app/
Here is the netlify (404 error): https://condescending-galileo-fe4225.netlify.app/
Currently, here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="http://example.com/favicon.png">
<title>Matt's Task Manager</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
And here is my index.js
import React from 'react';
import { render } from 'react-dom';
import {App} from './App';
import './App.scss';
render(<App />, document.getElementById('root'));
Finally, here is my App.js
import React, {useState} from 'react';
import { Header } from './components/layout/Header';
import { Content } from './components/layout/Content';
import { ProjectsProvider, SelectedProjectProvider} from './context';
export const App = ({ darkModeDefault = false }) => {
const [darkMode, setDarkMode] = useState(darkModeDefault);
return (
<SelectedProjectProvider>
<ProjectsProvider>
<main
data-testid="application"
className={darkMode ? 'darkmode' : undefined}
>
<Header darkMode={darkMode} setDarkMode={setDarkMode} />
<Content />
</main>
</ProjectsProvider>
</SelectedProjectProvider>
);
};
Here is my package.json
{
"homepage": "https://mattfang1999.github.io/matt-task-manager-app/",
"name": "taskmanagerapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"firebase": "^6.2.4",
"gh-pages": "^3.1.0",
"install": "^0.13.0",
"moment": "^2.24.0",
"node-sass": "^4.12.8",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^3.11.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Any help would be appreciated!
I've cloned your repo and could successfully deploy it to GitHub Pages when I moved the content of the taskmanagerapp folder up one level and run npm run deploy in the root folder (where the package.json file is).
Update: I've also tried to deploy it without changing anything apart from changing the homepage URL in the package.json file and it's been also deployed fine.
Update 2: If my repo's URL is https://github.com/zsoltime/pospof, I set my homepage in package.json to "homepage": "https://zsoltime.github.io/pospof/".
Related
I have a frontend served by a rest api and when i run yarn start i get a template page showing "loading" (the backend api is not running yet). But the problem is when i run yarn build, and then serve it with serve -s build or with a nginx i get an empty page. When i reload the page I have very briefly the content of the page (a fraction of second) and then a blank page with no error codes in the browser or the server requests.
I dont know where to start to troubleshoot this, could you help me define a method?
I have tried to build in containerized docker and outside containerized docker with serve -s build and it's the same: it doesnt come from docker.
The build folder contains all the necessary files and i dont have any errors on my page when loading in the browser or in the console where the nginx run. I will only put extracts relative to react as my nginx and docker are out of cause (i have tried everything outside nginx and docker with serve -s build)
This is my index.js :
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./components/App";
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter basename="/">
<App/>
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
And this is my App.js
import React from "react";
import { Route, Switch } from "react-router";
import { Container, Row } from "react-bootstrap";
import { BlogPage } from "./BlogPage";
import { PostPage } from "./PostPage";
function App() { return (
<Switch>
<Route path="/post/:id([\d]+)" component={PostPage}/>
<Route path="/tag/:tag/:page([\d]+)?" component={BlogPage}/>
<Route path="/:page([\d]+)?" component={BlogPage}/>
<Route path="*" component={() => (
<Container>
<Row>
<h1>404</h1>
</Row>
</Container> )}/>
</Switch>
); }
export default App;
this is my package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"homepage":".",
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.1",
"#heroicons/react": "^1.0.4",
"#tailwindcss/forms": "^0.3.3",
"#tailwindcss/typography": "^0.4.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"camelcase-keys": "^7.0.0",
"msw": "^0.35.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-responsive-carousel": "^3.2.21",
"react-router-dom": "^5.3.0",
"react-scripts": "^3.4.0",
"snakecase-keys": "^4.0.2",
"swr": "^1.0.0",
"tributejs": "^5.1.3",
"web-vitals": "^1.0.1",
"autoprefixer": "^9",
"storybook":"^6.5.6",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat",
"bootstrap":"^4.5.3",
"react-bootstrap":"^1.3.0",
"typescript":"^2.8.0",
"jquery":"^1.9.1",
"popper.js":"^1.16.1",
"axios":"^0.27.2",
"axios-mock-adapter":"^1.21.1",
"dompurify":"^2.3.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"proxy": "http://localhost:8000",
"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"
]
},
"jest": {
"resetMocks": false
},
"devDependencies": {
"autoprefixer": "^9",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
I have tried to remove the / in the path to static content in my index.html following this post Why won't React production build run on the browser? but it's the same.
I have tried to put "homepage":"." in my package.json but it's the same.
I have tried to put "start_url": "/" in my manifest.json but it's the same.
I have tried to put in my App.js but it's the same.
I have tried to remove "proxy": "http://localhost:8000" (which is there for api calls) from my package.json but it's the same.
I have tried to use HashRouter instead of BrowserRouter in my index.js but it's the same.
The fact it is loading a fraction of a second makes me think the problem is not the path in index.html
In this post: component is getting loaded for fraction of second in React
they say : "In React undefined and false values are not rendered. Since the data you're getting is from an async function the notifications component will be rendered briefly until initialized and then removed."
So in my case, in my components, i have an api call with axios in my ComponentDidMount sections. Would it be possible that the fact the data from the api call is undefined makes the build page to not render? But why would it render in yarn start and not in yarn build?
ComponentDidMount section :
componentDidMount() {
const pk = this.props.match.params.id;
axios.get(`/api/cms/pages/${pk}/`).then((res) => { const post = res.data;
this.setState({
post,
loading: false });
}) }
render() {
if (!this.state.loading) {
const post = this.state.post;
return (
<div className="col-md-8">
<img src={post.header_image_url.url} className="img-fluid rounded" alt=""
/>
<hr />
<h1>{post.title}</h1>
<hr />
<StreamField value={post.body} />
</div> );
}else{
return <div className="col-md-8">Loading...</div>;
} }
}
Thank you
I'm a beginner at React app, I just finished setting up the app and want to use material UI for buttons.
Here's my code.
import Button from '#material-ui/core/Button';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className = "App">
<header className='App-header'>
<Button>Click here</Button>
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
export default App;
I run that and it gives me Error: Invalid hook call. Hooks can only be called inside of the body of a function component. and the error points to:
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
> 7 | ReactDOM.render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>,
This is my package.json just in case, but I don't think there's anything wrong there.
{
"name": "schedule",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"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"
]
}
}
I've spent so much time trying to fix this, please help
I have reproduced your code in this example
https://codesandbox.io/embed/dreamy-euler-jhu8t?fontsize=14&hidenavigation=1&theme=dark
Need only install material ui with
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
And delete if no need
from './reportWebVitals'
I just needed to do npm install #material-ui/core in the terminal. It wasn't in the dependencies list before. Thanks to #Claire Lin.
I wonder why React can't find '#bootstrap-styled/v4'.
At first, I didn't eject. Because it's my first React project. I want simple.
yarn add '#bootstrap-styled/v4'
So this package installed in 'Project/node_modules/#bootstrap-styled/v4'.
And package.json file here.
# package.json
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#bootstrap-styled/v4": "bootstrap-styled/v4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1"
},
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src 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"
]
},
"devDependencies": {
"cross-env": "^7.0.2"
}
}
# src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import BaseLayout from 'BaseLayout';
import * as serviceWorker from 'serviceWorker';
ReactDOM.render(
<React.StrictMode>
<BaseLayout />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
# src/BaseLayout.js
import React, { useState } from 'react';
import {
Nav,
NavItem,
NavLink,
NavDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from '#bootstrap-styled/v4';
// root component
function BaseLayout() {
const [isOpen, setIsOpen] = useState(false);
return (
<Nav>
<NavItem>
<NavLink href="">Home</NavLink>
</NavItem>
<NavDropdown isOpen={isOpen} toggle={() => setIsOpen(true)}>
<DropdownToggle>
General
</DropdownToggle>
<DropdownMenu>
<DropdownItem>1</DropdownItem>
<DropdownItem>2</DropdownItem>
<DropdownItem>3</DropdownItem>
</DropdownMenu>
</NavDropdown>
</Nav>
);
}
export default BaseLayout;
I ran the server, error displayed.
Module not found: Can't resolve '#bootstrap-styled/v4' in 'D:\Project\src'
I have a few questions here.
I heard if you don't eject, React project will find module in src only. Is that right?
1-1. If correct, I don't make sense. Then why does node_modules exist? It would be right to go inside src, right?
What mean '#'? This isn't a scoped package, is it? Cause scoped package's structure is #scope/packageName. '#bootstrap-styled/v4' does not apply. (At https://bootstrap-styled.github.io/bootstrap-styled/, you can see their packages.)
I created a new react application by running
npx create-react-app myApp --typescript
I also updated #types/react and #types/react-dom to the latest versions, however, this error still persists when I try to declare a component's type like so
export const Header: React.FC = () => {
return <div />;
};
How can I resolve this?
I just created a new sanbox with typescript. https://codesandbox.io/s/zealous-nobel-phcd7 . Try to compare its settings with your project. You can even download it as a zip file and start a new project from it.
import * as React from "react";
import "./styles.css";
const App: React.FC = () => {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
};
Update
I downloaded the zip file. It works for me. All I can think of is the globally installed npm versions.
You can check them with:
npm list -g --depth 0
I do not know my version hels you, but it works for me wit theese:
├── create-react-app#3.3.1
├── firebase-tools#7.6.1
├── ionic#5.4.6
├── nlf#1.4.3
├── npm#6.13.7
├── nsp#2.8.0
├── ts-node#8.0.3
└── typescript#3.3.3333
I just created a new project using this command
npx create-react-app myapp --typescript
(first of you can't use any capital letter in a project name)
And tried to create component type like this and its work for me fine No error display
export const Header: React.FC = () => {
return <div />;
};
Maybe your package.json file having some versioning issue
My package.json file look's like this
"name": "myapp",
"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",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.1",
"typescript": "~3.7.2"
},
"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 my App.jsx file looks like
import React from "react"
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
React.FC work for me perfectly
React.FC was removed from create-react-app CRA, see: https://github.com/facebook/create-react-app/pull/8177
The docs for create-react-app point out that if you have ever installed their package globally you'll have to uninstall that. npm uninstall -g create-react-app
create-react-app.dev/docs/adding-typescript
This may be preventing your app from reading the correct configuration on create-react-app. The global version you have may be js and the local ts, then if the global create-react-app script is run it doesn't transpile the ts.
I have created the react app using CRA (CREATE-REACT-APP). I have installed node-sass and renamed App.css to App.scss and updated its import in App.js. Now in my App.js, I am just trying to print some text inside a section.
This is the link the repo, I am talking about. For your reference
node -v v12.11.1 and npm -v 6.11.3
App.js
import React from 'react';
import './App.scss';
import Section from 'react-bulma-components/lib/components/section';
function App() {
return (
<Section>
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</Section>
);
}
export default App;
App.scss
#import 'react-bulma-components/src/index.sass';
package.json
{
"name": "just-trying",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass": "^4.13.0",
"react": "^16.11.0",
"react-bulma-components": "^3.1.3",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
},
"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"
]
},
"devDependencies": {
"sass-loader": "^8.0.0"
}
}
Instead of downgrading the version of node, I have uninstalled react-bulma-components and instead just installed bulma via npa like npm i bulma.. and that works fine.