CODEWITHSUNDEEP
javascriptreactjsnext.jsbabeljsnpm-package
Md. Nizam Uddin Mahmud
Md. Nizam Uddin Mahmud

Reputation: 201

Build failed because of webpack errors

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\compiled\babel\bundle.js:1910:397612)
    at Function.explode (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:396515)
    at C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:49254
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:79767)
    at Generator.next (<anonymous>)
    at evaluateSync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:717268)
    at Function.sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:715284)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1:80263)
    at sync (C:\Projects\skribeNew\app-web\node_modules\next\dist\compiled\babel\bundle.js:1910:716601)

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

Upvotes: 5

Views: 21408

Answers (4)

ANKIT NAYAK
ANKIT NAYAK

Reputation: 186

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.

Upvotes: 0

Md. Nizam Uddin Mahmud
Md. Nizam Uddin Mahmud

Reputation: 201

It was because of an incompatible 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"
}

Upvotes: 5

Yasir
Yasir

Reputation: 585

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

Upvotes: 0

Finnalandem
Finnalandem

Reputation: 1

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! :)

Upvotes: -1

Related Questions