SharePoint / SharePoint/sp-dev-docs

SPFx 1.20 - Code gets redirected to the wrong chunk

Open
#10,130 11 comments 0 reactions 1 assignee View on GitHub

@Ashlesha-MSFT is already working on this.

Since Mar 4, 2025.

sharepoint-developer-support type:bug-confirmed type:bug-suspected
Dominant language
PowerShell
Stars
1.4k
Forks
1.1k
Avg merge
4d 12h
Merged PRs (30d)
12

Description

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested
  • 💥 Google Chrome
Additional environment details
  • SPFx version: 1.20.0
Describe the bug / error

I have an issue that I believe is related to how Webpack 5 generates the chunks or decides what chunk to execute.

I have a solution with several web parts that share code via some helper functions exported individually (we don't use classes). These functions are imported statically (i.e., not using lazy loading).

When only one web part is on the page, everything works well.

When multiple web parts from the solution are on the page, the web parts at the top work fine. However, as I scroll, the next web parts are loaded and they fail with an i.J1 "is not a function" error.

I have debugged the code that DOESN'T work, ie. when the page has many web parts, and that calling function is located in a different chunk (named with only numbers, without a vendor prefix)

Image

For some reason, this chunk doesn't have all the imports that are needed to run this piece of code, and it fails with i.undefined()

Image

I have debugged the code that works, ie. when the web part is isolated, and that calling function exists in the same file (chunk), so it should not be redirected to a different chunk, should it?

Image

Image

I have tried to research, with little knowledge of Webpack, and the only thing that I found could be related to this Webpack setting: runtimeChunk: 'single' or using an old version of Webpack 5.

Steps to reproduce

This issue is difficult to reproduce as it requires a solution with many web parts that share code. Given that you have this kind of solution:

  1. Add many different web parts to the page.
  2. Publish the page.
  3. Note that the first web parts load correctly.
  4. Scroll down the page. When the web parts at the bottom load, note that they fail.
Expected behavior

All web parts should work even if there are many web parts on the page.
The correct chunk should be executed.
Webpack should generate the correct chunks.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.