TypeError: Cannot read property 'value' of null in template-curly-spacing

Tell us about your environment

• ESLint Version: 7.20.0
• Node Version: v12.18.3
• npm Version:
• Operating System: macOS 11.2.2

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using? @babel/eslint-parser

Please show your full configuration:

Configuration

require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
  "env": {
    "browser": true,
    "es2020": true
  },
  "extends": [
    "standard",
    "standard-jsx",
    "standard-react",
    "standard-with-typescript",
    "eslint:recommended",
    "plugin:react/all",
    "plugin:react-hooks/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/react",
    "plugin:import/typescript",
    "plugin:compat/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:radar/recommended",
    "plugin:jsonc/recommended-with-jsonc",
    "plugin:yml/standard"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": ["../tsconfig.json"]
  },
  "overrides": [
    {
      "files": ["*.yaml", "*.yml"],
      "parser": "yaml-eslint-parser"
    },
    {
      "files": ["*.js", ".jsx"],
      "parser": "@babel/eslint-parser"
    }
  ],
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "radar",
    "tsdoc"
  ],
  "rules": {
    "tsdoc/syntax": "warn",
    "import/order": [
      1
    ],
    "import/prefer-default-export": [
      1
    ],
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "react/jsx-indent": [
      0,
      2
    ],
    "react/jsx-indent-props": [
      2,
      2
    ],
    "react/jsx-max-depth": [
      0
    ],
    "react/function-component-definition": [
      1,
      {
        "namedComponents": "arrow-function"
      }
    ],
    "react/forbid-component-props": [
      1
    ],
    "react/no-multi-comp": [
      2,
      {
        "ignoreStateless": true
      }
    ],
    "react/jsx-max-props-per-line": [
      1,
      {
        "maximum": 1,
        "when": "multiline"
      }
    ],
    "react/jsx-no-bind": [
      2,
      {
        "ignoreRefs": true
      }
    ],
    "react/jsx-no-literals": [
      0
    ],
    "react/require-default-props": [
      0
    ],
    "no-void": [
      2,
      { "allowAsStatement": true }
    ],
    "indent": [
      "error",
      2,
      {
        "SwitchCase": 1,
        "offsetTernaryExpressions": true
      }
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ],
    "operator-linebreak": [
      2,
      "after",
      { "overrides": { "?": "ignore", ":": "ignore" } }
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": [
      "error"
    ]
  },
  "settings": {
    "react": [
      {
        "pragma": "React"
      },
      {
        "version": "detect"
      }
    ],
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "*/tsconfig.json"
      }
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    }
  }
}

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

...
optimization: {
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 30,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name (module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/]\.pnpm[\\/](.*?)([\\/]|$)/)[1]

            // npm package names are URL-safe, but some servers don't like @ symbols
            const safePackageName = packageName.replace('@', '')
            return `${safePackageName}` // <-- this is the line that caused the issue
          }
        }
      }
    }
...

ESlint run through VSCode ESLint plugin.

What did you expect to happen? Template with curly brackets is linted correctly.

What actually happened? Please copy-paste the actual, raw output from ESLint.

[Error - 10:24:36 PM] ESLint stack trace:
[Error - 10:24:36 PM] TypeError: Cannot read property 'value' of null
Occurred while linting /<redacted>/build/webpack.config.js:86
    at checkSpacingBefore (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/rules/template-curly-spacing.js:52:24)
    at TemplateElement (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/rules/template-curly-spacing.js:136:17)
    at /<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/node-event-generator.js:256:26)
    at NodeEventGenerator.applySelectors (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/node-event-generator.js:285:22)
    at NodeEventGenerator.enterNode (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/node-event-generator.js:299:14)
    at CodePathAnalyzer.enterNode (/<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at /<redacted>/common/temp/node_modules/.pnpm/eslint@7.20.0/node_modules/eslint/lib/linter/linter.js:954:32

Steps to reproduce this issue:

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

[guoyunhe]

I have the same error output. But I don’t have @babel/eslint-parser.

[mdjermanovic]

Hi @guoyunhe!

I have the same error output. But I don’t have @babel/eslint-parser.

Are you getting the same error with ESLint’s default parser? Can you please open a new issue with all the details so we could take a look.