Node-main script not executed with Nw-react-script - node.js

I'm trying to create a Desktop App which is using create-nw-react-app and Sqlite.
Since trying to compile native modules with NW.js is a nightmare, I'm trying to start a server with express before the frontend loads using node-main feature in package.json.
But when calling nw-react-scripts start, I found that the node-main script is not executed. If I open a separate terminal running the express server it works.
How can I tell NW to start the server before starting react application?
my package.json
{
"name": "ultimo",
"node-main": "api/server.js",
"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",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/nw.js": "^0.13.13",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"better-sqlite3": "^8.0.1",
"body-parser": "^1.20.1",
"cors": "^2.8.5",
"express": "^4.18.2",
"express-session": "^1.17.3",
"nw-react-scripts": "4.0.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "nw-react-scripts start",
"build": "nw-react-scripts build",
"test": "nw-react-scripts test",
"eject": "nw-react-scripts eject"
},
"eslintConfig": {
"extends": [
"nw-react-app",
"nw-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"
]
},
"main": "index.html",
"nwBuilder": {
"//": "https://github.com/nwjs-community/nw-builder",
"platforms": [
"osx64",
"win32",
"win64"
],
"version": "latest",
"flavor": "normal",
"buildDir": "./build",
"cacheDir": "./cache",
"macIcns": "./src/logo.icns"
},
"devDependencies": {
"concurrently": "^7.6.0",
"wait-on": "^7.0.1"
}
}
I have tried to modify to script start into concurrently \"node api/server.js\" \"nw-react-scripts start\" and it works, but it's only for development.

You haven't provided enough information. This works just fine with NW.js 0.71.0:
package.json:
{
"name": "test",
"main": "index.html",
"node-main": "node-main.js",
}
node-main.js:
console.log('hello world');
index.html:
Test
Run the app, inspect background page, note that it shows "hello world" in the console. If yours doesn't work, there's a bug in api/server.js.
Edit: This could be caused by nw-react-scripts. Since create-nw-react-app doesn't seem to be maintained anymore, you may want to look into other options. You can use the following as an initial template: https://github.com/nwutils/nw-react-example

Related

Rollup build issue always says cannot find module node:process

I am facing issue tried many things including changing node versions, removing node_modules and re-installing all dependencies but still not found any solution. I need help to solve this issue .
I want to create a library but stuck here .
Error when I run command of rollup
{
"name": "typescript-template",
"version": "0.1.0",
"private": true,
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/material": "^5.11.6",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.18.11",
"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",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"build-rollup": "rollup --config",
"build-tsc": "tsc"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-babel": "^6.0.3",
"#rollup/plugin-commonjs": "^24.0.1",
"#rollup/plugin-node-resolve": "^15.0.1",
"#rollup/plugin-typescript": "^11.0.0",
"#storybook/addon-actions": "^6.5.15",
"#storybook/addon-essentials": "^6.5.15",
"#storybook/addon-interactions": "^6.5.15",
"#storybook/addon-links": "^6.5.15",
"#storybook/builder-webpack5": "^6.5.15",
"#storybook/manager-webpack5": "^6.5.15",
"#storybook/node-logger": "^6.5.15",
"#storybook/preset-create-react-app": "^4.1.2",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "0.0.13",
"#types/react": "^18.0.27",
"babel-plugin-named-exports-order": "0.0.2",
"node-process": "^1.0.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"rollup": "^3.11.0",
"rollup-plugin-filesize": "^9.1.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.9.4",
"webpack": "^5.75.0"
},
"peerDependencies": {
"#types/react": "^18.0.27",
"#types/react-dom": "^18.0.10",
"react": "^18.2.0"
}
}
When i have visited this rollup js file then i found that they are requiring node:process
I want to solve this node:process not found issue.
I was having the same problem with my Rollup configuration and was able to fix it by upgrading my Node.js version from 14.15.1 to 14.19.3 which is a more stable version, so you can try upgrading to a more stable version of node.
And just in case you need it, you can use nvm to have installed different versions of NodeJS in the same environment. You can take a look at this tutorial on how to install it in Windows: NVM for windows.
I know that this is more a workaround than a real fix to the problem but I wasn't able to find more information about this issue.
Hope this can help you.

Running npm run build produces same output

When running npm run build on a project where I've changed something on its package.json, produces the exact same output as if I hadn't done any changes after running npm run build again.
I'm trying to upload the build folder to Pinata and it's producing the same hash (CID), so both folders (pre and post modification) are exactly the same.
What could be happening here?
This is my package.json file:
{
"name": "react-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^9.0.8",
"sass": "^1.51.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4",
"web3": "^1.8.1",
"tailwindcss": "^3.1.8"
},
"scripts": {
"start": "PORT=3001 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"
]
},
"homepage":"./"
}
Thanks!
npm run build just runs react-scripts build.
If you updated your dependencies, you need to npm install or npm update them first.

Is there something I can put in my React package.json to update the url of my backend fetching?

I'm currently in the process of deploying a MERN stack app. I'm putting the frontend on Netlify and the backend on Adaptable. I need to change the fetching on the frontend so that it goes to the Adaptable site instead of my localhost, but I don't want to manually change every fetch. During development I was using a proxy in the package.json and then just had the simple route in the fetch like '/api/login'. Is there a similar thing I can add to the package.json so that I can quickly change all the fetching rather than go into each fetch manually?
Here is my package.json for my frontend:
{
"proxy": "http://localhost:4000",
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.2",
"#fortawesome/free-regular-svg-icons": "^6.1.2",
"#fortawesome/free-solid-svg-icons": "^6.1.2",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"date-fns": "^2.28.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.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"
]
}
}
Here is an example of one of my fetch requests:
const response = await fetch('/api/checklist', {
headers: {
'Authorization': `Bearer ${user.token}`
}
})
The backend url will be something like this: https://foobar-backend.adaptable.app/

npm run build fail to compile. When npm audit fix, I got this

background: I did coding for ReactJS app and wanted to deploy on Netlify or Vercel. When I npm run build, I got error.
npm run build error
When I typed npm audit fix, I got this.
npm audit fix msg
I got stuck for days and dont know why I cant deploy my client app.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.5.10",
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.3",
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"apollo-link-context": "^1.0.20",
"graphql": "^16.3.0",
"graphql-tag": "^2.12.6",
"jwt-decode": "^3.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-moment": "^1.1.1",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.1.2",
"svgo": "^2.8.0",
"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": {
"terser-webpack-plugin": "^5.3.1"
},
"proxy": "https://fathomless-mountain-12345.herokuapp.com/"
}

React app not working in Internet Explorer 11

My react app is not working on Internet explorer 11. It is working fine on edge and chrome.
I have already created a lot of files and i do not think I can try npx create-react-app.( As pointed out in the other answers for similar questions)
I have included this in both my index.js file but it does not work.
import 'react-app-polyfill/ie11';
This is the error I am getting:
I have looked at the links and they ask to resolve a bracket error but there is no issue when I see the code.
This is my package.json file:
{
"name": "insurance_automation",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"config": "^3.1.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.1",
"mysql2": "^1.6.5",
"node": "^11.15.0",
"nodemailer": "^6.2.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"sequelize": "^5.8.6",
"universal-cookie": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "nodemon server",
"dev": "concurrently \"npm run server\" \"npm start\" "
},
"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": {
"concurrently": "^4.1.0",
"nodemon": "^1.19.1"
}
}
This worked for me.
Update the development array in package.json
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Add the below code in index.js in the src folder
// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
Then delete the node_modules folder and run
npm install
IE does not support a lot of ES6+ features by default. For more info, refer the create-react-app polyfill docs.

Resources