We Keep Coding

npm build error when deploying app ( digital ocean in client folder )

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

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.

Unable to open app on heroku. React, node.js

so I've tjried several solutions I found here and unfortunately none of them seemed to work. I have an app which I have deployed on heroku. Frontend in react.js backend in node. When I run
heroku open
I receive an error 404 in console. Heroku logs show error code 503 and "Failed at the # start script". I am not sure what might be a problem, here is my json
{
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"cors": "^2.8.5",
"express": "4.17.1",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"uuidv4": "^6.1.1"
},
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
},
"build": "cd client && yarn install && yarn build"
}
Please advise.

Ok, so the issue is fixed now. The problem was version or react-scripts in packaje.json. It differed in client and server side. Once I made sure the version it the same I rebuild the app and it opened correctly. Hope that helps someone in the future.

Elastic APM agent is inactive due to configuration. What does it mean?

I have a problem when I want to start the app, when i type npm run server. And the error information are like this :
opbeans#1.0.0 server /home/rahmat/independentProject/sample/sample3/opbeannode server.js
Elastic APM agent is inactive due to configuration
server is listening on port 3001
events.js:183
throw er; // Unhandled 'error' event
^
Elastic APM agent is inactive due to configuration, what does it mean?
Maybe someone can help me, please...
This is the package.json :
{
"name": "opbeans",
"version": "1.0.0",
"description": "The Opbeans inventory management system",
"main": "server.js",
"dependencies": {
"after-all-results": "^2.0.0",
"body-parser": "^1.15.2",
"concurrently": "^3.1.0",
"detect-port": "^1.2.2",
"elastic-apm-node": "^1.3.0",
"express": "^4.14.0",
"pg": "^6.1.2",
"redis": "^2.6.3",
"request": "^2.79.0",
"webpack": "^4.3.0",
"webpack-dev-server": "^3.1.1",
"workload": "^2.3.0"
},
"devDependencies": {
"dotenv": "^4.0.0",
"react-dev-utils": "^5.0.0",
"react-scripts": "^1.1.1",
"standard": "^10.0.2"
},
"scripts": {
"db-setup": "./db/setup.sh",
"test": "standard .js server//.js db//*.js",
"server": "node server.js",
"client": "npm run start --prefix client/",
"client-build": "npm run build --prefix client/",
"client-install": "npm install --prefix client/",
"postinstall": "./client/build-client.sh",
"start": "concurrently \"npm run server\" \"npm run client\"",
"workload": "workload -f .workload.js"
}

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