Web - Endless spinner is displayed when try to open Stories

[kbecciv]

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

---

Action Performed:

1. Open Stories on Staging Web app via https://staging.new.expensify.com/docs/index.html

Expected Result:

Stories should open and no console error displayed

Actual Result:

Endless spinner is displayed with console error,

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.43.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): n/a

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5493095_endless2.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause

Slack conversation:

Issue were found when execute PR: #7984

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @iwiznia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[iwiznia]

@Expensify/design do we care that this is broken? Is anyone using it?

[shawnborton]

cc @marcaaron

[roryabraham]

Yes, I use Storybook frequently and I encourage you to try it out as well. Here are some reasons I like using storybook:

1. I find it to be a very useful tool to develop reusable components without getting too caught up in testing business logic.
2. We have lots of components that are really tied up with business logic, and Storybook can help us untangle that. If you can't create stories for a component, then you should consider generalizing your component or, if that's not possible, moving it to src/pages.
3. We're also hopeful that it will be helpful to new contributors (finding the UI elements that we have available so that they can more easily piece them together).
4. This isn't something we've started taking advantage of yet, but Storybook has lots of tools that can help with Accessibility testing.

In summary, Storybook is meant to be a bridge between the design world and the code where we can create a cohesive set of UI elements that we use in our app.

[MelvinBot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[stephanieelliott]

Posted to Upwork: https://www.upwork.com/jobs/~01bd97ac2dd22d9e6f

[melvin-bot]

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

[MelvinBot]

📣 @parasharrajat You have been assigned to this job by @expensify-bot[bot]!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Triggered auto assignment to @tgolen (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[parasharrajat]

Proposal

I can fix it cc: @tgolen

1. Fix: Long press on image doesn't open the context menu #8018 indirectly caused this issue. But we can't blame that PR for this. Storybook's webpack config is not configured correctly and it is bundling extra files.

We just need to make sure only the necessary files are imported. Modify this line to use the correct files only as the main app webpack config. By default storyBook imports every possible module file.

App/.storybook/webpack.config.js

Line 22 in 0b0a51e

config.resolve.extensions.push('.web.js', '.website.js');

to

    config.resolve.extensions = custom.resolve.extensions;

custom refers to the main App webpack config. This will fix it.

[marcaaron]

What broke it in the first place? Seems like a regression no? I see you linked the PR. So we should send it back to @ahmdshrif to fix ?

[parasharrajat]

I don't blame that PR. This was a coincidence. I added a new Story in a PR which uses RenderHTML. Now #8018 modifies another component in the app which is used by RenderHTML. I reviewed #8018 before my PR was merged. And There was a long delay before CME merged #8018. Thus this got missed.

The only point is that I already spent time debugging this and I can quickly create the PR. just a thought. Thanks?

I always try to point out regressions first. But this time I didn't consider this as a regression.

[parasharrajat]

At last, I am fine with anything. Sorry for confusing post 😆

[stephanieelliott]

Ok based on @parasharrajat'scexplanation, it sounds like this is not a regression.

Bearing that in mind, @tgolen what do you think of the proposal Rajat shared here?

[tgolen]

I'm good with that proposal 👍

[parasharrajat]

PR ready...

[stephanieelliott]

PR is on staging

[tgolen]

Not overdue, melvin.

[parasharrajat]

It should be ready for payment now.

[stephanieelliott]

Oop, this one didn't get Hold for Payment tag when it was merged 🤔

Thanks for the bump @parasharrajat, all paid in Upwork!