NextJS Netlify build failing with node version "12.18.3" - reactjs

I'm trying to my deploy a small blog built with NextJS on Netlify but I'm getting this error while generating a build:
10:59:39 PM: [1/5] Validating package.json...
10:59:39 PM: error my-app-name#0.1.0: The engine "node" is incompatible with this module. Expected version "12.18.3". Got "12.18.0"
10:59:39 PM: error Found incompatible module.
My package.json has dependencies and engines specified like this:
"dependencies": {
"autoprefixer": "^10.0.4",
"next": "^10.0.0",
"postcss": "^8.1.10",
"react": "16.13.1",
"react-dom": "16.13.1",
"tailwindcss": "^2.0.1"
},
"engines": {
"node": "12.18.3"
}
However, if I change my node version in package.json to 12.18.0 it seems to generate the build on netlify successfully, but in that case my local dev server has trouble starting.

I solved this with yarn config set ignore-engines true and then delete node-modules and reinstall. But its a hack.

Related

Failing to run an old repo on localhost

I'm trying to get the repo of a web page running on localhost, to later try to update some of the outdated dependencies. This web page runs on Next JS with Strapi version 3. After Strapi version 4 went live, the team had trouble updating the content on the page. I wanted to try and see how I could help, but have trouble even running the website locally. I'm a beginner and would be happy to learn about any suggestions.
Here is the folder structure:
backend
api: config, controllers, models, services folders for Strapi
components: layout, links, meta, sections folders for Vue JS
config: database.js, server.js
extensions: Includes JSON Web Token integration
public: uploads folder with icons and images used on the website
Also the following files:
.editorconfig
.eslintrc
.strapi-updater.json
package.json
yarn.lock
frontend
components: elements and sections folders with React JS
packages: eslint-config-ibmdotcom & stylelint-config-ibmdotcom
pages: _app.js, _document.js and [[...slug]].js to implement Next JS' optional catch all routes feature
patches: carbon ibmdotcom, carbon type and patch package patches
public: A few icons to be used on the website
styles: Includes global.scss
utils: api.js, media.js and types.js
Also the following files:
.eslintrc
.lintstagedrc
.stylelintrc
jsconfig.json
package.json
yarn.lock
node_modules
patches
Also the following files:
.yarnclean
package-lock.json
package.json
yarn.lock
Here are the dependencies:
In frontend/package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port 3200",
"build": "next build",
"start": "next start --port 3400",
"postinstall": "patch-package",
"debug": "NODE_OPTIONS='--inspect' next --port 3300"
},
"dependencies": {
"#carbon/ibmdotcom-react": "^1.14.0",
"#carbon/ibmdotcom-styles": "^1.14.0",
"#carbon/icons-react": "^10.22.0",
"#carbon/pictograms-react": "^11.0.0",
"carbon-components-react": "^7.26.0",
"formik": "^2.2.6",
"next": "10.0.5",
"next-seo": "^4.17.0",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-hook-form": "^6.14.2",
"sass": "^1.32.2",
"yup": "^0.32.8"
},
"devDependencies": {
"eslint": "^7.17.0"
}
}
In backend/package.json:
{
"name": "backend",
"private": true,
"version": "0.1.0",
"description": "A Strapi application",
"scripts": {
"develop": "strapi develop",
"start": "strapi start",
"build": "strapi build",
"strapi": "strapi"
},
"devDependencies": {},
"dependencies": {
"knex": "<0.20.0",
"pg": "^8.5.1",
"sqlite3": "latest",
"strapi": "3.4.3",
"strapi-admin": "3.4.3",
"strapi-connector-bookshelf": "3.4.3",
"strapi-plugin-content-manager": "3.4.3",
"strapi-plugin-content-type-builder": "3.4.3",
"strapi-plugin-email": "3.4.3",
"strapi-plugin-img": "^1.0.1",
"strapi-plugin-upload": "3.4.3",
"strapi-plugin-users-permissions": "3.4.3",
"strapi-utils": "3.4.3"
},
"author": {
"name": "A Strapi developer"
},
"strapi": {
"uuid": "c78c2abc-df48-4be1-8dcf-1266d358a02b"
},
"engines": {
"node": ">=10.16.0 <=14.x.x",
"npm": ">=6.0.0"
},
"license": "MIT"
}
Here is what I tried so far:
Ran npm install
Got the following error:
> website#1.0.0 postinstall
> patch-package
sh: patch-package: command not found
npm ERR! code 127
npm ERR! path /Users/sgt/Documents/Stroma/website
npm ERR! command failed
npm ERR! command sh -c patch-package
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sgt/.npm/_logs/2022-09-02T09_46_38_695Z-debug-0.log
Ran npm i patch-package
Got the following error:
added 50 packages, and audited 68 packages in 5s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
sgt#mb-sgt website % npm install
> website#1.0.0 postinstall
> patch-package
patch-package 6.4.7
Applying patches...
**ERROR** Failed to apply patch for package patch-package at path
node_modules/patch-package
This error was caused because patch-package has changed since you
made the patch file for it. This introduced conflicts with your patch,
just like a merge conflict in Git when separate incompatible changes are
made to the same piece of code.
Maybe this means your patch file is no longer necessary, in which case
hooray! Just delete it!
Otherwise, you need to generate a new patch file.
To generate a new one, just repeat the steps you made to generate the first
one.
i.e. manually make the appropriate file changes, then run
patch-package patch-package
Info:
Patch file: patches/patch-package+6.2.2.patch
Patch was made for version: 6.2.2
Installed version: 6.4.7
---
patch-package finished with 1 error(s).
up to date, audited 68 packages in 1s
6 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Ran npx patch-package patch-package --exclude 'nothing'
Got the following error:
patch-package 6.4.7
patch-package: you have both yarn.lock and package-lock.json
Defaulting to using npm
You can override this setting by passing --use-yarn or deleting
package-lock.json if you don't need it
• Creating temporary folder
• Installing patch-package#6.4.7 with npm
• Diffing your files with clean files
⁉️ Not creating patch file for package 'patch-package'
⁉️ There don't appear to be any changes.
What is the problem here? Does my method seem correct?
Happy to provide more information. Thanks for reading!

Cannot find module '#babel/preset-react'

I was trying to deploy my reactjs rails app on heroku.
Everything seems okay until I get this error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
remote: Error: Cannot find module '#babel/preset-react'
The app works fine in my localhost. I tried deleting my node_modules folder then running npm install but the error persisted(only when deploying at heroku).
My package.json:
{
"name": "App",
"private": true,
"dependencies": {
"#rails/webpacker": "5.4.0",
"#types/react": "^17.0.18",
"#types/react-dom": "^17.0.9",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react_ujs": "^2.6.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/plugin-syntax-jsx": "^7.14.5",
"#babel/plugin-transform-react-jsx": "^7.14.9",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"webpack-dev-server": "^3.11.2"
}
}
I managed to deploy it. I based my answer here: Why is devDependencies' pruning skipped even if NPM_CONFIG_PRODUCTION is true?
What I did was set:
NPM_CONFIG_PRODUCTION= false
YARN_PRODUCTION = false
YARN_CONFIG_PRODUCTION = false
I tested changing ENV values and this what worked for me.
This can set at heroku settings under config vars
Heroku defaults to NODE_END=production. How does this affect your build?
You have #babel/preset-react in devDependencies. When you do npm i (or yarn) to install packages with NODE_ENV=production, npm (or yarn) only installs dependencies (it wont install devDependencies).
To get around this, you can -
either override NODE_ENV. ($ NODE_ENV=development npm i)
Run npm i --only=dev before you build
To be on the safe side, revert the value on NODE_ENV to production when you run in production environment (Heroku in your case).

Try to fix this error "Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0."

I installed the latest version of node-sass in my react app but I got this error
"./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0."
My Json file :
{
"name": "new-project-to",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
},
I've checked some solutions on StackOverflow like npm install node-sass#4.14.1 but it didn't work?
What do you think guys?
Can you try editing the package.json to read
"dependencies": {
"node-sass": "^5.0.0",
...
},
...
and then run npm i
Hope that helps, but it may not if Armuth's solution didn't work...
Update your sass-loader like this: npm i sass-loader#latest
updating your react-scripts to the latest version should fix the problem.
updating sass using 'npm i sass-loader#latest'
and 'npm audit fix' worked for me.
You must restart npm start
wish you luck:)
This worked
To install the working node-sass version, you can use
npm uninstall node-sass
npm install node-sass#4.14.1
You can choose your version number based on the following table, based on the node version you are using which you can check by the command node --version
I hope it helps you

Unable to resolve "react" from "node_modules\react-native-scripts\build\bin\crna-entry.js"

I have a problem.
Expo building in error.
Unable to resolve "react" from "node_modules\react-native-scripts\build\bin\crna-entry.js"
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.9.3"
}
Thanks.
maybe you need clear react native packager
rm -rf node_modules // remove node_modules folder
npm cache clean
npm install
npm start
Open package.json on the root folder of your project and replace
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
with
"main": "./node_modules/expo/AppEntry.js",
Source:https://docs.expo.io/versions/latest/sdk/register-root-component#i-created-my-project-before-sdk-18

Bower install AngularJS failing

We use bower in our project to download front end related scripts. The project is hosted on Heroku. bower install is part of the build script. Everything was working fine until yesterday. Suddenly, bower is unable to install AngularJS.
Here's my bower.json
{
"name": "laravel.app",
"version": "0.0.1",
"dependencies": {
"jquery": "3.2.0",
"angular": "1.6.4",
"bootstrap": "3.3.7",
"angular-ui-router": "^0.4.2",
"angular-sanitize": "1.6.4",
"angular-route": "1.6.4",
"angular-toastr": "^2.1.1",
"components-font-awesome": "^4.7.0",
"angular-google-picker": "^0.2.2",
"foundation-datepicker": "^1.5.6",
"chart.js": "^2.7.0",
"ng-lodash": "^0.5.0",
"moment": "^2.18.1"
}
}
The error while building is
bower angular#~1.4 cached https://github.com/angular/bower-angular.git#1.4.14
bower angular#~1.4 validate 1.4.14 against https://github.com/angular/bower-angular.git#~1.4
bower ECONFLICT Unable to find suitable version for angular
This is breaking the build of new commits in Heroku as well. Why could this be happening? All was fine until yesterday.
The core of the error is this
ECONFLICT Unable to find suitable version for angular
When you specify dependencies for you app via Bower, some of the packages might rely on different versions of the same library.
bower install angular#latest --save -F

Resources