Develop Reference

cant load react in electronjs

Here is my package.js file
{
"name": "cabed",
"version": "0.1.0",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"electron-forge": "^5.2.4",
"electron-is-dev": "^2.0.0",
"electron-packager": "^17.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"main": "public/electron.js",
"homepage": "./",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
"electron": "wait-on tcp:3000 && electron .",
"eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
},
"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": {
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"electron": "^22.1.0",
"wait-on": "^7.0.1"
},
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "stock_trading_app"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin",
"linux",
"win32"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
}
}
The generated exe with electron builder which i ran with
npm run eb
the exe generated by code above
does not render the react app inside the opened windows app.
Here is my app js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<p>
Sasdsad
</p>
<p>
Sasdsad
</p>
</div></div>
);
}
export default App;
my electron.js looks like this under public directory.
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, "./index.html")}`
);
// Open the DevTools.
if (isDev) {
win.webContents.openDevTools({ mode: 'detach' });
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
When running npm start first, then the exe renders react page inside window.
I need some configuration probably but i could not found it yet.

Since you said it works when you start your server first, I assume you're using the localhost URL both in dev and in prod. When your app is packaged, you should load the file in your window and not the local URL:
const { app } = require("electron");
const windowURL = app.isPackaged
? `file://${path.join(__dirname, "./index.html")}`
: "http://localhost:3000/";
mainWindow.loadURL(windowURL);
The path when your app is packaged might be different depending on your file structure and your build/package configurations. Also, don't forget to add "homepage": "./" on your package.json or you may get a blank page.

create-react-app typescript - Warning: ReactDOM.render is no longer supported in React 18

I got this warning in my project generated by create-react-app with Typescript and although I followed Reactjs.org instructions and some other other questions posted in StackOverflow I couldn't make the warning off.
Could someone explain me why I still see the warning related to ReactDOM?
Thank you in advance.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
const container = document.getElementById("root")
const root = createRoot(container!);
root.render(
<StrictMode>
<App />
</StrictMode>
);
reportWebVitals();
{
"name": "pokedex",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "11",
"#emotion/styled": "11",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.27",
"#types/react": "^18.0.5",
"#types/react-dom": "^18.0.1",
"#types/styled-components": "^5.1.25",
"axios": "^0.26.1",
"framer-motion": "6",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"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": {
"#typescript-eslint/eslint-plugin": "^5.20.0",
"#typescript-eslint/parser": "^5.20.0",
"eslint-plugin-react": "^7.29.4"
}
}

On the second day, the warning disappeared.
Yesterday I stooped and restarted the project but the ReactDOM warning kept it showing.
Earlier today, I made some settings for VSCode which led me to close it and then opened the editor again. I didn't restart Windows10, no necessity for it. After some period of time I notice the warning disappearance.
Could VScode restarting after 'src/index.tsx' updating be a solution for this strange case?

Jest cannot find module

Hi I am trying to use Jest, but it keeps giving an error of cannot find module. I am not sure if this has to do with the paths of the files. All the files below are located out of my src folder. I have my file set up below.
jest.config.js file:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": [
"./__tests__"
],
"transform": {
"^.+\\.js?$": "babel-jest"
},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": [
"./setupTest"
],
"moduleDirectories": ["node_modules", "src"]
}
my test file located in __ test __:
import React from 'react';
import { shallow, mount } from 'enzyme';
import Routes, { OrderScreen, ShippingScreen, HomeScreen } from ../../src/App';
import {
MemoryRouter
} from 'react-router'
import { Route } from 'react-router-dom';
let pathMap = {};
describe('App', () => {
beforeAll(() => {
const component = shallow(<Routes />);
pathMap = component.find(Route).reduce((pathMap, route) => {
const routeProps = route.props();
pathMap[routeProps.path] = routeProps.component;
return pathMap;
}, {});
console.log(pathMap)
})
it('should show Home component for / router (getting array of routes)', () => {
expect(pathMap['/']).toBe(HomeScreen);
})
it('should show News Feed component for /news router', () => {
expect(pathMap['/order/:id']).toBe(OrderScreen);
})
it('should show News Feed component techdomain for /news router', () => {
expect(pathMap['/shipping']).toBe(ShippingScreen);
})
it('should show No match component for route not defined', () => {
expect(pathMap['/search/:keyword/page/:pageNumber']).toBe(HomeScreen);
})
})
package jason
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-react-jsx": "^7.12.17",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-redux": "^7.2.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-side-effect": "^2.1.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test:t": "react-scripts test",
"eject": "react-scripts eject",
"test": "jest",
"test:cover": "jest --coverage",
"open:coverage": "open ./coverage/lcov-report/index.html"
},
"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/core": "^7.13.8",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.8",
"#babel/preset-react": "^7.12.13",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"babel-jest": "^26.6.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest": "^26.6.3",
"jest-enzyme": "^7.1.2",
"react-dom": "^17.0.1"
}
}
babel.config.js
module.exports = {
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
['#babel/preset-react', { targets: { node: 'current' } }] // add this
]
};
Everything seems fine I've been following a tutorial but I cannot get over the error cannot find module it happens in my test file at this line
> 4 | import App, { App as AppComponent } from '../../src/App';
Does this have to do something with paths that need to be fixed? everything is located outside of my src folder. My main file App.js which I am trying to test is within my src folder.

Try this:
module.exports = {
"collectCoverage": true,
"coverageDirectory": "coverage",
"verbose": true,
"roots": ["<rootDir>/__tests__/"], // or "<rootDir>/src/__tests__/"
"transform": {"^.+\\.js?$": "babel-jest"},
"coverageThreshold": {
"global": {
"branches": 78,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFiles": ["<rootDir>/setupTest"],
"moduleNameMapper": {
"^src/(.*)": "<rootDir>/src/$1",
}
}

Trying to run my node.js server at same time as React .js App and get: 'ERR_MODULE_NOT_FOUND'

I've set up a server for an ecommerce site I am building in React and trying to run both the React app and the server at the same time but keep getting errors - and after solving them getting more. None of the fixes I have found online work.
I use npm run dev so to run the application in development server and run the node server at the same time (package.json is included and shows how I set it up) - however I get these warnings and errors:
I do not know why it cant finde the module it is talking about because the files are there and imported etc.. the relevant code is posted below.
package.json:
{
"name": "ecommerce",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "node-env-run server --exec nodemon | pino-colada",
"dev": "run-p server start"
},
"type": "module",
"keywords":[
"ES",
"MODULES",
"NODE",
"MODULES",
"JS"
],
"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/cli": "^7.12.10",
"#babel/core": "^7.12.10",
"#babel/node": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"body-parser": "^1.19.0",
"express": "^4.17.1",
"express-pino-logger": "^5.0.0",
"node-env-run": "^4.0.2",
"nodemon": "^2.0.7",
"npm-run-all": "^4.1.5",
"pino-colada": "^2.1.0"
},
"proxy": "http://localhost:3001"
}
server/index.js:
import data from './data';
const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(pino);
app.get('/api/prodcuts', (req, res) => {
res.setHeader('Content-Type', 'application/json');
res.send(data.products);
});
app.listen(3001, () =>
console.log('Express server is running on localhost:3001')
);
server/data.js:
const data = {
products: [
{
_id: '1',
name: 'Charizard',
category: 'Pokemon Cards',
image: '/Images/d1.jpg',
price: 60,
rating: 4.5,
numReview: 10
},
{
_id: '2',
name: 'Squirtle',
category: 'Pokemon Cards',
image: '/Images/d2.jpg',
price: 30,
rating: 4.1,
numReview: 10
},
{
id: '3',
name: 'Mew',
category: 'Pokemon Cards',
image: '/Images/d3.jpg',
price: 500,
rating: 4.8,
numReview: 10
}
]
}
export default data;
If there is anything else I need to add please let me know!

I had the same problem It just required me to add file extension when importing
import data from './data.js'

How to render a new page while using react-router

here's codesendbox
for react-router-shoe-store-app which does not work perfectly.
when i click on each shoe it is not render a new page instead of this it changes the url but not change the whole dom, just change on right and bottom of the page.

You are almost there with minor issues. You need Switch instead of Routes and component prop instead of element prop. Made the following changes and got your project running on codesandbox.
You need to change your App.js to this:
import React from "react";
import { Home } from "./Components/Home/Home";
import { ShoesBrandLaunch } from "./Components/ShoeDetails/ShoesBrandLaunch";
import { ShoeLaunch } from "./Components/ShoeDetails/ShoeLaunch";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/nike" component={ShoesBrandLaunch}>
<Route path=":slug" component={ShoeLaunch} />
</Route>
</Switch>
</Router>
);
}
export default App;

package.json
{
"name": "react-shoe-store-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"web-vitals": "^0.2.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"
]
}
}