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.

Blank page after build electron react app

I've been working in this app for weeks and now I'm trying to packit to distribute. When I'm in dev it works just fine, but in production I only get a blank page. I've been lookig for solution in every post here but I can't get it.
This is my package.json
{
"name": "triviapp",
"author": "trivify",
"version": "1.0.0",
"private": true,
"main": "public/electron.js",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#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",
"docxtemplater": "^3.31.6",
"electron-is-dev": "^2.0.0",
"jimp": "^0.16.2",
"lodash": "^4.17.21",
"mongoose": "^6.7.0",
"nodejs-pptx": "^1.0.1",
"pizzip": "^3.1.3",
"ppt-template": "^1.0.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"translate": "^1.4.1",
"web-vitals": "^2.1.4",
"xlsx-template": "^1.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-dev": "concurrently \"set BROWSER=none&& npm start\" \"wait-on
http://localhost:3000 && electron .\"",
"hotel-dev": "concurrently \"set BROWSER=none&& npm start\" \" electron .\"",
"dist": "electron-builder"
},
"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": {
"babel-polyfill": "^6.26.0",
"concurrently": "^7.5.0",
"electron": "^21.2.0",
"electron-builder": "^23.6.0",
"wait-on": "^6.0.1"
},
"build": {
"appId": "com.trivify.triviapp",
"productName": "TriviApp",
"target": "NSIS",
"extends": null,
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false
},
"directories": {
"buildResources": "resources",
"output": "release"
}
}
}
This is my electron.js
const electron = require('electron');
const app = electron.app;
const { BrowserWindow, ipcMain } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
const { generateTrivia, createFolderWithImgs } = require('../src/logic/func');
const { createDoc } = require('../src/logic/createDoc');
const { createPPT } = require('../src/logic/createPPT');
const { getPreguntas, getRascas, addQuestionToBD, getBaresIsla, newIslandInDB, getIslaCodes }
= require('../src/logic/dbfuncs');
const { connectDB } = require('../src/db');
const {createRascas} = require('../src/logic/createRascas');
const { createTicketIsla } = require('../src/logic/createTicketsIsla');
const url = require('url');
connectDB();
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1300,
height: 900,
center: true,
useContentSize: true,
minHeight: 600,
minWidth: 1000,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
webSecurity: false
}
});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
if (isDev) {
// Open the DevTools.
//BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
// mainWindow.webContents.openDevTools();
}
mainWindow.on('closed', () => mainWindow = null);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
This is my index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from "react-router-dom"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<HashRouter >
<App />
</HashRouter>
</React.StrictMode>
);
and my app.js
import './stylesheets/App.css';
import { Route, Routes } from "react-router-dom";
import Home from './views/Home';
import Trivial from './views/Trivial';
import DataBases from './views/Databases';
import Rascas from './views/Rascas';
import IslaMisterio from './views/IslaMisterio';
import Facturas from './views/Facturas';
function App() {
return (
<div className='App'>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/trivial' element={<Trivial />} />
<Route path='/pasapalabra' element={<Home />} />
<Route path='/isla' element={<IslaMisterio />} />
<Route path='/rasca' element={<Rascas />} />
<Route path='/facturas' element={<Facturas />} />
<Route path='/databases' element={<DataBases />} />
</Routes>
</div>
);
}
export default App;
If you have any idea of why is this happening, please help!

With CRA, you need to add homepage to your package.json or your app will not work correctly in production. For an Electron app, you can use:
"homepage": "./"
If you have routing, you also need to check that you are using <HashRouter> and not <BrowserRouter>. For reference, here is a question about this.

Weird problem in react: (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

I'm currently working on a MERNG app, and i was doing the setup in the fronted, and, when i ran npm run start, this error suddenly appeared
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Compiling...
i've searched for this problem, and i found that, you should delete node_modules, then run npm intall, i tried, didn't work
This is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.3.14",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"apollo-link-context": "^1.0.20",
"framer-motion": "^4.1.3",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-file-base64": "^1.0.3",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"styled-components": "^5.2.3",
"styled-icons": "^10.33.0",
"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"
]
}
}
This is my index, i put there my apolloProvider and my redux setup
import React from "react";
import ReactDOM from "react-dom";
import ApolloProvider from "./ApolloProvider";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { reducer } from "./reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>{ApolloProvider}</Provider>,
document.getElementById("root")
);
This is my apollo provider
import React from "react";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
createHttpLink
} from "#apollo/client";
import App from "./App";
const httpLink = new createHttpLink({
uri: "http://localhost:5000"
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
export default (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
What is going on with my react app? i'm mad at this because it came out of nowhere, any clue how to fix this? And thank your four time comunnity !

shallowWrapper is empty, testing snapshot Jest/Enzyme?

I don't know why i get empty shallowWrapper object when i run snapshot test, i am using Jest and Enzyme:
What i get in App.test.js.snap file:
// Jest Snapshot v1, "goo.gl/fbAQLP"
exports[`renders App component 1`] = `ShallowWrapper {}`;
my package.json file:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.5.2",
"install": "^0.13.0",
"npm": "^6.14.8",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0-next.98"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"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": {
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"jest": "^26.4.2"
}
}
App.test.js file
import { shallow } from 'enzyme';
import React from 'react';
import App from './App';
it('renders App component', () => {
expect(shallow(<App />)).toMatchSnapshot();
})
setupTests.js file:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({
adapter: new Adapter()
});
Why i get that empty shallowWrapper object, I suspected the version of jest after some search, but even downgrading didn't solve it.

I ran into similar problem and playing around with jest help me got through it. I suggest you can clear the jest cache and then update the snapshots using jest --clearCache && jest -u and then run your test.
Also for your snapshot, I'd recommend you to use enzyme-to-json serialiser (https://www.npmjs.com/package/enzyme-to-json) and modify your test to:
import { shallow } from 'enzyme';
import React from 'react';
import App from './App';
import { shallowToJson } from 'enzyme-to-json';
it('renders App component', () => {
const app = shallow(<App />);
expect(shallowToJson(app)).toMatchSnapshot();
})

The shallow( ) did returned the output. Shallow works as a wrapper instance with the rendered output. You could use shallow( ) method with debug( ) to see what prints out. If you want to see the rendered output，you could use shallow().html( ) inside the expect( ) method to test again.

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();