Bug: (TypeError: esquery.parse is not a function)

[numandev1]

Environment

Environment Info:

Node version: v14.15.4 npm version: v6.14.10 Local ESLint version: v7.32.0 Global ESLint version: v7.32.0 (Currently used) Operating System: darwin 20.3.0

What parser are you using?

@typescript-eslint/parser

What did you do?

Configuration

```js const eslintPlugins = { react: require("eslint-plugin-react"), "react-hooks": require("eslint-plugin-react-hooks"), "unused-imports": require("eslint-plugin-unused-imports"), prettier: require("eslint-plugin-prettier"), }; const linterConfig = { parser: parseForESLint, parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 2017, sourceType: "module", }, }; ```

const result = linter.extractEntityNames(transformedCode, {
      rules: {
        "react/jsx-no-undef": "error",
        "no-undef": "error",
      },
    });

above function is calling super.verify method of eslint which is giving this error TypeError: esquery.parse is not a function

extractEntityNames(textOrSourceCode: any, config: any) {
    let lintMessages = [];
    try {
      lintMessages = super.verify(textOrSourceCode, {
        ...linterConfig,
        ...config,
      });
    } catch (error) {
      console.log(error, "error");
    }

    return _.chain(lintMessages)
      .map(
        ({ message }: { message: any }) =>
          message.match(/^[^']*'(?<entityName>[^']+)'.*/)?.groups.entityName
      )
      .compact()
      .uniq()
      .value();
  }

  verifyAndFix(textOrSourceCode: any, config: any) {
    return super.verifyAndFix(textOrSourceCode, {
      ...linterConfig,
      ...config,
    }, { fix: true });
  }
})();

What did you expect to happen?

should get props array now I am getting an empty array with below TypeError: esquery.parse is not a function

What actually happened?

I am trying to get the props to array from this code

const result = linter.extractEntityNames(transformedCode, {
      rules: {
        "react/jsx-no-undef": "error",
        "no-undef": "error",
      },
    });

but I am getting this error TypeError: esquery.parse is not a function

Participation

• [ ] I am willing to submit a pull request for this issue.

Additional comments

when I try to use

const result = linter.extractEntityNames(transformedCode, {
      rules: {
        "react/jsx-no-undef": "error",
        "no-undef": "error",
      },
    });

above function is calling super.verify method of eslint which is giving below error

TypeError: esquery.parse is not a function
Occurred while linting <input>
    at tryParseSelector (/Users/apple/Downloads/ABC/dist/extension.js:155975:24)

here is my transformedCode code

'var _jsxFileName = "/file.ts";\nimport { Colors, Sizes } from "@shobbak/element";\nimport i18n from "i18n-js";\nimport React from "react";\nimport { View } from "react-native";\nimport FastImage from "react-native-fast-image";\nimport ContainerHeader from "./components/ContainerHeader";\nimport DeliveryOptions from "./components/DeliveryOptions";\nimport IconWithBackground from "./components/IconWithBackground";\nexport default (() => {\n  return <View __source={{\n    fileName: _jsxFileName,\n    lineNumb…alues);\n      }} title={i18n.t("texts.business.choose_your_location")} subtitle={i18n.t("texts.business.area_street_building")} // errorMessage={touched.location && errors.location}\n      __source={{\n        fileName: _jsxFileName,\n        lineNumber: 68,\n        columnNumber: 13\n      }} />\n          </View>\n          <DeliveryOptions posting={posting} onChange={post => onUpdate(post)} __source={{\n      fileName: _jsxFileName,\n      lineNumber: 85,\n      columnNumber: 11\n    }} /></View>;\n});'

[nzakas]

It looks like you are subclassing Linter. Can you create an example to reproduce this using Linter directly?

My hunch is this has something to do with how your project is packaged rather than an issue in ESLint itself. Otherwise we would have had this error reported already.

[mdjermanovic]

We had the same error in eslint demo when esquery v1.2.0 was published with "module" field.

In Node runtime, const esquery = require("esquery") is an object that looks like this: { parse, match, ... }.

Webpack, by default, prefers "module" over "main". In the esquery package, "module" points to an ESM module that uses default export: export default { parse, match, ... }, which results in a different interface. In the bundle, esquery becomes { default: { parse, match, ... } } instead of expected { parse, match, ... }, and that's why esquery.parse() fails.

We solved this for eslint demo by configuring Webpack to prefer "main" over "module" here (https://github.com/eslint/website/pull/707). That way, it bundles the same modules ESLint is using in Node runtime (except for packages that have the "browser" field).

[numandev1]

@nzakas I am using this code.

https://github.com/nomi9995/react-native-component-splitter/blob/3873a4842f6280be4afab11af28aadfdcc486009/src/utils/parse.ts#L57

[numandev1]

@mdjermanovic thanks it has resolved my issue.