We Keep Coding

How to stop Heroku from trying to install Husky

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.

Invalid hook call when project added to Yarn Workspace

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.

Cannot manage to install jest

I am using npm to install jest in order to perform some tests over my js code.
In order to install it I use the command:
$ npm install --save-dev jest
As described on their website.
However, it fails over and over again with these errors:
What should I do in order to install jest properly?
This is my package.json :
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-env": "^1.7.0",
"jest": "^23.5.0",
"react-scripts": "0.6.1"
},
"dependencies": {
"adal-angular": "^1.0.13",
"axios": "^0.15.3",
"bootstrap": "^3.3.7",
"jquery": "^3.1.1",
"lodash": "^4.16.4",
"react": "^15.4.2",
"react-bootstrap": "^0.30.5",
"react-bootstrap-typeahead": "^1.2.0",
"react-dom": "^15.4.2",
"react-http-request": "^1.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "This project was bootstrapped with [Create React App]
(https://github.com/facebookincubator/create-react-app).",
"main": "index.js",
"author": "",
"license": "ISC"
}
Current message:
enter image description here

Please install react v16 for this:
npm install --save react#^16.4.2 react-dom#^16.4.2
then run this command:
npm update --save
to get all dependent packages

I simply deleted the node_modules and package-lock.json, and use yarn to re-install everything. And it worked...

Cryptic Babel error in React web app when using Stellar SDK

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

Migrating react project dependencies from node to apache

I have created a react application using create-react-app
but I want to move my application from node to apache and I'm not sure how to handle my project's dependencies. For instance, material-ui's documentation only lists npm on its installation guide.
Is there a way to get these dependencies to work on an apache server?
If so, would it be a separate configuration process for each dependency?
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"material-ui": "^0.18.6",
"npm": "^5.1.0",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-flexbox-grid": "^1.1.3",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1"
},
"devDependencies": {
"babel-preset-env": "^1.6.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.0",
"eslint-plugin-react": "^7.1.0",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

React applications don't depend on any particular server technology - once your build has run, it's just static JavaScript.
Running npm run build in your project's root will create a dist folder with your bundled application inside - all you need to do is deploy the contents of that folder to your Apache server.
See the 'Deploying' section of the create-react-app README for more info.
As an aside - if you've been using create-react-app's built-in server in production, don't! That's just designed for development, and is not performant nor secure enough for serving your app to the world.