eslint-config-prettier: eslint --fix runs " Cannot find module 'eslint-config-prettier/vue' " issue

got error on my laravel-vue project

Error:

Error: Cannot find module 'eslint-config-prettier/vue'
Referenced from: C:\xampp\htdocs\numcell-generator\.eslintrc.json
    at ModuleResolver.resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\util\module-resolver.js:72:19)
    at resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:484:28)
    at load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:556:26)
    at configExtends.reduceRight (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:430:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:408:26)
    at loadFromDisk (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:528:22)
    at Object.load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:564:20)
    at Config.getLocalConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:227:44)
    at Config.getConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:179:43)

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier",
        "prettier/vue"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": ["vue", "prettier"],
    "rules": {
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "no-console": "off",
        "no-empty": 0,
        "no-unused-vars": 0,
        "no-undef": 0,
        "no-mixed-spaces-and-tabs": 0
    }
}

package.json

{
    "private": true,
    "scripts": {
        "eslint-check": "eslint --print-config . | eslint-config-prettier-check",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "cross-env": "^5.1",
        "eslint": "^5.13.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-node": "^8.0.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^5.1.0",
        "laravel-mix": "^4.0.14",
        "lodash": "^4.17.5",
        "prettier": "1.16.1",
        "prettier-eslint": "^8.8.2",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.17.0",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.3",
        "vue-template-compiler": "^2.6.3"
    },
    "dependencies": {
        "@vue/eslint-config-prettier": "^4.0.1",
        "ag-grid-community": "^20.0.0",
        "ag-grid-vue": "^20.0.0",
        "moment": "^2.24.0",
        "sweetalert": "^2.1.2",
        "vee-validate": "^2.1.7",
        "vue-infinite-loading": "^2.4.3",
        "vue-multiselect": "^2.1.3",
        "vue-property-decorator": "^7.3.0",
        "vue-router": "^3.0.2",
        "vue-server-renderer": "^2.6.3",
        "vuetify": "^1.5.0",
        "vuex": "^3.1.0"
    },
    "eslintConfig": {
        "root": true,
        "extends": [
            "plugin:vue/essential",
            "plugin:prettier/recommended",
            "eslint:recommended"
        ]
    }
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 15 (9 by maintainers)

Most upvoted comments

so we have to type node_modules/.bin/eslint --fix resources/js/foo.js instead of type eslint --fix resources/js/app.js directly?

Yes, you have installed ESLint and all its plugins locally. When you run just eslint foo.js on the command line, you run another ESLint that you must have installed globally at some point.

Quoting https://eslint.org/docs/user-guide/configuring:

Note: Due to the behavior of Node’s require function, a globally-installed instance of ESLint can only use globally-installed ESLint plugins, and locally-installed version can only use locally-installed plugins. Mixing local and global plugins is not supported.

This is a common mistake when using ESLint, and has nothing to do with eslint-config-prettier.

Here are a couple of ways of running the local ESLint:

node_modules/.bin/eslint foo.js
npx eslint foo.js
Add { "scripts": { "eslint": "eslint" } } to package.json and npm run eslint -- foo.js. (Alternatively: { "scripts": { "eslint": "eslint whatever" } } and just npm run eslint).
Learn about $PATH and do clever stuff to it

do you have an idea to fix it?

Yes, remove the quotes rule from your .eslintrc.js – it’s not needed. Also, remove linebreak-style and use Prettier’s end-of-line instead.

lydell on Feb 23, 2019

Some other tips:

Always add steps to reproduce from the beginning to avoid wasting people’s time 😃
You can select text in most terminals using the mouse and then pressing ctrl+shift+c or cmd+shift+c (or right-click and select Copy) to copy output as text.

lydell on Feb 23, 2019