Search code examples
javascriptreactjsnext.jsvercel

Deploying NextJs to Vercel - - error ESLint: Failed to load plugin 'compat'mpat' Require stack: - /vercel/path0/__placeholder__.js

I have deployed a NextJs to Vercel. Some pages work fine but others do not. I get the following error in log

- error ESLint: Failed to load plugin 'compat' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-compat' Require stack: - /vercel/path0/__placeholder__.js`

It works well on my localhost

Here is my package.json

"dependencies": {   
  "@types/node": "20.4.4",
  "@types/react": "18.2.15", 
  "@types/react-dom": "18.2.7", 
  "animate.css": "^4.1.1",   
  "aos": "^2.3.4",     
  "bootstrap": "^5.3.0",    
  "chartist": "^1.3.0", 
  "eslint": "8.45.0",
  "eslint-config-next": "13.4.12",   
  "eslint-plugin-compat": "^4.1.4",  
  "metismenu": "^3.0.7",
  "next": "13.4.12",   
  "owl.carousel": "^2.3.4", 
  "perfect-scrollbar": "^1.5.5",
  "react": "18.2.0",  
  "react-dom": "18.2.0", 
  "sass": "^1.64.1",   
  "sharp": "^0.32.4",  
  "typescript": "5.1.6"
}

I removed the content of ESlint gradually starting from removing only the plugin I also removed this // eslint-disable-line compat/compat from font-awsome conflict-detection.js

Solution

  • Your @types/node dependency is 20.4.4. Vercel only supports up to node version 18. Most likely, you are deploying with node 18. Thus, reduce @types/nodes version to 18