I've noticed something quite strange. I'm working on this node app using Firebase v8.9.1, and the following two things have happened.
The Firebase package has disappeared from node_modules along with package.json, almost as if my application had been rolled back. The rest of my app is as I last left it.
This is the second time this has happened to me, the first time I thought it was some sort of bug and didn't mind, but today it happened once again, and I'm afraid it might keep happening.
Why does the package disappear? I didn't even close the editor (VSCode).
I'm also using React, in case that's relevant.
Thank you in advance.
This is my package.json after reinstalling firebase:
{
"name": "fastbuy1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.2",
"firebase": "8.9.1",
"react": "17.0.2",
"react-bootstrap": "^2.5.0",
"react-dom": "17.0.2",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"uuid": "9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"buildDeploy": "yarn build && firebase deploy --only hosting"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Edit 1: I also realized that in my github repo the package.json does show that Firebase is installed.
Edit 2: Some more information. The last thing I did was deploy the application, and it worked all right. I left the computer for about two hours and when I came back to re deploy the application, I started to receive an auth error: "Your API key is invalid, please check you have copied it correctly." I began to search for the cause, and that's when I realized that Firebase was no longer in my json nor in the modules directory. This error persists, but I'm trying to fix it by myself, and will post another question if I can't find the answer. I hope this gives a bit more clarity to the issue.
Related
I am trying to deploy my react app on GCP. So in Gcloud shell, I cloned my react project and typed
npm install
npm run build
However, I got this error:
ERROR in Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint/use-at-your-own-risk'
Require stack:
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/utilities/getBuiltinRule.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/rules/noUnusedExpressions.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/eslint-plugin-flowtype/dist/index.js
- /home/oizfwvlh/Portfolio/portfolio/node_modules/#eslint/eslintrc/dist/eslintrc.cjs
I have no idea why. I did not have this issue at all when I was testing on my PC. Here is my package.json:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.5",
"#mui/material": "^5.2.5",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.7.0",
"chartjs-plugin-deferred": "^1.0.2",
"emailjs-com": "^3.2.0",
"jquery": "^3.6.0",
"node-sass": "^7.0.0",
"popper.js": "^1.16.1",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"react-vertical-timeline-component": "^3.5.2",
"web-vitals": "^2.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 tried to install the eslint package both locally and globally, but none of these works. It could be a environment thing since I'm straight deploying on GShell, but I still don't know how to fix this. I need some help.
I believe Ryan has linked an appropriate stackoverflow thread, where a community user has provided a good answer. I am posting that as an answer for whoever is visiting this question to find the solution.
What's happening is that when you run npm start it's probably doing some checks with eslint. create-react-app has some checks that break your build if you have eslint errors so it makes sense that they're associated.
The error you're getting here is related to a node feature that eslint is using called subpath exports but its support is hit or miss depending on how the library is consumed. This has been highlighted to cause issues when used with jest for example.
For the flowtype eslint plugin this is the exact line of code that's causing you issues.
You can also read about a similar issue reported regarding the typescript eslint plugin.
The solution and the reason, what's causing this problem is that a fix was to be made in a clone of the eslint-plugin-flowtype (given that the original plugin had a lack of maintenance) here https://github.com/flow-typed/eslint-plugin-ft-flow/pull/23.
An issue is raised with create-react-app to swap out the plugin with the new one which would have more maintenance and solve issues that you're experiencing.
The issue link is here.
Update #2 after some more research
Looking into the build logs some more, it looks like Cypress gets installed via a postinstall hook that downloads a binary that Heroku doesn't pick up in the build process for some reason unless config is set to NPM_CONFIG_PRODUCTION=false. Comparing the failed build log with the successful build log, this postinstall hook doesn't run:
> cypress#6.0.0 postinstall /tmp/build_0453cc7d/frontend/node_modules/cypress
Why this and potentially other devDependencies don't get installed prior to npm run build doesn't appear to be documented and runs contrary to Heroku's documentation that devDependencies are installed by default.
Update #1 with more build info
Here's a gist that shows the failing build log and the succeeding build log (after configuring Heroku not to prune devDependencies using heroku config:set NPM_CONFIG_PRODUCTION=false).
https://gist.github.com/ddehart/9e0ca72a3f20f104e05d70eed6de6c64
The pruning appears to be initiated after the build process installed Cypress, so it's not clear why setting NPM_CONFIG_PRODUCTION=false prompted the Cypress installation, despite Heroku's documentation that says:
By default, Heroku will install all dependencies listed in package.json under dependencies and devDependencies.
Original question
I'm getting this npm run build error when deploying to Heroku:
Failed to load plugin 'cypress' declared in 'package.json': Cannot find module 'eslint-plugin-cypress'
Here's my package.json for reference:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
"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/cypress": "^7.0.2",
"cypress": "^6.0.0",
"eslint-plugin-cypress": "^2.11.2"
}
}
The project was initiated using Create React App. npm run build succeeds without any issues locally, so I first thought maybe Heroku was pruning devDependencies, but looking back at other build logs that succeeded show that pruning happens after a successful build.
If it helps, here's my package.json from the last successful build.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress:open": "cypress open"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cypress": "^5.4.0",
"eslint-plugin-cypress": "^2.11.2"
}
}
I think the build is complaining about this, although that hasn't changed at all from the last successful build.
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
Removing that plugin declaration of course ruins Cypress in my IDE. Is there any way to work around the build error or troubleshoot on the Heroku instance itself?
Rather than setting NPM_CONFIG_PRODUCTION=false, I ended up moving the Cypress eslintConfig into its own .eslintrc.json file within the cypress directory. Since Heroku only seems to be getting hung up on the Cypress plugin referenced in the main package.json, removing that configuration altogether fixed the Heroku build issue without affecting my IDE and without having to rely on the non-standard NPM_CONFIG_PRODUCTION setting.
Per Cypress's documentation, the .eslintrc.json file just needs this for the recommended rules:
{
"extends": [
"plugin:cypress/recommended"
]
}
This question already has answers here:
NPM run * doesn't do anything
(2 answers)
Closed 3 years ago.
After creating an app using create-react-app, I tried using 'npm start' to run the app. Although it doesn't throw an error, it also doesn't launch the server.
For a little context, this command was working a few weeks ago just fine. It would spit out a little bit of text into the console and then lauch a browser at localhost:3000. Since then, I ran into a bug between node and React Native and downgraded to node v10 in order to avoid the bug (although Im currently using node v13). Since then, I have reinstalled node (via homebrew) and reinstalled creact-react-app.
Below are my current specifications
macOS v10.14.5
node v13.5.0
npm v6.13.4
create-react-app v3.3.0
Below is my package.json file
{
"name": "testing",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.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"
]
}
}
I have tried using npm-install-missing to check for missing dependancies. I have also tried removing node modules using 'rm -rf node_modules' and then running 'npm install'.
I am unsure where to go from here. I thought that since 'npm start' calls 'react-scripts start', maybe there was an issue within react-scripts. However, react-scripts should have been reinstalled with create-react-app so im not sure. I am happy to provide more information if there is anything else that I am missing. Thanks!
Edit: When I deleted a previous version of node, I went though and deleted files manulally so that I could reinstall node using homebrew. I thought that I deleted all the proper files, however, if I didn't, could that play a role in this?
Go to your
~\.npmrc
file and see if it contains
ignore-scripts=true
I dont know how or why this was set but it offered many hours of headaches.
Today I decided to create a react app, a task in which I have done a number of times, and after running the create-react-app command in my terminal: I navigated into my new project directory, installed some dependencies I knew I would need, lastly I ran npm start and to my surprise -- nothing happened. Not only is npm start not working, none of the scripts in my package.json file are executing and are completely unresponsive. Furthermore, all executable scripts in all of my React projects have failed to execute since this error has risen.
Last week I was having some trouble installing sqlite3 and had to perform a lot of maintenance in order to get use it in my project; perhaps I deleted a file that is needed in npm that runs scripts? I'll leave a reference to my package.json file below, although I have not altered it much at all.
{
"name": "maps",
"version": "0.1.0",
"private": true,
"dependencies": {
"cors": "^2.8.5",
"errorhandler": "^1.5.1",
"morgan": "^1.9.1",
"node-fetch": "^2.6.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0",
"sqlite3": "^4.1.0",
"body-parser": "^1.19.0",
"express": "^4.17.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test"
},
"proxy": "http://localhost:3001",
"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"
]
}
}
Thank you in advance to the whiz who fixes this!
Edit:
The following is a list of solutions in which I have tried.
installed the latest create-react-app globally
installed the latest npm and node globally
deleted node_modules and reinstalled all dependencies using npm i
in my project directory
checking that my scripts.test in my package.json file is set appropriately
Perform the following steps:
Delete the node_modules folder from your project directory
run the command npm install in the project directory
run npm start in the project directory
I'm creating an App with React and everything has been fine for weeks until I installed react-timestamp with npm in order to convert unix time (https://www.npmjs.com/package/react-timestamp).
But now it won't compile and says:
/Users/nembokid/node_modules/react-timestamp/lib/timestamp.js
Module not found: Can't resolve 'react' in '/Users/nembokid/node_modules/react-timestamp/lib'
I've tried to remove package-lock.json as well as yarn.lock, then did npm install again followed by npm run start, but still same issue. Also tried to add it to my package.json file, but without success.
In '/Users/nembokid/node_modules/react-timestamp/lib' there's only one file: timestamp.js. Should it also contain a file called react.js?
How can I get around this? Should I try to delete react-timestamp from my node_modules folder? Don't really understand the issue here. Would be grateful for all help!
Edit: package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router-dom": "4.3.1",
"react-scripts": "2.1.1",
"web3": "^1.0.0-beta.37"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
I deleted the folder /Users/nembokid/node_modules/react-timestamp and then from the terminal, inside the project client folder: npm run start without npm install or anything. Works perfectly fine again.