I am getting below error from next js app suddenly. Any solution to fix that problem?

./pages/_app.tsx
Error: [BABEL] C:\Projects\skribeNew\app-web\pages\_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
    at verify (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:397612)
    at Function.explode (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:396515)
    at C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:49254
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:79767)
    at Generator.next (<anonymous>)
    at evaluateSync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:717268)
    at Function.sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:715284)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:80263)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:716601)

I changed the babel types version to previous one, But it did not work.

I am getting below error from next js app suddenly. Any solution to fix that problem?

./pages/_app.tsx
Error: [BABEL] C:\Projects\skribeNew\app-web\pages\_app.tsx: You gave us a visitor for the node type TSSatisfiesExpression but it's not a valid type
    at verify (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:397612)
    at Function.explode (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:396515)
    at C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:49254
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:79767)
    at Generator.next (<anonymous>)
    at evaluateSync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:717268)
    at Function.sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:715284)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1:80263)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\piled\babel\bundle.js:1910:716601)

I changed the babel types version to previous one, But it did not work.

• javascript
• reactjs
• next.js
• babeljs
• npm-package

• Try removing node_modules and yarn.lock (or package-lock.json) and yarn install (or npm install) again. – Cully Commented Oct 28, 2022 at 4:42
• Does this answer your question? You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type – Cully Commented Oct 28, 2022 at 4:43
• 2 No, it's not working. I tried it previously. – Md. Nizam Uddin Mahmud Commented Oct 28, 2022 at 5:00

4 Answers 4

It was because of an inpatible version issue for the npm package "@babel/plugin-transform-typescript". I fixed to the correct previous version in package.json file. Now it's working fine. Below is the code -

"devDependencies": {    
   "@babel/plugin-transform-typescript": "7.19.3",
}
"resolutions": {   
   "@babel/plugin-transform-typescript": "7.19.3"
}

npm i --save --legacy-peer-deps

To fix the Webpack build error caused by cssnano during CSS optimization, you can temporarily disable minimization.

Add this to your next.config.ts

webpack: (config) => {
config.optimization.minimize = false;
return config;
},

This resolved the issue for me, but it’s only a temporary fix.

I believe I was having the same issue you are currently experiencing not too long ago. My solution came from reorganizing the path that my node files were installed. I installed my node files to a greater hierarchy in the path then created a new folder down the line to hold my project files so that the files were already somewhere in the path. Alternatively, you could try installing globally with npm install -g yarn

Hope this helps! :)