Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build failing at plugin:vue/no-layout-rules #70

Closed
frozonfreak opened this issue Jan 14, 2019 · 19 comments
Closed

Build failing at plugin:vue/no-layout-rules #70

frozonfreak opened this issue Jan 14, 2019 · 19 comments

Comments

@frozonfreak
Copy link

While trying to compile my project, I get the following error

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from Referenced from: /node_modules/eslint-config-prettier/vue.js

project build from few days back works fine. Its the latest build which is failing. Any suggestions

@lydell
Copy link
Member

lydell commented Jan 14, 2019

cc @michalsnik

@lydell
Copy link
Member

lydell commented Jan 14, 2019

I tried to reproduce this.

.eslintrc:

{
  "extends": [
    "plugin:vue/recommended",
    "prettier/vue"
  ]
}

package.json

{
  "private": true,
  "devDependencies": {
    "eslint": "5.12.0",
    "eslint-config-prettier": "3.4.0",
    "eslint-plugin-vue": "5.1.0"
  }
}

test.vue:

<template>
  <div v-if="!isFirst" class="container">content</div>
</template>

If I comment out "prettier/vue", npm test gives lint errors as expected:

/home/lydell/stuff/eslint-vue/test.vue
  2:24  warning  Attribute "class" should be on a new line                                      vue/max-attributes-per-line
  2:42  warning  Expected 1 line break after opening tag (`<div>`), but no line breaks found    vue/singleline-html-element-content-newline
  2:49  warning  Expected 1 line break before closing tag (`</div>`), but no line breaks found  vue/singleline-html-element-content-newline

✖ 3 problems (0 errors, 3 warnings)
  0 errors and 3 warnings potentially fixable with the `--fix` option.

And with "prettier/vue" there are no errors as expected.

Are you using ESLint via some other tool? Maybe the error only happens when not using the eslint CLI directly. Can you share exact steps to reproduce?

@frozonfreak
Copy link
Author

.eslintrc

module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'script',
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#bulb-rules
    'plugin:vue/recommended',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard',
    // https://github.com/prettier/eslint-config-prettier
    'prettier',
    'prettier/standard',
    'prettier/vue',
  ],
  rules: {
    // Only allow debugger in development
    'no-debugger': process.env.PRE_COMMIT ? 'error' : 'off',
    // Only allow `console.log` in development
    'no-console': process.env.PRE_COMMIT
      ? ['error', { allow: ['warn', 'error'] }]
      : 'off',
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        ignores: [
          'component',
          'template',
          'transition',
          'transition-group',
          'keep-alive',
          'slot',
        ],
      },
    ],
  },
  overrides: [
    {
      files: ['src/**/*', 'tests/unit/**/*', 'tests/e2e/**/*'],
      excludedFiles: 'app.config.js',
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
      },
      env: {
        browser: true,
      },
    },
    {
      files: ['**/*.unit.js'],
      parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
      },
      env: { jest: true },
      globals: {
        mount: false,
        shallowMount: false,
        shallowMountView: false,
        createComponentMocks: false,
        createModuleStore: false,
      },
    },
  ],
}

package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "dev:e2e": "vue-cli-service test:e2e --mode=development",
    "build": "vue-cli-service build --modern",
    "build:ci": "yarn build --report",
    "lint:eslint": "eslint --fix",
    "lint:stylelint": "stylelint --fix",
    "lint:markdownlint": "markdownlint",
    "lint:prettier": "prettier --write --loglevel warn",
    "lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\"",
    "lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
    "lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
    "lint": "run-s lint:all:*",
    "test:unit": "vue-cli-service test:unit",
    "test:unit:file": "yarn test:unit --bail --findRelatedTests",
    "test:unit:watch": "yarn test:unit --watch --notify --notifyMode change",
    "test:unit:ci": "yarn test:unit --coverage --ci",
    "test:e2e": "vue-cli-service test:e2e --headless",
    "test": "run-s test:unit test:e2e",
    "test:ci": "run-s test:unit:ci test:e2e",
    "new": "hygen new",
    "docs": "vuepress dev"
  },
  "gitHooks": {
    "pre-commit": "cross-env PRE_COMMIT=true lint-staged"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.12",
    "@fortawesome/free-solid-svg-icons": "5.6.3",
    "@fortawesome/vue-fontawesome": "0.1.4",
    "axios": "0.18.0",
    "lodash": "4.17.11",
    "normalize.css": "8.0.1",
    "nprogress": "0.2.0",
    "vue": "2.5.21",
    "vue-meta": "1.5.8",
    "vue-router": "3.0.2",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.2.x",
    "@vue/cli-plugin-e2e-cypress": "3.2.x",
    "@vue/cli-plugin-eslint": "3.2.x",
    "@vue/cli-plugin-unit-jest": "3.2.x",
    "@vue/cli-service": "3.2.x",
    "@vue/eslint-config-prettier": "4.0.x",
    "@vue/eslint-config-standard": "4.0.x",
    "@vue/test-utils": "1.0.0-beta.28",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.x",
    "cross-env": "5.2.x",
    "eslint-plugin-vue": "5.0.x",
    "express": "4.16.x",
    "hygen": "2.0.4",
    "imagemin-lint-staged": "0.3.x",
    "lint-staged": "8.1.x",
    "markdownlint-cli": "0.13.x",
    "node-sass": "4.11.x",
    "npm-run-all": "4.1.x",
    "prettier": "prettier/prettier#3de36e3",
    "sass-loader": "7.1.x",
    "stylelint": "9.9.x",
    "stylelint-config-css-modules": "1.3.x",
    "stylelint-config-prettier": "4.0.x",
    "stylelint-config-recess-order": "2.0.x",
    "stylelint-config-standard": "18.2.x",
    "stylelint-scss": "3.4.x",
    "vue-template-compiler": "2.5.21",
    "vuepress": "0.14.x"
  },
  "engines": {
    "node": ">=8.9.0",
    "yarn": ">=1.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Install https://github.com/chrisvfritz/vue-enterprise-boilerplate and build.

@lydell
Copy link
Member

lydell commented Jan 14, 2019

Thanks!

Can you make a smaller example?

yarn has been running for several minutes, and it's still not done installing.

@lydell
Copy link
Member

lydell commented Jan 14, 2019

After 7 minutes it finally finished. I ran yarn build and yarn lint they succeeded.

~/stuff/vue-enterprise-boilerplate master  
❯ yarn build
yarn run v1.12.3
$ vue-cli-service build --modern

⠋  Building legacy bundle for production...

 DONE  Compiled successfully in 16698ms                                        7:47:52 PM

  File                                      Size             Gzipped

  dist/js/chunk-vendors-legacy.f2b23f3e.    203.30 kb        70.46 kb
  js
  dist/js/app-legacy.3f80a419.js            18.20 kb         6.13 kb
  dist/js/chunk-6fa99d8c-legacy.8992c5eb    1.89 kb          0.92 kb
  .js
  dist/js/chunk-2d0ae528-legacy.68120eec    0.73 kb          0.48 kb
  .js
  dist/js/chunk-42e69ba1-legacy.fcb1bf7c    0.64 kb          0.45 kb
  .js
  dist/css/app.08d8d6d4.css                 4.48 kb          1.04 kb
  dist/css/chunk-vendors.8ffab17e.css       3.10 kb          1.12 kb
  dist/css/chunk-6fa99d8c.4ba7590a.css      0.09 kb          0.11 kb

  Images and other types of assets omitted.


⠙  Building modern bundle for production...

 DONE  Compiled successfully in 7843ms                                         7:48:00 PM

  File                                    Size              Gzipped

  dist/js/chunk-vendors.f2b23f3e.js       203.30 kb         70.45 kb
  dist/js/app.0c9ecdde.js                 18.18 kb          6.12 kb
  dist/js/chunk-6fa99d8c.8992c5eb.js      1.88 kb           0.91 kb
  dist/js/chunk-2d0ae528.68120eec.js      0.72 kb           0.48 kb
  dist/js/chunk-42e69ba1.fcb1bf7c.js      0.63 kb           0.44 kb
  dist/css/app.08d8d6d4.css               4.48 kb           1.04 kb
  dist/css/chunk-vendors.8ffab17e.css     3.10 kb           1.12 kb
  dist/css/chunk-6fa99d8c.4ba7590a.css    0.09 kb           0.11 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
                                  
Done in 27.68s.

~/stuff/vue-enterprise-boilerplate master  
❯ yarn lint
yarn run v1.12.3
$ run-s lint:all:*
$ yarn lint:eslint --ext .js,.vue .
$ eslint --fix --ext .js,.vue .
$ yarn lint:stylelint "src/**/*.{vue,scss}"
$ stylelint --fix 'src/**/*.{vue,scss}'
$ yarn lint:markdownlint "docs/*.md" "*.md"
$ markdownlint 'docs/*.md' '*.md'
$ yarn lint:prettier "**/*.{js,json,css,scss,vue,html,md}"
$ prettier --write --loglevel warn '**/*.{js,json,css,scss,vue,html,md}'
Done in 27.76s.

@ryuuji3
Copy link

ryuuji3 commented Jan 14, 2019

I had this same issue. I downgraded to 4.0.0 and everything worked fine. But 4.0.1 fails to lint.
I can't share all my dependencies, but here's my dev dependencies:

{
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-plugin-unit-jest": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "decamelize": "^2.0.0",
    "lint-staged": "^8.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.0.1",
    "style-resources-loader": "^1.2.1",
    "vue-cli-plugin-i18n": "^0.5.1",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-template-compiler": "^2.5.21"
  }
}

The exception:

 ERROR  Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/eslint-config-prettier/vue.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/@vue/eslint-config-prettier/index.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/.eslintrc.js
Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/eslint-config-prettier/vue.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/node_modules/@vue/eslint-config-prettier/index.js
Referenced from: /Users/ryuuji3/Projects/[redacted]/.eslintrc.js
    at configMissingError (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:187:19)
    at loadConfigFile (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:213:27)
    at loadFromDisk (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:495:18)
    at load (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:559:20)
    at configExtends.reduceRight (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:425:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:403:26)
    at loadFromDisk (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:523:22)
    at load (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:559:20)
    at configExtends.reduceRight (/Users/ryuuji3/Projects/[redacted]/node_modules/eslint/lib/config/config-file.js:425:36)

@lydell
Copy link
Member

lydell commented Jan 14, 2019

4.0.0 and 4.0.1 of what package?

@ryuuji3
Copy link

ryuuji3 commented Jan 14, 2019

4.0.0 and 4.0.1 of what package?

Sorry! I meant that I had to downgrade "@vue/eslint-config-prettier" which fails to lint on 4.0.1, but works fine on 4.0.0

@lydell
Copy link
Member

lydell commented Jan 14, 2019

Both 4.0.0 and 4.0.1 of @vue/eslint-config-prettier depend on eslint-config-prettier@^3.3.0, so 4.0.1 should be as working/broken as 4.0.0. It depends on which eslint-config-prettier version is in your package-lock.json/yarn.lock.

@lydell
Copy link
Member

lydell commented Jan 14, 2019

@frozofreak I just realized that chrisvfritz/vue-enterprise-boilerplate contains eslint-config-prettier@3.3.0 in its yarn.lock, while the it’s 3.4.0 that introduced the problem you have:

https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/7abe60fa96d47abc74024a3ea040f8d9087d2a23/yarn.lock#L5375-L5380

Could you (or @ryuuji3) please make a minimal example repo where we can debug? I don’t use Vue myself, so I don’t feel like spending so much time on it right now.

@liaoyinglong
Copy link

update eslint-plugin-vue to ^5.0.0 , solved for me

@lydell
Copy link
Member

lydell commented Jan 15, 2019

Thanks, @liaoyinglong. I now realize that 3.4.0 should have been released as 4.0.0 as this seems to be a breaking change :(

@ldrick
Copy link

ldrick commented Jan 16, 2019

I get the same error, and did:

yarn why eslint-plugin-vue
yarn why v1.13.0
[1/4] Why do we have the module "eslint-plugin-vue"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "eslint-plugin-vue@4.7.1"
info Reasons this module exists
   - "@vue#cli-plugin-eslint" depends on it
   - Hoisted from "@vue#cli-plugin-eslint#eslint-plugin-vue"
Done in 1.53s.

Which leads to the question: Might it be correct to have eslint-plugin-vue referenced in peerDependencies and not only in devDependencies?

@lydell
Copy link
Member

lydell commented Jan 16, 2019

Which leads to the question: Might it be correct to have eslint-plugin-vue referenced in peerDependencies and not only in devDependencies?

Yes, that would emit a warning if the wrong version of eslint-plugin-vue is installed. But unfortunately there are a lot of users of this package who don't use vue and they would get annoying warnings.

@lydell
Copy link
Member

lydell commented Jan 16, 2019

I think I'll have to revert #69 and publish a new version.

@ldrick
Copy link

ldrick commented Jan 16, 2019

@lydell Would it be possible to somehow make it conditional? Like often used in vue-cli:
Load the package, if dependency is installed? And document it, that user can install eslint-plugin-vue and it will be used?

@lydell
Copy link
Member

lydell commented Jan 16, 2019

@ldrick I don't think so, but I'm open for suggestions!

@lydell
Copy link
Member

lydell commented Jan 16, 2019

Maybe we should revert that PR anyway, because sometimes there are layout rules that don't conflict with Prettier but rather complement it.

@lydell lydell closed this as completed in 6c4d1f0 Jan 16, 2019
@lydell
Copy link
Member

lydell commented Jan 16, 2019

I’ve published 3.5.0 that reverts back to how 3.3.0 worked. Update all the things in your repos and things should work again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants