@babel/core^7.13.10 eslint error: Cannot read property 'value' of null when @babel/types are duplicated in node_modules

[roojay520]

Bug Report

Error

Input Code

 // test.js
  export function test(obj) {
    const { x, y } = obj;
    var result = {
      x: `${x}<${x}`,
      y: `${x}[${y}-${x}]`,
    };
    return result;
  }

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ],
  "plugins": ["@babel/transform-runtime"]
}

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
    jquery: true,
  },
  root: true,
  parserOptions: {
    requireConfigFile: false,
    parser: '@babel/eslint-parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      defaultParams: true,
    },
  },
  plugins: ['vue', 'prettier', 'feq'],
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js',
      },
    },
  },
  extends: ['plugin:vue/essential', 'airbnb-base'],
  globals: {},
  rules: {},
};

Expected behavior

- Babel version(s): [v7.13.10]
- Node/npm version: [Node v12.19.0/npm 6.14.9]
- OS: [macOS 10.14.6]
- How you are using Babel: [`webpack`]

[babel-bot]

Hey @roojay520! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

Can you share the complete stack trace?

[ChrisWiles]

So I had this issue a while back and fixed it via #10904

But I updated again and it is back.

TypeError: Cannot read property 'value' of null
Occurred while linting /bulk_invoice_processor/index.js:116
    at checkSpacingBefore (node_modules/eslint/lib/rules/template-curly-spacing.js:52:24)
    at TemplateElement (eslint/lib/rules/template-curly-spacing.js:136:17)

[nicolo-ribaudo]

I tried creating a project with the files in #12985 (comment) but I cannot reproduce the error 😕

@ChrisWiles / @roojay520 Could you also share a repository which reproduces the bug? 🙏

[ChrisWiles]

@nicolo-ribaudo Also I am using NPM v6.14.11 to install

[roojay520]

@nicolo-ribaudo Sorry! Because I'm using it with webpack, doesn't have complete stack trace. After debug yesterday, I found it should be the problem with the template string. When I prepared the demo again today, the error seemed to disappear again. It's weird.

[JLHwung]

This issue is likely due to duplicate and different versions of@babel/types in node_modules, although we tried to maintain compatibilities across different versions, it is quite hard for us to reproduce such issue because of the exponential combination of @babel/*.

That said, you can solve this issue by removing your lock files and installing again, or maybe npm dedupe. But without a reproducing repo we can't dig this issue further down.

[ChrisWiles]

Thanks, removing lock file and reinstalling didn't work. I will try dedupe if that doesn't work I will try to make a reproducible repo

…

On Wed, Mar 10, 2021, 7:31 AM Huáng Jùnliàng ***@***.***> wrote: This issue is likely due to duplicate and *different* versions of @babel/types in node_modules, although we tried to maintain compatibilities across different versions, it is quite hard for us to reproduce such issue because of the exponential combination of @babel/*. That said, you can solve this issue by removing your lock files and installing again, *or* maybe npm dedupe. But without a reproducing repo we can't dig this issue further down. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12985 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACIEOMPCY7PXSAJZGCSFQYDTC5RB5ANCNFSM4Y3ANKSQ> .

[milkbump]

Minimal repro at https://github.com/kwangure/babel-eslint-property-null-repro. Hope it helps.

[ChrisWiles]

So I solved my issue. Seemed to be a babel conflict, I was using parser: '@babel/eslint-parser' but I was importing a eslint config that was using the old version

extends: [packageThatWasUsingOldParserVersion]

[JLHwung]

@kwangure Thanks for the reproduction repo. I can reproduce this issue. However, if I remove package-lock.json and install using yarn, the linter works as expected. I guess it is related to how dependencies are hoisted between different package managers. Still investigating.

[nicolo-ribaudo]

@JLHwung I don't know if it helps, but I noticed in that repository we generate different tokens for template literals than what ESLint usually does.

[JLHwung]

Yeah those tokens are generated from https://github.com/babel/babel/blob/main/eslint/babel-eslint-parser/src/convert/convertTokens.js#L22 . I can not reproduce this error on Babel repo, likely because we are using yarn.

[JLHwung]

@kwangure I think I have figured out what's going wrong here. Currently @babel/eslint-parser will fail when @babel/types is duplicated, specifically when both @babel/core and @babel/traverse have their own copies of @babel/types. Before we fix this issue, make sure you have run npm dedupe so @babel/types will be deduplicated.

You can check whether @babel/types is correctly deduplicated by

npm ls @babel/types

It should look like

babel-template-curly-repro@ /Users/jh/code/babel-eslint-property-null-repro
└─┬ @babel/core@7.13.10
  ├─┬ @babel/generator@7.13.9
  │ └── @babel/types@7.13.0  deduped
  ├─┬ @babel/helper-module-transforms@7.13.0
  │ ├─┬ @babel/helper-module-imports@7.12.13
  │ │ └── @babel/types@7.13.0  deduped
  │ ├─┬ @babel/helper-replace-supers@7.13.0
  │ │ ├─┬ @babel/helper-member-expression-to-functions@7.13.0
  │ │ │ └── @babel/types@7.13.0  deduped
  │ │ ├─┬ @babel/helper-optimise-call-expression@7.12.13
  │ │ │ └── @babel/types@7.13.0  deduped
  │ │ └── @babel/types@7.13.0  deduped
  │ ├─┬ @babel/helper-simple-access@7.12.13
  │ │ └── @babel/types@7.13.0  deduped
  │ ├─┬ @babel/helper-split-export-declaration@7.12.13
  │ │ └── @babel/types@7.13.0  deduped
  │ └── @babel/types@7.13.0  deduped
  ├─┬ @babel/helpers@7.13.10
  │ └── @babel/types@7.13.0  deduped
  ├─┬ @babel/template@7.12.13
  │ └── @babel/types@7.13.0  deduped
  ├─┬ @babel/traverse@7.13.0
  │ ├─┬ @babel/helper-function-name@7.12.13
  │ │ ├─┬ @babel/helper-get-function-arity@7.12.13
  │ │ │ └── @babel/types@7.13.0  deduped
  │ │ └── @babel/types@7.13.0  deduped
  │ └── @babel/types@7.13.0  deduped
  └── @babel/types@7.13.0

I removed the regression tag as this issue affects all @babel/eslint-parser versions.

[milkbump]

Just npm dedupe didn't seem to help. But I deleted my lock file and then deduped. I no longer get the errors. Thanks!

[alexbbt]

We were able to solve this by not only deduping but also updating all of the nested versions. I found some on 7.13.14 and some on 7.13.17 so I ran these:

npm install @babel/types@7.13.17
npm dedupe

Then I removed the newly saved dep from package.json and did another npm i just to make sure the lock file was up to date.