Could not load <name of component> in require. Error: [HMR] Hot Module Replacement is disabled.

[jacjanowski]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version - latest
• SPFx version 1.22.2
• Node.js version 22.22.1
• Using React as framework, version 17.0.1

Describe the bug / error

I am getting an error: "Could not load in require. Error: [HMR] Hot Module Replacement is disabled." I am also getting a "has been blocked by CORS policy: Permission was denied for this request to access the loopback address space" error. All i am trying to do is display the component which had the default "Welcome to SharePoint Framework!" with the provided image of two cartoon people. Instead, it is displaying a message reading "Something went wrong If the problem persists, contact the site administrator and give them the information in Technical Details. "

Not sure what I need to do in order to fix this and simply display the default component.

Steps to reproduce

1. Follow the video tutorial: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part. Afterwards, follow the next video in the series.

Expected behavior

I expected to get the web component to appear normally, displaying the "Welcome to SharePoint Framework! The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva....."