Enabling IE 11 Angular 12.2 crashing with postcss package issue - internet-explorer-11

I recently upgraded my project from Angular 11 to Angular 12.
Now, I am trying to enable IE 11. Did following:
Did the polyfills.ts file changes
pointed tsconfig.js to es5
removed not from IE 11 entry int .browserslistrc
Now I am not able to ng serve.
It crashes with following error:
Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.6, but
postcss-preset-env uses 7.0.39. Perhaps this is the source of the error below.
I tried following to resolve this:
deleted node_modules, package-lock.json and did npm i several times - didn't work, same issue on ng serve
upgraded npm 6 to npm 7, added .npmrc with legacy-peer-deps=true - didn't work, same issue
used yarn to install the packages - didn't work same issue
added postcss, postcss-preset-env packages directly to depedencies - didn't work, same issue
added postcss, postcss-preset-env packages directly to devDepedencies - didn't work, same issue
I am using node 14.
Only thing that works is if I put the not back in front of IE in .browserslistrc, which was the whole point of doing this exercise.
Does anyone have any clue on how I might solve this?

Related

Vue packages version mismatch issue to run vue based application

I am facing an issue to run a vue based application and the error message is as below when tried to run -
Vue packages version mismatch:
vue#2.6.10
vue-template-compiler#2.7.14
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
npm install worked properly.
Am I missing anything?

Error: Something went wrong installing the "sharp" module / Something went wrong installing the "sharp" module

I have a Gatsby project using Gatsby version 3.14.3. I need to install gatsby-plugin-image so I can have optimised images in my project. I added necessary configuration in gatsby-config:
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
and tried installing packages as well:
"gatsby-plugin-image": "1.14.1",
"gatsby-plugin-sharp": "3.14.3",
"gatsby-transformer-sharp": "3.14.0",
Note that I think these package versions are compatible with my current Gatsby version.
I get an error Error: Something went wrong installing the "sharp" module after running yarn run develop. I've tried multiple changes from other people's threads that had similar problem and couldn't make it work. I will look into updating my project to the latest Gatsby version, but it is a big project and I need to prioritise making the images work for now.
Terminal screenshot as reference:

Vercel Deployment: Internal Server Error when updating NPM Packages

I'm currently working on a NUXT 2.x App and I'm hosting the dev Project on Vercel. Now since the NPM packages are outdated and I want to remove some of the packages, the Deployed Version on Vercel throws an empty page with 500 error. If i stash the changes in package.json, everything works fine on the deployed version.
How can I update / remove NPM packages from my current Version and deploy it on Vercel?
Apparently, I had to downgrade the Firebase Version from 9.5 to 9.1, then it deployed just fine on Vercel.
I do recommend the usage of yarn upgrade-interactive --latest to get a list of all the package and the possible updates.
If you want to remove a specific one, go for yarn remove my-not-so-cool-package.
Think about bumping your Node.js version to 14 and try to build locally before pushing to Vercel.
Then, it comes down to reading out the differences that you may have between the versions of the packages and fix the breaking changes if any.
Can't help more without more info from your part.

Vue packages version mismatch on Nuxt.js

I'm trying to upgrade from Vue 2 version to vue 3, my project has Nuxt.js framework.
I put this command to upgrade : vue add vue-next, and upgrade has been successful. but when I try to execute project appear the next error :
Vue packages version mismatch:
- vue#3.0.7
- vue-server-renderer#2.6.12
This may cause things to work incorrectly. Make sure to use the same version for both.
I don't know how to resolve this problem.
That problem happened to me after an update. This is what worked for me.
delete the project's node_modules folder
delete the package-lock.json file
npm i
Solution found here https://github.com/nuxt/nuxt.js/issues/6823
see post from "daniplaninc"
The problem you are mentioning here comes from the fact that Nuxt 3 hasn't been released yet : it still doesn't support Vue 3, hence your application won't compile with vue 3...
The release is planned for Midsummer 2022 : https://v3.nuxtjs.org/community/roadmap/
I am waiting for this version too so I hope it will be released soon !

During "NPM I" facing error: no matching constructor for initialization of 'v8::String::Utf8Value'

I am trying to run npm i, but it gives me the error:
error: no matching constructor for initialization of 'v8::String::Utf8Value'
I got the same problem today when I picked up a project that was working 5 months ago.
The whole game is to keep your dependencies updated in package.json.
The problem happens when there is some version mismatch in your components because something has updated behind the scenes. I suggest you go one by one and start installing latest stable versions of all dependencies. I've just been able to solve the problem with my angular project.
Every time you install a latest version of the dependency, it tells you what else it needs and you go install that. You'll realise that you don't have to install everything and half of it gets updated automatically.
To solve this issue, I just updated the npm version I was using to v10.16.0, then launched the npm install command afterwards; and the error was no more.