P.parse is not a function Eslint v4 Tranformer

[StTronn]

Describe the bug Getting P.parse is not a function while working in AST

To Reproduce Steps to reproduce the behavior:

1. Go to https://astexplorer.net/#/gist/15be2948a6ffcead5e6d95afc63edd4c/126ac551e5cd4c5e5b251720aaa6d9f50dbec480

Expected behavior Should show context.message

Screenshots If applicable, add screenshots to help explain your problem.

Browser (please complete the following information):

• OS: MAC OS Big Sur 11.4 (20F71)
• Browser Chrome
• Version 93d778e

astexplorer settings:

• Selected parser: babel-eslint
• Selected transformer (if applicable): Eslint V4

• Contents of the local storage key

  {
  "showTransformPanel":false,
  "parserSettings":{
  
  },
  "parserPerCategory":{
  
  },
  "workbench":{
    "parser":"acorn",
    "code":"/**\n * Paste or drop some JavaScript here and explore\n * the syntax tree created by chosen parser.\n * You can use all the cool new features from ES6\n * and even more. Enjoy!\n */\n\nlet tips = [\n  \"Click on any AST node with a '+' to expand it\",\n\n  \"Hovering over a node highlights the \\\n   corresponding location in the source code\",\n\n  \"Shift click on an AST node to expand the whole subtree\"\n];\n\nfunction printTips() {\n  tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip));\n}\n",
    "keyMap":"default",
    "transform":{
       "code":"",
       "transformer":null
    }
  }
  }

[pmcelhaney]

I came here after running into the same issue. It must have been introduced very recently. I opened an incognito window starting from https://astexplorer.net/, selected ESLint as the transformer (so the built-in example comes up) and got the same error. Switching parsers didn't help.

[pmcelhaney]

It's something to do with ESM vs. CJS.

The error comes from this function in eslint4/lib/util/node-event-generator.js.

const esquery = require("esquery");

/* ... */

/**
 * Parses a raw selector string, and throws a useful error if parsing fails.
 * @param {string} rawSelector A raw AST selector
 * @returns {Object} An object (from esquery) describing the matching behavior of this selector
 * @throws {Error} An error if the selector is invalid
 */
function tryParseSelector(rawSelector) {
    try {
        return esquery.parse(rawSelector.replace(/:exit$/, ""));
    } catch (err) {
        if (typeof err.offset === "number") {
            throw new SyntaxError(`Syntax error in selector "${rawSelector}" at position ${err.offset}: ${err.message}`);
        }
        throw err;
    }
}

The value assigned to esquery is a Module object with a default property. The actual esquery object is assigned to esquery.default.

I don't know enough about how modules are resolved in Node and Webpack to get any further than that, but I suspect the solution involves adding "type": "module" in package.json in some package that uses import rather than require.

[pmcelhaney]

This may help. https://stackoverflow.com/questions/33704714/cant-require-default-export-value-in-babel-6-x

[fkling]

The problem basically seems to be https://github.com/webpack/webpack/issues/5756 . esquery provides both CommonJS and ESM implementations and webpack is choosing the ESM one. This seems to solve the issue:

{
  issuer: /eslint4/,
  resolve: {   
    alias: {  
      'esquery': 'esquery/dist/esquery.min.js', 
    },    
  }, 
},