1

I'm using react, typescript. This is part of my code using react lazy.

import {lazy} from 'react';

const LAZY_PANELS = {};
const PANELS = {
  'home': () => import('./home'),
  'settings': () => import('./settings'),
  'profile': () => import('./profile'),
}
for (const route of Object.keys(PANELS)) {
  LAZY_PANELS[PANELS[route]] = lazy(PANELS[route]);
}

I'm using PANELS object to render my components and it's working fine. after adding @typescript-eslint/promise-function-async to my eslint rules i needed to change my code like this:

import {lazy} from 'react';

const LAZY_PANELS = {};
const PANELS = {
  'home': async () => import('./home'),
  'settings': async () => import('./settings'),
  'profile': async () => import('./profile'),
}
for (const route of Object.keys(PANELS)) {
  LAZY_PANELS[PANELS[route]] = lazy(PANELS[route]);
}

I did it and everything was OK but after creating a new build in deployed version lazy components are not in correct order. PANELS.home is equal to profile component and PANELS.profile is equal to home component.

I know that if I remove asyncs and disable that rule here or even use checkArrowFunctions option to ignore arrow functions it's gonna be OK but i rather to know the reason why it's happening and maybe solve it in a better way.

user16217248
  • 3,119
  • 19
  • 19
  • 37
SeyDal
  • 23
  • 4
  • Welcome to SO! "_lazy components are not in correct order_": how do you notice that? Are you referring to loading order? How do you use `LAZY_PANELS`? – ghybs Apr 05 '23 at 02:02
  • I mean they are stored in the `LAZY_PANELS` by wrong order. `LAZY_PANELS[PANELS[home]]` is equal to profile component and `LAZY_PANELS[PANELS[profile]]` is equal to home component. – SeyDal Apr 05 '23 at 05:47
  • It seems to be related to resolving time of promises but i don't know why it's not happening in develop and how to fix it. – SeyDal Apr 05 '23 at 05:53
  • Can you store them just as `LAZY_PANELS[route]`? – ghybs Apr 05 '23 at 06:50
  • Good point, I guess changing it will solve the problem. I know that it was a bad implementation that was in project's base structure from years ago but do you know why its not working properly in deploy mode? It's working with `() => import('./path')` and because its returning a promise by the definition adding async to it shouldn't change anything. it's kinda weird. – SeyDal Apr 05 '23 at 08:28

0 Answers0