Breaking change in SPFx 1.17 and baseUrl

[Rafaelki]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

Additional environment details

SPFx version 1.16.1 1.17.x 1.18.0 Node.js version: v16.17.0

Describe the bug / error

I think there is an unannounced breaking change in SPFx 1.17.0 and above, specifically in the @microsoft/sp-build-web package.

Our solutions use baseUrl in the tsconfig file to simply our imports, but this is not working anymore since 1.17+, the solutions will fail during the bundle.

Note that we have "shared" packages and baseUrl was working fine until 1.17+, e.g.:

• React components only package (just a library, this doesn't go to the app catalog)
• SPFx web parts packages using the "React components only" package

Note that using baseUrl is our only customization and it was working until 1.17+, i.e. we don't use webpack import aliases and we don't use paths in the tsconfig.

Using paths in tsconfig doesn't help with case 1 or case 2 below. Using paths in tsconfig and webpack import aliases in gulpfule.js helps with case 1 but keeps failing for case 2 below.

Steps to reproduce

CASE 1 - One solution:

1. Create a SPFx HelloWorld solution using Yeoman 1.18.0 / Webpart / React. I use PNPM but I don't think it matters.
2. Add in line 4 of the tsconfig.json the following: "baseUrl": "./src",
3. In src\webparts\helloWorld\HelloWorldWebPart.ts modify the import in line 9 to import HelloWorld from 'webparts/helloWorld/components/HelloWorld'; - this doesn't look like a simplified import, but in a real scenario, it would.
4. Run gulp bundle and see that it fails.
5. In the package.json file, change line 31 to "@microsoft/sp-build-web": "1.16.1",
6. Run pnpm install
7. Run gulp bundle and see that it works.

CASE 2 - Shared solution:

1. Create sibling folders, one is called Webparts and the other is called Components.
2. Create 2 SPFx HelloWorld solutions (one in each folder) using Yeoman 1.18.0 / Webpart / React. I use PNPM but I don't think it matters.
3. In Component, add in line 4 of the tsconfig.json the following: "baseUrl": "./src",
4. In Component, move the components folder directly under src. Remove the webparts folder.
5. In Component, just for simplicity, in HelloWorld.tsx, remove line 19 and variable isDarkTheme.
6. In Component, just to have some simply use of baseUrl, in HelloWorld.tsx, change lines 2 and 3 to import styles from 'components/HelloWorld.module.scss'; and import type { IHelloWorldProps } from 'components/IHelloWorldProps';
7. In Component, In the package.json file, change line 31 to "@microsoft/sp-build-web": "1.16.1",
8. In Component, run pnpm i and gulp build.
9. In Webparts, in the package,json file, add a link in line 16 to the other solution "@my-shared-components": "link:..\Components",
10. In Webparts, run pnpm i
11. In Webparts, remove the components folder under src\webparts\helloWorld
12. In Webparts, in HelloWorldWebPart.ts, change line 9 to import HelloWorld from '@my-shared-components/lib/components/HelloWorld';
13. In Webparts, in HelloWorldWebPart.ts, change line 10 to import { IHelloWorldProps } from '@my-shared-components/lib/components/IHelloWorldProps';
14. In Webparts, run gulp bundle and see that it fails.
15. In Webparts, in the package,json file, change line 32 to "@microsoft/sp-build-web": "1.16.1",
16. In Webparts, run pnpm i
17. In Webparts, run gulp bundle and see that it works.

Expected behavior

I expect to use baseUrl in 1.17+ as we did in the previous versions. If baseUrl is not supported anymore, what should we use instead to simplify the imports and that work with linked packages?

Ideally, @microsoft/sp-build-web should be restored in 1.18.2 to its previous state to support baseUrl. If this is not possible:

• Is it secure to use the 1.18.x packages together with @microsoft/sp-build-web 1.16.1?
• If not, can we add some plugin to the build/bundle pipeline so that it behaves as in 1.16.1? If so, what plugin was used before 1.17?

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Rafaelki]

Hi! Any news on this?

[Rafaelki]

Hi! Any news on this?

[Rafaelki]

Please note that @microsoft/sp-build-web > 1.16.1 also creates problems with MGT v3, as described in this issue: #2836

[Rafaelki]

Hi! Any news on this?