CODEWITHSUNDEEP
next.jseslintprettierprettier-eslintprettier-vscode
r121
r121

Reputation: 2738

ERROR: Invalid configuration for file "/Users/hello/Documents/projects/hello_world/.eslintrc.json"

I'm getting this error message when I run the npm run format command in the root directory of my nextjs project:

[error] Invalid configuration for file "/Users/hello/Documents/projects/hello_world/.eslintrc.json":
[error] require() of ES Module /Users/hello/Documents/projects/hello_world/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
[error] Instead change the require of /Users/hello/Documents/projects/hello_world/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

.eslintrc.json file:

{
  "extends": "next/core-web-vitals",
  "ignorePatterns": [".eslintrc.json"]
}

prettier.config.js file:

module.exports = {
    bracketSpacing: true,
    semi: true,
    trailingComma: "all",
    printWidth: 80,
    tabWidth: 2,
    plugins: [require("prettier-plugin-tailwindcss")],
};

package.json file:

{
  "name": "hello_world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "next lint",
    "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
    "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\""
  },
  "dependencies": {
    // some dependencies
  },
  "devDependencies": {
    "autoprefixer": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "postcss": "latest",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "latest"
  }
}

File/Folder Structure: enter image description here

Upvotes: 0

Views: 401

Answers (1)

Ramin Ghadiri
Ramin Ghadiri

Reputation: 11

The tailwind sorting plugin isn't compatible with prettier v3.0.0. Here's how to downgrade:

Prettier v2.8.8:

Yarn: yarn add [email protected] -D

NPM: npm install [email protected] --save-dev

prettier-plugin-tailwindcss v0.4.0:

Along with downgrading Prettier, it's also necessary to downgrade the tailwindcss plugin for Prettier.

Yarn: yarn add [email protected] -D

NPM: npm install [email protected] --save-dev

Await updates for compatibility fixes.

Upvotes: 1

Related Questions