Bug in template-curly-spacing rule

[tmcdos]

Tell us about your environment
This is a standard Vue project created by Vue-CLI v4.2.0

• ESLint Version: 6.8.0
• Node Version: 13.13.0
• npm Version: 6.13.6

What parser (default, Babel-ESLint, etc.) are you using?
Babel-ESLint

Please show your full configuration:

Configuration

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

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    '@vue/standard',
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi': 'off',
    'brace-style': ['error', 'allman'],
    'object-curly-newline': ["error", {
        "ObjectExpression": { "multiline": true, "minProperties": 2, "consistent": true },
        "ObjectPattern": { "multiline": true },
        "ImportDeclaration": "never",
        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }],
    "object-property-newline": ["error", {"allowAllPropertiesOnSameLine": false}],
    "comma-dangle": ["error", {
        "arrays": "only-multiline",
        "objects": "only-multiline",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }],
    'no-trailing-spaces': 'off',
    'quotes': 'off',
    'one-var': ['error', {'uninitialized': 'always', 'initialized': 'never'}],
    'no-v-html': 'off',
    "vue/max-attributes-per-line": ["error", {
      "singleline": 10,
      "multiline": {
        "max": 6,
        "allowFirstLine": true
      }
    }],
    "vue/order-in-components": ["error",
      {
        "order": [
          "el",
          "name",
          "parent",
          "functional",
          ["delimiters", "comments"],
          ["components", "directives"],
          "extends",
          "mixins",
          "inheritAttrs",
          "model",
          ["props", "propsData"],
          "data",
          "filters",
          "computed",
          "watch",
          "LIFECYCLE_HOOKS",
          "methods",
          ["template", "render"],
          "renderError"
        ]
      }
    ],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/html-closing-bracket-spacing': 'off',
  }
} 

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

<template>
  <div>test</div>
</template>

<script>
export default
{
  name: 'Application',
  data ()
  {
    return {
      box: null,
    };
  },
  created ()
  {
    this.box = `<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      <g fill="#1976D2" stroke="none" stroke-width="1">
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(0 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(30 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(60 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(90 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(120 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(150 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(180 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(210 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(240 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(270 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(300 50 50) translate(0 -30)"/>
      <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(330 50 50) translate(0 -30)"/>
      </g>
      </svg>`;    
  }
}
</script> 

node ./node_modules/eslint/bin/eslint.js --ext .js,.vue src

What did you expect to happen?
There should be no linting errors.

What actually happened? Please include the actual, raw output from ESLint.

Z:\1>npm run build

> composite@1.0.6 build Z:\1
> node --preserve-symlinks --preserve-symlinks-main ./node_modules/@vue/cli-serv
ice/bin/vue-cli-service.js build

-  Building for production...

 ERROR  Failed to compile with 1 errors                                 17:11:23

 error  in ./src/App.vue

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'range' of null
Occurred while linting Z:\1\src\App.vue:11
    at SourceCode.getTokenBefore (Z:\1\node_modules\eslint\lib\source-code\token
-store\index.js:298:18)
    at checkSpacingBefore (Z:\1\node_modules\eslint\lib\rules\template-curly-spa
cing.js:60:42)
    at TemplateElement (Z:\1\node_modules\eslint\lib\rules\template-curly-spacin
g.js:119:17)
    at Z:\1\node_modules\eslint\lib\linter\safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (Z:\1\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (Z:\1\node_modules\eslint\lib\linter\nod
e-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (Z:\1\node_modules\eslint\lib\linter\no
de-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (Z:\1\node_modules\eslint\lib\linter\node-ev
ent-generator.js:297:14)
    at CodePathAnalyzer.enterNode (Z:\1\node_modules\eslint\lib\linter\code-path
-analysis\code-path-analyzer.js:634:23)
    at Z:\1\node_modules\eslint\lib\linter\linter.js:936:32
    at Array.forEach (<anonymous>)
    at runRules (Z:\1\node_modules\eslint\lib\linter\linter.js:931:15)
    at Linter._verifyWithoutProcessors (Z:\1\node_modules\eslint\lib\linter\lint
er.js:1157:31)
    at Z:\1\node_modules\eslint\lib\linter\linter.js:1281:29
    at Array.map (<anonymous>)

 @ ./src/main.js 5:0-28 7:17-20
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! composite@1.0.6 build: `node --preserve-symlinks --preserve-symlinks-ma
in ./node_modules/@vue/cli-service/bin/vue-cli-service.js build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the composite@1.0.6 build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     z:\temp\npm\_logs\2020-05-02T14_11_23_489Z-debug.log

Z:\1>

Are you willing to submit a pull request to fix this bug?

This issue seems to occur when JavaScript template strings (those enclosed in backticks) do not contain any interpolations.
The fix is to add if(!token) return; on line 118 in eslint/lib/rules/template-curly-spacing.js

[anikethsaha]

I didnt notice interpolation in the code given (let me know if I missed)

also, if you meant empty interpolation

const a = ` ${} `

it is an invalid code. it cant be empty.

The fix is to add if(!token) return; on line 118 in eslint/lib/rules/template-curly-spacing.js

i think it cant be undefined if there is a valid template literal. also, adding this check can be fine too but the thing is it cant be undefined if there is a TemplateElement node.

let me know if I missed something 👍

[tmcdos]

I didnt notice interpolation in the code given (let me know if I missed)

This is exactly my point - that there is NO interpolation in the given code.
If you do not believe me that the token can be undefined - then please try

npm install
npm run build

with the following simple project
test.zip

[anikethsaha]

can you try this ?
there might be some parsing issue.

[tmcdos]

I tried both v7.0.0 and v6.0.5 of Vue-ESLint-parser - no difference, the error is still there. I will post the issue on their tracker, too.

[yeonjuan]

Hi @tmcdos 😀
It is a bug in babel-eslint. you can find details here - babel/babel#10904

[anikethsaha]

sorry for pointing to wrong repo .

[tmcdos]

@yeonjuan Are you certain that Bable is the cause of the issue ? I have suspicion that getFirstIndex() and/or getLastIndex() functions in eslint/lib/source-code/token-store/utils.js are producing wrong result (e.g. last index being smaller than first index). Can you confirm or disprove my suspicion ?

[yeonjuan]

Hi 😁 @tmcdos

Are you certain that Bable is the cause of the issue ?

Well .. I do not well know about the babel-eslint project at the code levels so I don't know the actual reason. but It seems fine in eslint with default parser - online demo
And there is already reported issue related it - #13066

I have suspicion that getFirstIndex() and/or getLastIndex() functions in eslint/lib/source-code/token-store/utils.js are producing wrong result

Even if an error occurs in eslint it can be a bug in the parser because eslint use the AST which generated by the parser.

[eslint-deprecated]

Unfortunately, it looks like there wasn't enough interest from the team
or community to implement this change. While we wish we'd be able to
accommodate everyone's requests, we do need to prioritize. We've found
that issues failing to reach accepted status after 21 days tend to
never be accepted, and as such, we close those issues.
This doesn't mean the idea isn't interesting or useful, just that it's
not something the team can commit to.

Thanks for contributing to ESLint and we appreciate your understanding.