Rollup build issue always says cannot find module node:process - node.js

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.

Related

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.

Error when unit testing in ReactJS Missing library modules

I am writing a test website using ReactJs & Node for a class and am having difficulties running tests.
I have tried reinstalling packages via npm install. Upgrading and downgrading to certain versions of "testing-library" but that leads to more failed tests ive tried installing npm i helpers/helper
This is my package.json
{
"name": "landingpage-react-template",
"private": true,
"dependencies": {
"#testing-library/react": "^9.3.2",
"axios": "^0.27.2",
"bcrypt": "^5.0.1",
"bcryptjs": "^2.4.3",
"cors": "^2.8.5",
"database.js": "^0.0.1",
"detect-file": "^1.0.0",
"detect-libc": "^2.0.1",
"emailjs-com": "^2.6.4",
"express": "^4.18.1",
"express-fileupload": "^1.4.0",
"express-handlebars": "^6.0.6",
"multer": "^1.4.5-lts.1",
"mv": "^2.1.1",
"mysql": "^2.18.1",
"mysql2": "^2.3.3",
"nodemailer": "^6.8.0",
"react": "^17.0.1",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-youtube": "^9.0.1",
"sequelize": "^6.23.2",
"sequelize-cli": "^6.5.1",
"smooth-scroll": "^16.1.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"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/user-event": "^14.4.3",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"enzyme": "^3.11.0"
}
}
And this is the error im getting after running npm test
FAIL src/pages/components/resetPasswordPage/resetPasswordComponent.test.jsx
● Test suite failed to run
Cannot find module '#testing-library/dom/dist/helpers.js' from 'node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js'
Require stack:
node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js
node_modules/#testing-library/user-event/dist/cjs/utils/dataTransfer/Clipboard.js
node_modules/#testing-library/user-event/dist/cjs/event/behavior/click.js
node_modules/#testing-library/user-event/dist/cjs/event/dispatchEvent.js
node_modules/#testing-library/user-event/dist/cjs/document/prepareDocument.js
node_modules/#testing-library/user-event/dist/cjs/setup/setup.js
node_modules/#testing-library/user-event/dist/cjs/setup/index.js
node_modules/#testing-library/user-event/dist/cjs/index.js
src/pages/components/resetPasswordPage/resetPasswordComponent.test.jsx
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
at Object.<anonymous> (node_modules/#testing-library/user-event/dist/cjs/utils/misc/getWindow.js:5:18)
#testing-library/dom is a peer dependency of user-event and needs to be installed separately in your project.

Heroku Unexpected token '<' Deployment error, leading to blank page

I have been facing an unknown error after deploying on Heroku namely:
SyntaxError: Unexpected token '<'
However, deployment on GitHub pages works fine so I am unsure of the issue. Everything is working fine, except the actual page is just blank. When I view sources, it looks like this: Error
Here is my package.json file:
{
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.8.2",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.5.1",
"#mui/material": "^5.5.2",
"#mui/styled-engine-sc": "^5.5.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"autosuggest-highlight": "^3.2.1",
"axios": "^0.26.1",
"react": "^16.14.0",
"react-bootstrap": "^2.1.1",
"react-countup": "^6.1.1",
"react-dom": "^16.14.0",
"react-hook-form": "^7.29.0",
"react-icons": "^4.3.1",
"react-redux": "^7.2.8",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.3.0",
"react-scripts": "^5.0.0",
"react-scroll": "^1.8.4",
"react-text-typist": "^1.0.9",
"react-typist": "^2.0.5",
"redux": "^4.1.2",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "node --max_old_space_size=2560 node_modules/.bin/react-scripts start",
"build": "node --max_old_space_size=2560 node_modules/.bin/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": {
"gh-pages": "^3.2.3",
"sass": "^1.48.0"
}
}
Does anyone know what is the problem?

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 freezes after running npm start . The issue is observed while compilation

After running npm start my react app is either very slow in opening the page on the browser and most of the times my machine freezes and I am forced to reboot my system .
Below is my package.json file .
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/data-grid": "^4.0.0-alpha.37",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#stripe/react-stripe-js": "^1.7.0",
"#stripe/stripe-js": "^1.22.0",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.24.0",
"country-state-city": "^3.0.1",
"overlay-navbar": "^1.1.1",
"react": "^17.0.2",
"react-alert": "^7.0.3",
"react-alert-template-basic": "^1.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-js-pagination": "^3.0.3",
"react-material-ui-carousel": "^2.3.1",
"react-rating-stars-component": "^2.2.0",
"react-redux": "^7.2.6",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.2",
"webfontloader": "^1.6.28"
},
"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"
]
},
"proxy": "http://localhost:4000"
}
node version : 14.17.0
react version : 17.0.2
npm version : 7.20.6
os: Ubuntu 20.04.3
To solve this issue permanently you need to remove the nodejs and npm completely from your computer.
Windows Users can uninstall npm and node and can download the latest one and install. If you have any issue please follow this post to install node and npm.
Linux Users can uninstall and remove nodejs and npm by running the following command.
sudo apt-get remove nodejs
sudo apt-get remove npm
more details are given on this link go and follow it, very helpful
https://aboutreact.com/problem-after-running-npm-start-execution-got-stucked-on-starting-running-packager/

Resources