[Bug]: TypeError: Cannot read properties of undefined (reading 'forceDeltaQueueProcessingOnAllExecutors')

[damianobarbati]

What happened?

I don't understand how to properly initialize and/or login the user. I get an error when I login which is not catchable.

NotificationBell.tsx:53 OneSignal.login
LoginManager.ts:138 TypeError: Cannot read properties of undefined (reading 'forceDeltaQueueProcessingOnAllExecutors')
    at ee._login (LoginManager.ts:42:30)
    at async ee.login (LoginManager.ts:24:5)
    at async D.login (OneSignal.ts:109:11)
overrideMethod @ hook.js:608
_login @ LoginManager.ts:138
await in _login
login @ LoginManager.ts:24
login @ OneSignal.ts:109
(anonymous) @ react-onesignal.js?v=d04993a6:50
processItem @ ProcessOneSignalPushCalls.ts:9
push @ OneSignal.ts:266
processOneSignalDeferredArray @ ReplayCallsOnOneSignal.ts:12
xs @ pageSdkInit.ts:38
(anonymous) @ pageSdkInit.ts:50
(anonymous) @ pageSdkInit.ts:50

My component:

export const NotificationBell = ({ className, userId }: Props) => {
  const [consentStatus, setConsentStatus] = React.useState<null | 'default' | 'granted' | 'denied'>(null);
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();

  const { data: rowsCount } = useSWR(['/notification/count', { read_at: null }], POST);

  // when we unmount the component, we need to log out the user from OneSignal and reset the consent status to unknown
  React.useEffect(() => {
    return () => {
      setConsentStatus(Notification.permission);
      console.log('OneSignal.logout');
      void OneSignal.logout();
    };
  }, []);

  // when we mount the component or user/language changes, we need to run all the logic
  React.useEffect(() => {
    (async () => {
      if (!OneSignal.User) {
        await OneSignal.init({
          appId: import.meta.env.VITE_ONESIGNAL_APP_ID,
          allowLocalhostAsSecureOrigin: true,
          welcomeNotification: { title: t('Welcome on ATLAS!'), message: t('You will now receive notifications relevant to you.'), url: window.location.href },
        });
      }

      if (!OneSignal.User.externalId) {
        try {
          console.log('OneSignal.login');
          await OneSignal.login(userId);
        } catch (error) {
          console.warn('OneSignal bug?');
          console.error(error);
        }
      }
      i18n.on('languageChanged', (lng) => OneSignal.User.setLanguage(lng));

      // we check if the user is subscribed to notifications, but we can't rely on OneSignal.User.PushSubscription.optedIn since it doesn't let us know if the user was prompted
      setConsentStatus(Notification.permission);
    })();
  }, [userId, t, i18n]);

What browsers are you seeing the problem on?

Chrome (Chromium)

What operating system are you running?

MacOS

Steps to reproduce?

The useEffect I provided

What did you expect to happen?

No errors

Relevant log output

[aoneahsan]

getting this same error

using this package version

"react-onesignal": "^3.2.2",
"react": "^19.1.0",
"react-router": "^7.6.1",

"react-router-dom": "^7.6.1",

"@types/react": "^19.1.6",
"@types/react-dom": "^19.1.5",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"typescript": "^5.8.3",
"vite": "^6.3.5"

[sherwinski]

Hi @damianobarbati and thanks for reaching out. It looks like the structure of your code is causing a race condition, where login() is being called before the OneSignal SDK can be fully initialized. To remedy this, I would suggest invoking each function in a way more similar to:

useEffect(() => {
  const initializeAndLogin = async () => {
    try {
      await OneSignal.init({
        appId: import.meta.env.VITE_ONESIGNAL_APP_ID,
        allowLocalhostAsSecureOrigin: true,
        welcomeNotification: {
          title: t('Welcome on ATLAS!'),
          message: t('You will now receive notifications relevant to you.'),
          url: window.location.href
        },
      });

      if (!OneSignal.User?.externalId) {
        await OneSignal.login(userId);
      }
    } catch (error) {
      console.error('OneSignal initialization/login error:', error);
    }
  };

  initializeAndLogin();
}, [userId, t, i18n]);


Let me know if that helps with your issue or if you have any further questions.

[everurstruly]

Hi @damianobarbati and thanks for reaching out. It looks like the structure of your code is causing a race condition, where login() is being called before the OneSignal SDK can be fully initialized. To remedy this, I would suggest invoking each function in a way more similar to:

useEffect(() => {
  const initializeAndLogin = async () => {
    try {
      await OneSignal.init({
        appId: import.meta.env.VITE_ONESIGNAL_APP_ID,
        allowLocalhostAsSecureOrigin: true,
        welcomeNotification: {
          title: t('Welcome on ATLAS!'),
          message: t('You will now receive notifications relevant to you.'),
          url: window.location.href
        },
      });

      if (!OneSignal.User?.externalId) {
        await OneSignal.login(userId);
      }
    } catch (error) {
      console.error('OneSignal initialization/login error:', error);
    }
  };

  initializeAndLogin();
}, [userId, t, i18n]);


Let me know if that helps with your issue or if you have any further questions.

I initialize and login in different time periods and end up with the same error still. I can confirm the initialization from an error log letting me know I can't init twice but the login call results in the bug

[fadi-george]

Hello, we've have refactored the queueing system for the underlying web cdn scripts (v160402). So this error should stop happening. Let us know if it you still encounter different issues.

[damianobarbati]

Hey @fadi-george , thanks for the update. I cannot see any release, is it coming soon to test this?

[fadi-george]

@damianobarbati The react package & other wrapper packages pull our cdn script so there should be no change on your part.