TypeError: Cannot read properties of null (reading 'callee')

[mmakarin]

'hooks/sort': [
      'error',
      {
        'groups': [
          'useReducer',
          'useState',
          'useContext',
          'useRef',
          'useDispatch',
          'useEffect',
          'useCallback'
        ]
      }
    ],

Oops! Something went wrong! :(

ESLint: 8.5.0

TypeError: Cannot read properties of null (reading 'callee')
Occurred while linting /Users/michael/Documents/app-frontend/src/modules/decisions/components/OpportunitiesContainer/tables/CommissionGrowthTable.tsx:1
Rule: "hooks/sort"
    at /Users/michael/Documents/app-frontend/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:109:59
    at Array.map (<anonymous>)
    at /Users/michael/Documents/app-frontend/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:97:72
    at Array.forEach (<anonymous>)
    at Program (/Users/michael/Documents/app-frontend/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:79:22)
    at ruleErrorHandler (/Users/michael/Documents/app-frontend/node_modules/eslint/lib/linter/linter.js:1076:28)
    at /Users/michael/Documents/app-frontend/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/michael/Documents/app-frontend/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/michael/Documents/app-frontend/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
error Command failed with exit code 2.

[hiukky]

Hello, I see you are using version 8, have you tested using version 7? I haven't done this update yet and haven't seen what's changed, maybe it broke something. But I'll be looking at it and updating it as soon as I can.

[hiukky]

Fixed in version 0.4.2!

[Atom54]

I have the same problem, I tried with both eslint 8.9.0 and 7.32.0 and I always get the same error :

TypeError: Cannot read properties of null (reading 'callee')
Occurred while linting /Users/thomas/Desktop/rn-starter/mobile/src/Screens/Booter.tsx:1
Rule: "hooks/sort"
at /Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:109:59
at Array.map ()
at /Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:97:78
at Array.forEach ()
at Program (/Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint-plugin-hooks/dist/rules/sort/index.js:79:22)
at ruleErrorHandler (/Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint/lib/linter/linter.js:1114:28)
at /Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach ()
at Object.emit (/Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/Users/thomas/Desktop/rn-starter/mobile/node_modules/eslint/lib/linter/node-event-generator.js:297:26)

(eslint-plugin-hooks@0.4.2)

thank you for your work @hiukky ! I would really like to be able to enforce hooks order

[hiukky]

@Atom54 Thanks for your feedback! could you provide an example of the code in Screens/Booter.tsx?

I'll be correcting and adding some tests so we don't blow this again!

[Atom54]

Yes of course :

  /*Some imports...*/

  export default function Booter(props) {
    const { route } = props;
    const { t, i18n } = useTranslation();
    const d = useDispatch();
    const nav = useNavigation();

    const userData = useSelector(s => s.userData);
  
    const [internetWarningDisplayed, canDisplayInternetWarning] = useState(false);
    const [serverErrorDisplayed, canDisplayServerError] = useState(false);
    const [gettingData, setGetData] = useState(false);
  
    const bootEnded = useRef(false);
    const syncStarted = useRef(false);
  
    const mixpanel = MixpanelInstance;
  
    let isFirstBoot = true;
    let isNewUser = false;
    let isTokenInvalid = false;
    let linkRoute = null;
    let bootTimer;
  
    useEffect(() => {
      if (userData.userId) {
        mixpanel.identify(userData.userId);
        WonderPush.setUserId(userData.userId);
        Purchases.logIn(userData.userId);
      }
  
      //Boot handling
      mixpanel.timeEvent('Booting');
      bootTimer = setTimeout(WaitForBooter, 5000);
    
      //Deep links
      isFirstBoot = route.params?.isFirstBoot ?? true;
      if (isFirstBoot) {
        Linking.getInitialURL().then(url => {
          linkRoute = getLinkRoute(url);
        });
      }
    
      return () => unsubscribe();
    }, []);
  
  /*...some functions and render*/

If I remove my Booter.tsx then the ESLint rule is working everywhere else in my project indeed.
I will do some tests to find out what trigger the error in my script and let you know.

[Atom54]

Ok it's related to the variable declaration in Booter script. If I remove this :
let bootTimer;
then it work fine.

Now if I put it back and init it with a null value (as I should have...), the problem disappears ! 🙂
Very cool, it works nicely. Thank you @hiukky

[hiukky]

@Atom54 You were fast, but it's still a bug in this plugin! as the syntax of declaring a variable without initializing is valid in js, we cannot have this limitation, even if the recommended thing is to initialize.

But for that we can leave it to https://eslint.org/docs/rules/init-declarations .

I'll be releasing a path for it this week, thanks for reporting!

[hiukky]

Fixed in version 0.4.3!