Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types

[karlhorky]

Summary

Fix the runtime error with named imports and make the last remaining Are The Types Wrong? error with eslint-plugin-react-hooks go away, thanks to the hint from @andrewbranch:

• Bug: eslint-plugin-react-hooks has wrong d.ts after upgrade from 5 to 6/7 #34801 (comment)

How did you test this change?

I tried adding this to node_modules and it fixed the failures when importing named imports like import { configs, meta, rules } from 'eslint-plugin-react-hooks':

➜  eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0

Oops! Something went wrong! :(

ESLint: 9.37.0

file:///Users/k/p/eslint-config-upleveled/index.js:13
import reactHooks, { configs } from 'eslint-plugin-react-hooks';
                     ^^^^^^^
SyntaxError: Named export 'configs' not found. The requested module 'eslint-plugin-react-hooks' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'eslint-plugin-react-hooks';
const { configs } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:228:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:335:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:647:26)
    at async dynamicImportConfig (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:186:17)
    at async loadConfigFile (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:276:9)
    at async ConfigLoader.calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:589:23)
    at async #calculateConfigArray (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/config/config-loader.js:743:23)
    at async directoryFilter (/Users/k/p/eslint-config-upleveled/node_modules/.pnpm/eslint@9.37.0/node_modules/eslint/lib/eslint/eslint-helpers.js:309:5)
    at async NodeHfs.<anonymous> (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:586:29)
    at async NodeHfs.walk (file:///Users/k/p/eslint-config-upleveled/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3)
➜  eslint-config-upleveled git:(renovate/react-monorepo) pnpm eslint . --max-warnings 0
➜  eslint-config-upleveled git:(renovate/react-monorepo) # no error

The named imports identifiers configs, meta, and rules also contain values, as a sanity check:

• Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types #34951 (comment)

cc @poteto

[react-sizebot]

Comparing: bbb7a1f...d1dda4f

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	605.41 kB	605.41 kB	=	107.21 kB	107.21 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	664.38 kB	664.38 kB	=	117.09 kB	117.09 kB
facebook-www/ReactDOM-prod.classic.js	=	688.25 kB	688.25 kB	=	121.13 kB	121.13 kB
facebook-www/ReactDOM-prod.modern.js	=	678.67 kB	678.67 kB	=	119.48 kB	119.48 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against d1dda4f

[andrewbranch]

As a last sanity check, can you try console.logging each of those named imports and make sure they’re correctly bound at runtime?

[karlhorky]

Indeed they are:

import { configs, meta, rules } from 'eslint-plugin-react-hooks';

console.log('>>>meta', meta);
console.log('>>>rules', rules);
console.log('>>>configs', configs);

Output:

$ pnpm eslint . --max-warnings 0
>>>meta { name: 'eslint-plugin-react-hooks', version: '7.0.0' }
>>>rules {
  'exhaustive-deps': {
    meta: {
      type: 'suggestion',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'rules-of-hooks': {
    meta: { type: 'problem', docs: [Object], schema: [Array] },
    create: [Function: create]
  },
  hooks: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'capitalized-calls': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'static-components': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'use-memo': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'void-use-memo': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'component-hook-factories': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'preserve-manual-memoization': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'incompatible-library': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  immutability: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  globals: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  refs: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'memoized-effect-dependencies': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'set-state-in-effect': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'no-deriving-state-in-effects': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'error-boundaries': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  purity: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'set-state-in-render': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  invariant: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  todo: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  syntax: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'unsupported-syntax': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  config: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  gating: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'rule-suppression': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  'automatic-effect-dependencies': {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  fire: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  },
  fbt: {
    meta: {
      type: 'problem',
      docs: [Object],
      fixable: 'code',
      hasSuggestions: true,
      schema: [Array]
    },
    create: [Function: create]
  }
}
>>>configs {
  recommended: {
    plugins: [ 'react-hooks' ],
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react-hooks/static-components': 'error',
      'react-hooks/use-memo': 'error',
      'react-hooks/component-hook-factories': 'error',
      'react-hooks/preserve-manual-memoization': 'error',
      'react-hooks/incompatible-library': 'warn',
      'react-hooks/immutability': 'error',
      'react-hooks/globals': 'error',
      'react-hooks/refs': 'error',
      'react-hooks/set-state-in-effect': 'error',
      'react-hooks/error-boundaries': 'error',
      'react-hooks/purity': 'error',
      'react-hooks/set-state-in-render': 'error',
      'react-hooks/unsupported-syntax': 'warn',
      'react-hooks/config': 'error',
      'react-hooks/gating': 'error'
    }
  },
  'recommended-latest': {
    plugins: [ 'react-hooks' ],
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
      'react-hooks/static-components': 'error',
      'react-hooks/use-memo': 'error',
      'react-hooks/void-use-memo': 'error',
      'react-hooks/component-hook-factories': 'error',
      'react-hooks/preserve-manual-memoization': 'error',
      'react-hooks/incompatible-library': 'warn',
      'react-hooks/immutability': 'error',
      'react-hooks/globals': 'error',
      'react-hooks/refs': 'error',
      'react-hooks/set-state-in-effect': 'error',
      'react-hooks/error-boundaries': 'error',
      'react-hooks/purity': 'error',
      'react-hooks/set-state-in-render': 'error',
      'react-hooks/unsupported-syntax': 'warn',
      'react-hooks/config': 'error',
      'react-hooks/gating': 'error'
    }
  },
  flat: {
    'recommended-latest': { plugins: [Object], rules: [Object] },
    recommended: { plugins: [Object], rules: [Object] }
  }
}

[poteto]

thanks @karlhorky and @andrewbranch!

[poteto]

@karlhorky hmm actually I don't this quite works. It looks like the index.js file is just a dummy one and the one that gets included in npm is this: https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/npm/index.js can you open another PR?

[karlhorky]

@poteto ahh sorry about that, missed that file.

New PR:

• Add hint for Node.js cjs-module-lexer for eslint-plugin-react-hook types #34953