Cannot find module 'eslint-plugin-prettier'

[dapperdandev]

It appears that eslint thinks the "prettier" plugin is related to eslint-plugin-prettier rather than eslint-config-prettier.

Cannot find module 'eslint-plugin-prettier'

// .eslintrc.json
{
    "root": true,
    "plugins": ["@nrwl/nx", "prettier"],
    "overrides": [
        {
            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
            "rules": {
                "object-curly-newline": ["error", "always"],
                "prettier/prettier": "warn",
                "@angular-eslint/no-input-rename": "off",
                "@nrwl/nx/enforce-module-boundaries": [
                    "error",
                    {
                        "enforceBuildableLibDependency": true,
                        "allow": [],
                        "depConstraints": [
                            {
                                "sourceTag": "scope:shared",
                                "onlyDependOnLibsWithTags": ["scope:shared"]
                            },
                            {
                                "sourceTag": "scope:user",
                                "onlyDependOnLibsWithTags": ["scope:shared", "scope:user"]
                            },
                            {
                                "sourceTag": "scope:admin",
                                "onlyDependOnLibsWithTags": ["scope:shared", "scope:admin"]
                            },
                            {
                                "sourceTag": "scope:feature",
                                "onlyDependOnLibsWithTags": [
                                    "scope:feature",
                                    "scope:data-access",
                                    "scope:ui",
                                    "scope:util"
                                ]
                            },
                            {
                                "sourceTag": "scope:data-access",
                                "onlyDependOnLibsWithTags": ["scope:data-access", "scope:ui", "scope:util"]
                            },
                            {
                                "sourceTag": "scope:ui",
                                "onlyDependOnLibsWithTags": ["scope:ui", "scope:util"]
                            },
                            {
                                "sourceTag": "scope:util",
                                "onlyDependOnLibsWithTags": ["scope:util"]
                            }
                        ]
                    }
                ],
                "@typescript-eslint/no-inferrable-types": "off"
            }
        },
        {
            "files": ["*.ts", "*.tsx"],
            "extends": ["plugin:@nrwl/nx/typescript", "prettier"],
            "rules": {
                "@typescript-eslint/naming-convention": [
                    "error",
                    {
                        "selector": "variable",
                        "format": ["camelCase", "UPPER_CASE", "PascalCase"]
                    }
                ],
                "object-curly-spacing": ["warn", "always"],
                "@typescript-eslint/no-empty-function": ["off"],
                "@typescript-eslint/no-inferrable-types": "off",
                "no-prototype-builtins": "off"
            }
        },
        {
            "files": ["*.js", "*.jsx"],
            "extends": ["plugin:@nrwl/nx/javascript"],
            "rules": {}
        }
    ]
}

// package.json

"scripts": {
        "lint": "nx workspace-lint && ng lint",
        ...
}
...
"dependencies": {
        "@angular/animations": "12.0.0",
        "@angular/cdk": "^11.2.1",
        "@angular/common": "12.0.0",
        "@angular/compiler": "12.0.0",
        "@angular/core": "12.0.0",
        "@angular/forms": "12.0.0",
        "@angular/google-maps": "^11.2.1",
        "@angular/platform-browser": "12.0.0",
        "@angular/platform-browser-dynamic": "12.0.0",
        "@angular/router": "12.0.0",
        "@asymmetrik/ngx-leaflet": "^8.1.0",
        "@auth0/auth0-angular": "^1.5.1",
        "@microsoft/applicationinsights-web": "^2.6.3",
        "@nebular/auth": "^8.0.0",
        "@nebular/eva-icons": "^8.0.0",
        "@nebular/security": "^8.0.0",
        "@nebular/theme": "^8.0.0",
        "@ngrx/router-store": "^12.2.0",
        "@ngrx/store": "^12.2.0",
        "@ngrx/store-devtools": "^12.2.0",
        "@ngx-pwa/local-storage": "^12.0.0",
        "@nrwl/angular": "12.5.1",
        "@reduxjs/toolkit": "^1.6.0",
        "@swimlane/ngx-charts": "^17.0.0",
        "ag-grid-angular": "^25.3.0",
        "ag-grid-community": "^25.3.0",
        "angular2-chartjs": "^0.5.1",
        "bootstrap": "^4.6.0",
        "chart.js": "^3.5.1",
        "ckeditor": "^4.12.1",
        "eva-icons": "^1.1.3",
        "font-awesome": "^4.7.0",
        "ionicons": "^2.0.1",
        "leaflet": "^1.7.1",
        "luxon": "^2.0.2",
        "nebular-icons": "^1.1.0",
        "ng2-ckeditor": "^1.3.3",
        "ng2-completer": "^9.0.1",
        "ng2-smart-table": "^1.7.2",
        "ngrx-rtk-query": "^2.2.0",
        "ngrx-store-persist": "^1.0.20",
        "odata-query": "^6.7.0",
        "pace-js": "^1.2.3",
        "resize-observer-polyfill": "^1.5.1",
        "roboto-fontface": "^0.10.0",
        "rxjs": "~6.6.3",
        "socicon": "^3.0.5",
        "tinymce": "^5.8.1",
        "tslib": "^2.0.0",
        "typeface-exo": "^1.1.13",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "^12.0.4",
        "@angular-eslint/eslint-plugin": "12.0.0",
        "@angular-eslint/eslint-plugin-template": "12.0.0",
        "@angular-eslint/template-parser": "12.0.0",
        "@angular/cli": "12.0.0",
        "@angular/compiler-cli": "12.0.0",
        "@angular/language-service": "12.0.0",
        "@ngneat/spectator": "^7.2.0",
        "@nrwl/cli": "12.5.1",
        "@nrwl/cypress": "12.5.1",
        "@nrwl/devkit": "12.5.1",
        "@nrwl/eslint-plugin-nx": "12.5.1",
        "@nrwl/jest": "12.5.1",
        "@nrwl/linter": "12.5.1",
        "@nrwl/storybook": "12.5.1",
        "@nrwl/tao": "12.5.1",
        "@nrwl/workspace": "12.5.1",
        "@openapitools/openapi-generator-cli": "^2.3.3",
        "@storybook/addon-essentials": "~6.3.2",
        "@storybook/angular": "~6.3.2",
        "@storybook/builder-webpack5": "~6.3.2",
        "@storybook/manager-webpack5": "~6.3.2",
        "@types/jest": "26.0.8",
        "@types/js-cookie": "^2.2.7",
        "@types/luxon": "^2.0.0",
        "@types/node": "14.14.33",
        "@typescript-eslint/eslint-plugin": "4.19.0",
        "@typescript-eslint/parser": "^4.19.0",
        "css-loader": "^6.2.0",
        "cypress": "^6.0.1",
        "dotenv": "8.2.0",
        "dotenv-webpack": "^7.0.3",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-import-resolver-typescript": "^2.4.0",
        "eslint-plugin-cypress": "^2.11.3",
        "eslint-plugin-import": "^2.24.2",
        "express-jwt": "^6.0.0",
        "html-webpack-plugin": "^5.3.1",
        "husky": "^7.0.0",
        "isomorphic-fetch": "^3.0.0",
        "jest": "27.0.3",
        "jest-fetch-mock": "^3.0.3",
        "jest-preset-angular": "9.0.3",
        "ng-packagr": "^12.0.0",
        "prettier": "^2.3.1",
        "ts-jest": "27.0.3",
        "typescript": "4.2.4"
    }
...

[lydell]

Hi! If you want to use eslint-plugin-prettier you need to install it.

There might be some confusing docs somewhere – how come you are opening an issue in this repo?

[dapperdandev]

Hi! If you want to use eslint-plugin-prettier you need to install it.

There might be some confusing docs somewhere – how come you are opening an issue in this repo?

@lydell Therein lies the problem: Following the installation instructions for eslint-config-prettier is producing the error for eslint-plugin-prettier. As you can see, I'm not referencing eslint-plugin-prettier in my package.json or eslintrc.json. The error only started after I installed eslint-config-prettier and added prettier to my plugins/extensions. Removing it resolves the error, but I DO want to use eslint-config-prettier as it's recommended with nx/nrwl over eslint-plugin-prettier.

Is there a conflict between eslint, eslint-plugin-prettier, and eslint-config-prettier?

[lydell]

As you can see, I'm not referencing eslint-plugin-prettier in my package.json or eslintrc.json.

You are referencing eslint-plugin-prettier in eslintrc.json, but not in package.json – that’s the problem.

If you have plugins: ["foo"] in your eslintrc, ESLint will look for a package called eslint-plugin-foo (there are a few more naming conventions, see https://eslint.org/docs/developer-guide/working-with-plugins).

If you have rules: { "foo/bar": "error" } in your eslintrc, it means that the bar rule comes from the foo plugin. This requires "foo" to be mentioned in plugins.

You have "plugins": ["@nrwl/nx", "prettier"], and "prettier/prettier": "warn", so it looks like you intended to use eslint-plugin-prettier. But you don’t have eslint-plugin-prettier in package.json so ESLint can’t find it.

In a different place of your eslintrc you have "extends": ["plugin:@nrwl/nx/typescript", "prettier"],. That’s referring to eslint-config-prettier, because in extends ESLint automatically adds eslint-config- to names as needed. And you have eslint-config-prettier in package.json which is correct.

So:

• Add eslint-plugin-prettier to package.json if you intend to use it.
• Otherwise remove "prettier" from plugins and remove the prettier/prettier rule.
• Also, it looks like you only extend eslint-config-prettier for .ts and .tsx files. If you run Prettier on .js files as well, move it so you don’t get conflicts in .js files.
• Also, you seem to have enabled "object-curly-newline": ["error", "always"], which isn’t compatible with Prettier (this config turns that rule off). You can use the CLI helper tool to find such problems.

the error only started after I installed eslint-config-prettier and added prettier to my plugins/extensions

Why did you add prettier to plugins? Are there some docs somewhere saying to do that?

[dapperdandev]

@lydell Thank you. Looks like user error on my part. I must have misread the documentation. I appreciate the thorough replies.