Skip to content

fix: with-msw outdated example related to issue 68521 #78853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: canary
Choose a base branch
from
Open

fix: with-msw outdated example related to issue 68521 #78853

wants to merge 3 commits into from
+23 −24

Conversation

HamadUllah16
Copy link

@HamadUllah16 HamadUllah16 commented May 6, 2025 •
edited
Loading

Fix: 68521 Updating outdated with-msw example

The with-msw is outdated and doesn't work with the latest msw version.

What?

The with-msw example is outdated and does not work with the latest msw version.

Why?

  • msw now uses http instead of rest and the outdated implementation does not work with the latest version anymore.
  • the client-side worker is now imported through msw/browser.

How?

  • replaced all usage of rest with http to align with MSW's new API.
  • updated the worker import to use msw/browser as per the new structure.

Codesandbox

https://codesandbox.io/p/sandbox/github/codesandbox/sandbox-templates/tree/main/create-t3-app

Media

localhost_3000.-.Google.Chrome.2025-05-08.09-50-04.mp4

@ijjk ijjk added the examples Issue was opened via the examples template. label May 6, 2025
@ijjk
Copy link
Member

ijjk commented May 6, 2025 •
edited
Loading

Allow CI Workflow Run

  • approve CI run for commit: 8bb6038

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

SaadBazaz
SaadBazaz suggested changes May 6, 2025
View reviewed changes
Copy link

@SaadBazaz SaadBazaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please also add a working Codesandbox or at least a demo video, so we know it's been tested and successfully works locally.

Perhaps show a before/after as well.

Rest of the review is mostly linting and formatting stuff.

@HamadUllah16
Copy link
Author

Please also add a working Codesandbox or at least a demo video, so we know it's been tested and successfully works locally.

Perhaps show a before/after as well.

Rest of the review is mostly linting and formatting stuff.

I've attached a screen recording and a link to a codesandbox poc.

SaadBazaz
SaadBazaz approved these changes May 12, 2025
View reviewed changes
Copy link

@SaadBazaz SaadBazaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job on the repro. Thanks. Small nit

examples/with-msw/mocks/browser.ts
import { handlers } from "./handlers";

export const worker = setupWorker(...handlers);
export const worker = setupWorker(...handlers);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still don't know what changed here.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could be that the setupWorker was previously imported from "msw" and now it's imported from "msw/browser" so its counted as a change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@SaadBazaz SaadBazaz SaadBazaz approved these changes

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

with-msw example doesn't work.
3 participants
@HamadUllah16 @ijjk @SaadBazaz