I have a Project and when I run tests in it, they all pass. I have set up a comment library as a common project and created a yarn workspace. When I had that common project to my first project, but don't use any components yet, I get multiple tests fail with:
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I don't understand what is causing this given that I'm not importing any components from my second library yet. But just setting up the workspace and installing the local dependency is causing these errors.
When I run npm ls react in my first project I get this:
❯ npm ls react
#services/first-project#3.0.0 /Users/code/services/first-prject/client
├─┬ enzyme-adapter-react-16#1.15.2
│ └─┬ react-test-renderer#16.13.1
│ └── react#16.13.1 extraneous
└─┬ react-datetime#2.16.3
└─┬ react-onclickoutside#6.9.0
└── react#16.13.1 extraneous
The package.json for the common library:
{
"name": "#libs/common",
"version": "1.0.0",
"description": "Shared Component Library for TS Tools",
"author": "",
"license": "MIT",
"repository": "/tools-common",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
"start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
"prepublish": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && yarn install && yarn run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"#ag-grid-community/client-side-row-model": "^23.1.0",
"#ag-grid-community/react": "^23.1.0",
"#material-ui/core": "^4.9.13",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.52",
"#material-ui/pickers": "^3.2.10",
"gestalt": "1.48.0",
"react": "^16.0.0"
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.7",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/plugin-proposal-object-rest-spread": "^7.8.3",
"#babel/plugin-transform-destructuring": "^7.8.3",
"#babel/polyfill": "^7.8.7",
"#babel/preset-env": "^7.8.7",
"#babel/preset-flow": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle-crl": "^0.13.8",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-is": "^16.13.1",
"react-scripts": "^3.4.1"
},
"files": [
"dist"
]
}
If I take the first project out of the workspace and yarn install, everything works fine. I put it in a workspace, add the common component and they fail.
Related
I am trying to deploy my app but when my server folder and client is done completely and i do npm install and then i do "npm run build" this is what i am getting i dont know why this is happening because i have never seen this type of error and this is so annoying at the last times.
I can provide my Package.Json too for the client folder.
These are the logs
npm run build
> client#1.0.0 build
> next build
info - Loaded env from /home/ibraradmin/client/.env.local
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn - Detected next.config.js, no exported configuration found. https://nextjs.org/docs/messages/empty-configuration
info - Checking validity of types
warn - No ESLint configuration detected. Run next lint to begin setup
> Build error occurred
Error: > Build directory is not writeable. https://nextjs.org/docs/messages/build-dir-not-writeable
at /home/ibraradmin/client/node_modules/next/dist/build/index.js:275:19
at async Span.traceAsyncFn (/home/ibraradmin/client/node_modules/next/dist/telemetry/trace/trace.js:60:20)
at async Object.build [as default] (/home/ibraradmin/client/node_modules/next/dist/build/index.js:77:25)
info - Creating an optimized production build
This is the package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "Xidas Studios",
"license": "MIT",
"dependencies": {
"#ant-design/icons": "^4.6.4",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#material-ui/icons": "^4.11.2",
"#mui/material": "^5.0.0",
"#stripe/stripe-js": "^1.20.3",
"antd": "^4.16.13",
"axios": "^0.21.4",
"axois": "^0.0.1-security",
"bootstrap": "^5.1.1",
"express": "^4.17.1",
"fs": "^0.0.1-security",
"http-proxy-middleware": "^2.0.1",
"install": "^0.13.0",
"next": "10.2.0",
"next-csrf": "^0.1.2",
"npm": "^8.0.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-dom": "^17.0.2",
"react-image-file-resizer": "^0.4.7",
"react-markdown": "^7.0.1",
"react-native-popup-confirm-toast": "^2.0.3",
"react-native-status-bar-height": "^2.6.0",
"react-player": "^2.9.0",
"react-router-dom": "^5.3.0",
"react-toastify": "^8.0.2",
"request": "^2.79.0",
"simple-react-footer": "^1.0.2",
"styled-components": "^5.3.1"
}
}
If anyone can help me with this it will be thankful
I have a Node app (React) on Heroku and the deploy and build was previous working fine, I have now added Husky, Lint-staged, Craco and WDYR to a new branch which works locally.
Upon trying to deploy and build this branch on Heroku, I am finding that the build fails due to Heroku trying to install Husky despite me not asking it to and it being a development tool. It makes sense that Heroku cannot find Husky as it is a dev dependency.
From what I can see Heroku is running the prepare script from the client package.json, which it shouldn't be.
How can I stop Heroku from trying to install Husky?
Here are my package.json files (haven't included server package.json as I'm not sure it's relevant).
root
{
"engines": {
"node": "12.x"
},
"scripts": {
"start": "cd server && node server.js",
"build": "cd client && npm run build",
"install-server": "cd server && npm ci",
"install-client": "cd client && npm ci",
"heroku-postbuild": "npm run install-server && npm run install-client && npm run build"
}
}
client
{
"name": "qupp",
"version": "1.0.0",
"description": "App that allows users to create playlists using Spotify's API",
"engines": {
"node": "12.x"
},
"scripts": {
"build:css": "postcss src/App.scss -o src/index.css",
"watch:css": "postcss src/App.scss -o src/index.css -w",
"start_new": "PORT=3002 craco start",
"start": "npm run watch:css & PORT=3002 craco start",
"build": "npm run build:css && craco build",
"test": "craco test",
"eject": "react-scripts eject",
"prepare": "cd ../ && husky install ./client/.husky"
},
"proxy": "http://127.0.0.1:8082/",
"author": "Daniel Blythe",
"license": "ISC",
"dependencies": {
"#craco/craco": "^6.3.0",
"#types/jest": "^24.0.17",
"#types/materialize-css": "^1.0.6",
"#types/node": "^12.7.1",
"#types/react": "^16.9.1",
"#types/react-dom": "^16.8.5",
"axios": "^0.18.0",
"babel-preset-es2015-node6": "^0.4.0",
"classnames": "^2.2.6",
"dotenv": "^6.1.0",
"firebase": "^8.2.4",
"http2": "^3.3.7",
"jwt-decode": "^2.2.0",
"morgan": "^1.9.1",
"node-pre-gyp": "^0.11.0",
"node-sass": "^4.9.4",
"postcss-cli": "^6.1.3",
"prop-types": "^15.6.2",
"ramda": "^0.27.1",
"re-base": "^4.0.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-dropzone": "^10.0.0",
"react-materialize": "^3.3.3",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "4.0.3",
"react-spotify-player": "^1.0.4",
"react-transition-group": "^2.5.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"source-map-support": "^0.5.9",
"typescript": "^3.5.3"
},
"devDependencies": {
"#types/classnames": "^2.2.9",
"#types/react-redux": "^7.1.2",
"#welldone-software/why-did-you-render": "^6.2.1",
"autoprefixer": "^9.8.6",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.0",
"enzyme-to-json": "^3.3.5",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-no-autofix": "^1.1.2",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.2",
"jest-dom": "^3.2.2",
"lint-staged": "^11.1.2",
"postcss": "^7.0.36",
"postcss-cli": "^6.1.2",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"react-test-renderer": "^16.8.6",
"react-testing-library": "^7.0.0",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.14"
},
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Here is a screenshot of the error:
Here is the best solution:
run npm ci --only=production --ignore-scripts
https://github.com/typicode/husky/issues/920
Following is from Heroku support ticket (I did not check this info):
To cover the --only=production flag, you can set the environment
variable NPM_CONFIG_PRODUCTION=true
https://devcenter.heroku.com/articles/nodejs-support#only-installing-dependencies
While it isn’t possible to add the --ignore-scripts flag to the
install command directly, it can be set via npm config with npm config
set ignore-scripts true and this will achieve the same thing during
installation.
The above command could be included using heroku-specific-build steps.
e.g.;
"scripts": {
"heroku-prebuild": "npm config set ignore-scripts true",
...
}
Alternative solution (but it has a drawback):
You can direct Heroku to only install dependencies by setting environment variables NPM_CONFIG_PRODUCTION=true or YARN_PRODUCTION=true
See https://devcenter.heroku.com/articles/nodejs-support#only-installing-dependencies
This way you won't install devDependencies, assuming husky is in devDependencies (why would it not be?) meaning husky will never install.
The drawback is it won't install with any other devDependencies and i.e. I have there webpack which is required to run on build step. I don't want to move it from devDependencies to dependencies so I cant use this solution.
I am encountering this issue where prettier is giving me in excess of 1000 errors. I'm not sure what is causing it however here is how I got to this issue. I followed TraversyMedias guide on youtube to install eslint and prettier with the airbnb template. It was working great. I programmed for close to a day with it. Then after I started switching a component I had from React hooks state to Redux state I got an error saying that a file couldn't be found. After I fixed the issue it still was coming up with this error. I restarted my dev server and got a different error entirely it was an issue with the version of eslint i had. I can't remember the specific error but it was something along these lines "The react-scripts package provided by Create React App requires a dependency: "eslint": "^7.11.0". " After I got that error I followed these steps
To fix the dependency tree, try following the steps below in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
after I did that I encountered the error I am asking the question about.
some useful information My project structure is a top level project folder. it contains both my server and client folder and all three have their own package.json.
I look on this forum for someone with an error similar to mine and couldn't find any.
I googled many different worded questions about this issue and can't find anything on it.
I uninstalled prettier to see if it would go away. it didn't
here is what my package.json looks like in this order root folder client folder and server folder
{
"name": "sac-website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"concurrently": "^6.2.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0"
},
"dependencies": {
"eslint": "^7.28.0",
"eslint-config-node": "^4.1.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.4.0"
}
}
{
"name": "sac-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.58",
"#material-ui/pickers": "^3.3.10",
"#material-ui/styles": "^4.11.4",
"#reduxjs/toolkit": "^1.6.0",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"eslint": "^7.28.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-toastify": "^7.0.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^5.1.4",
"workbox-broadcast-update": "^5.1.4",
"workbox-cacheable-response": "^5.1.4",
"workbox-core": "^5.1.4",
"workbox-expiration": "^5.1.4",
"workbox-google-analytics": "^5.1.4",
"workbox-navigation-preload": "^5.1.4",
"workbox-precaching": "^5.1.4",
"workbox-range-requests": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4",
"workbox-streams": "^5.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": {
"eslint-plugin-react": "^7.24.0"
}
}
{
"name": "server",
"version": "1.0.0",
"description": "The server for the sac website",
"main": "index.js",
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.11"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}
Any help you guys could give me would be fantastic. And please pardon me if I asked this question wrong. It is my first time asking any question on a programming forum.
The error I was getting had something to do with how eslint was set up or how prettier was set up. I deleted everything that was related to that and now the project is working.
In a React 17 project I wanted to run, there were 2 .ignore files: .prettierignore and .eslintignore.
I added the src folder to these files and with that the errors disappeared.
This way you don't have to remove everything, and you can leave it to address it at a later time if you want.
I have a custom Express project with a small React front-end builded with gulp.
What I would like to do is to add a create-react-app as second front-end like this one in my project, so I:
created a src/ folder in the root of the project
pasted the src/ form the create-react-app in my project src/
added react-scripts and all the create-react-app dependencies in my package.json
installed all the new dependencies
added "build": "react-scripts build", to my package.json scripts
I would like to build the create-react-app in the default folder /build and respond to all the request that doesn't match my API routes with the index of the builded create-react-app using this code in the routes bottom:
app.get('*', (req, res)=>{
res.sendFile(path.join(__dirname, '..','build','index.html'));
})
But running npm run build I get:
> node-js-scaffolder#0.0.1 build /Users/matt/dev/my-api
> react-scripts build
Could not find a required file.
Name: index.html
Searched in: /Users/matt/dev/my-api/public
I actually have a public/ folder where gulp saves my builded front end together with some images, but react-scripts should look in the src/ folder for the entry point of the create-react-app.
EDIT: my full package.json:
{
"name": "my project",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "react-scripts build",
"start": "npm run gulp -- --production && sequelize db:migrate --config=config/migrations.json --env=production && pm2 startOrReload config/pm2/production.json",
"dev": "npm run gulp dev -- --development",
"gulp": "gulp",
"prestart": "npm install",
"startStaging": "npm install && npm run gulp -- --staging && sequelize db:migrate --config=config/migrations.json --env=staging && pm2 startOrReload config/pm2/staging.json",
"stop": "pm2 stop config/pm2/production.json",
"stopStaging": "pm2 stop config/pm2/staging.json",
"deploy": "git pull && npm start",
"deployStaging": "git pull && npm run startStaging",
},
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#material-ui/core": "1.4.1",
"#material-ui/icons": "2.0.0",
"#types/googlemaps": "3.30.11",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"async": "^2.6.0",
"babel-polyfill": "^6.26.0",
"body-parser": "^1.18.2",
"bunyan": "^1.8.12",
"chance": "^1.0.12",
"chartist": "0.10.1",
"cheerio": "^0.20.0",
"classnames": "2.2.6",
"compression": "^1.7.1",
"connect-flash": "^0.1.1",
"continuation-local-storage": "^3.2.1",
"cookie-parser": "^1.3.3",
"csv-parse": "^2.2.0",
"del": "^2.2.2",
"express": "^4.16.2",
"express-brute": "^1.0.1",
"express-brute-redis": "0.0.1",
"express-jwt": "^3.4.0",
"geolib": "^2.0.24",
"glob": "^6.0.4",
"helmet": "^2.3.0",
"inky": "^1.3.7",
"js-cookie": "^2.2.0",
"jsonwebtoken": "^7.4.3",
"juice": "^2.0.0",
"lodash": "^4.17.4",
"material-ui": "^0.19.3",
"method-override": "^2.3.10",
"minimist": "^1.2.0",
"moment": "^2.19.3",
"moment-timezone": "^0.5.14",
"morgan": "^1.9.0",
"multi-glob": "^1.0.1",
"mysql": "^2.15.0",
"node-fetch": "^2.1.2",
"node-sass": "^3.13.1",
"node-schedule": "^1.2.5",
"nunjucks": "^2.5.2",
"perfect-scrollbar": "1.4.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-chartist": "0.13.1",
"react-dom": "16.4.1",
"react-dropzone": "^4.2.3",
"react-google-maps": "9.4.5",
"react-redux": "^5.0.6",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"react-swipeable-views": "0.12.15",
"redux": "^3.7.2",
"redux-thunk": "^2.3.0",
"request": "^2.83.0",
"run-sequence": "^1.2.2",
"sequelize": "^3.31.0",
"serve-favicon": "^2.4.5",
"slugify": "^1.3.0",
"uuid": "^3.1.0",
"validator": "^9.2.0",
"vinyl-buffer": "^1.0.0"
},
}
What am I doing wrong?
I've made a new repository but I still want to serve the create-react-app with express so I've followed this tutorial and created a /client folder in my project and put there all the create-react-app files and folders together with its package.json.
The scripts I use to deploy or lunch in dev mode are the following:
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"build": "yarn && cd client && yarn && yarn build && cd ../",
"deploy": "git pull origin master && yarn build && pm2 restart server.js || pm2 start server.js"
I'd like to know which are the cons of this approach if someone has any experience.
First, eject your create-react-app project like this :
npm run eject or yarn eject
Second, you can configure index.html and public folder path from: [react-project-dir]/config/paths.js
In your case i assume eject command will create a folder in root directory of your project so you can find it in: [project-dir]/config/paths.js
You can change these parameters:
...
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
like this:
appPublic: resolveApp('public_react'),
appHtml: resolveApp('public_react/index.html'),
Im developing a web app using React JS(Using Create React App) which will run on Stellar and Im using the official JS Stellar SDK. However, after integrating the Stellar SDK, I get a Babel error due to the Stellar SDK. Has anyone faced this issue before? The error is as follows :
./node_modules/js-xdr/lib/opaque.js
Module not found: Can't resolve 'babel-runtime/helpers/interop-
require' in user//node_modules/js-xdr/lib'
I have tried removing and installing the node modules but the error still persists.
My package.json is as follows:
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.17.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"font-awesome-animation": "^0.1.0",
"material-ui": "^0.20.0",
"moment": "^2.20.1",
"node-sass-chokidar": "^0.0.3",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-atv-img": "^0.1.1",
"react-dom": "^16.2.0",
"react-flexbox-grid": "^2.0.0",
"react-lines-ellipsis": "^0.10.0",
"react-parallax": "^1.5.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"recharts": "^1.0.0-beta.7",
"redux": "^3.7.2",
"stellar-sdk": "^0.8.0"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Edit: Added the package.json