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

Bug Report

Error image

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`]

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 4
  • Comments: 16 (7 by maintainers)

Commits related to this issue

Most upvoted comments

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.

@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.

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]

@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.