[Due for payment 2025-11-07] [$250] Storybook not working

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @jmusial
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Start storybook

Expected Result:

Storybook work ok

Actual Result:

Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021978620699031691135
• Upwork Job ID: 1978620699031691135
• Last Price Increase: 2025-10-23
• Automatic offers:
• QichenZhu | Reviewer | 109264735

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[mukhrr]

🚨 Edited by proposal-police: This proposal was edited at 2025-10-18 11:50:50 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Storybook not working

What is the root cause of that problem?

Log.ts imports CONFIG.ts and CONFIG.ts imports getPlatform at the module level (top of the file). During module initialization:

App/src/CONFIG.ts

Line 6 in 7165a14

import getPlatform from './libs/getPlatform';

Question 1. Why it failes only on Storybook?

Answer: Because in storybook, when CONFIG.ts is imported, it immediately executes code that calls getPlatform() at module level.

App/src/CONFIG.ts

Line 44 in 7165a14

const expensifyComWithProxy = getPlatform() === 'web' && useWebProxy ? '/' : expensifyURL;

App/src/CONFIG.ts

Line 112 in 7165a14

IS_USING_WEB_PROXY: getPlatform() === 'web' && useWebProxy,

This is synchronous code execution during module initialization, not lazy evaluation.
That's, web is lazy loading

Question 2. Even if we remove CONFIG, the circular reference still exists because Log directly uses getPlatform.

Log.ts → getPlatform → Browser → ROUTES.ts → Log.ts

Answer: Because Log.ts uses getPlatform "later" inside serverLoggingCallback (not during module init.)

App/src/libs/Log.ts

Lines 54 to 62 in 1c26e35

	function serverLoggingCallback(logger: Logger, params: ServerLoggingCallbackOptions): Promise<{requestID: string}> {
	const requestParams = params as RequestParams;
	requestParams.shouldProcessImmediately = false;
	requestParams.shouldRetry = false;
	requestParams.expensifyCashAppVersion = `expensifyCash[${getPlatform()}]${pkg.version}`;
	if (requestParams.parameters) {
	requestParams.parameters = JSON.stringify(requestParams.parameters);
	}
	clearTimeout(timeout);

And Browser loads and imports ROUTES. And again ROUTES imports Log but only uses it inside functions.

App/src/ROUTES.ts

Lines 158 to 163 in 1c26e35

	getRoute: (policyID: string | undefined, bankAccountID: string | undefined, isCompleted: boolean) => {
	if (!policyID) {
	Log.warn('Invalid policyID is used to build the BANK_ACCOUNT_ENTER_SIGNER_INFO route');
	}
	return `bank-account/enter-signer-info?policyID=${policyID}&bankAccountID=${bankAccountID}&isCompleted=${isCompleted}` as const;
	},

By the time ROUTES.getRoute() is called, Log is fully initialized

What changes do you think we should make in order to solve the problem?

We need to replace top-level gePlatform import with lazy-load import in CONFIG.ts file

const getExpensifyComWithProxy = () => {
    const getPlatform = require('./libs/getPlatform').default as () => string;
    return getPlatform() === 'web' && useWebProxy ? '/' : expensifyURL;
};

const getExpensifyURLRoot = () => useNgrok && ngrokURL ? ngrokURL : getExpensifyComWithProxy();

Important

Don't forget about changing usage of getExpensifyURLRoot now. We need to use it like following:

      get DEFAULT_API_ROOT() {
            return getExpensifyURLRoot();
      } 

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Optionally, we may directly import and use HybridAppModule instead of CONFIG.ts in Log.ts

import HybridAppModule from '@expensify/react-native-hybrid-app';

HybridAppModule.isHybridApp()

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021978620699031691135

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @QichenZhu (External)

[trjExpensify]

Moving on, @QichenZhu proposal to review!