spfx-fast-serve with library components not working

[MarkusLanger]

I tried to get the example from here https://github.com/s-KaiNet/spfx-fast-serve/tree/master/samples/library-components/regular working but I get an error.

Node 16.18.0

---

It's the same with my SPFx extension and SPFx Library

Node 18.17.1

I followed the documentation from here

What is wrong with my implementation?

[MarkusLanger]

@s-KaiNet Do you have the opportunity to take a quick look at my problem?

[s-KaiNet]

Hi Markus, I will be able to take a look later this week. Sorry for the inconvenience.

[MarkusLanger]

@s-KaiNet If I do a "npm pack" in the library solution and install this file in my webpart/extension with "npm install [file-name].tgz" the code works fine. Apparently the serve in the library component does not work as expected.

[s-KaiNet]

@MarkusLanger in you spfx library configuration you haven't added port property, like here. Most likely, you somehow missed the step 3 from docs. But you could you simply add it manually. I verified with SPFx 1.18 and node 18 this setup should work.

[MarkusLanger]

@s-KaiNet Even with the port in the configuration, it doesn't work for me. Did you try my repositories in your setup?

[MarkusLanger]

Do I have to deploy the library component to the app catalog? Without the --ship parameter in the build and package-solution process?

[MarkusLanger]

I tried it with "npm link". In the library solution I run "npm link" and in the extension solution "npm lin [solution name]". In the extension solution I run "npm run serve". Everytime I do a "gulp build" in the library solution the SharePoint page automatically refresh with the new code of the library solution. But I don't want to do the "gulp build" every time I change my code.

[s-KaiNet]

Which OS do you use? Or maybe WSL2?

[s-KaiNet]

Your sample works just fine for me - on Win11, node 18.17. What I did:

1. Downloaded your samples, run npm i in both of them.
2. Added port 4320 to the lib project
3. Run npm run serve in lib project, wait til it fully compiles. Run npm run serve in extension project
4. Open the url https://company.sharepoint.com/sites/dev/SitePages/Test.aspx?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%224bd4aa4f-b5bc-4dda-91e9-ddb10e31137e%22%3A%7B%22location%22%3A%22ClientSideExtension.ApplicationCustomizer%22%2C%22properties%22%3A%7B%22testMessage%22%3A%22Test+message%22%7D%7D%7D

https://github.com/s-KaiNet/spfx-fast-serve/assets/10658276/3875adbc-9e2b-4661-b947-e7d2f9f3047b

If you run just a regular OOB SPFx web part with fast-serve, will it work for you? Looks like it's an environment-specific problem, but I should know your config.

[MarkusLanger]

Thank you for your information. I use an MacBook Apple M1 Pro with Sonoma 14.1.1. Regular SPFx Extensions and Webparts run without any problems. Currently I am working an 3 webparts and 2 extension at the same time without any problems.

[MarkusLanger]

I used a library solution with spfx-fast-serve and several webparts in the past without any problems. Unfortunately, these no longer work either.

[s-KaiNet]

Could you check, that on a library project, the files inside dist\hello-world-library.js are actually written every time you change anything in code (while running npm run serve inside the library project of course). If no files are written, then it might be the cause of the problem.

[s-KaiNet]

I used a library solution with spfx-fast-serve and several webparts in the past without any problems. Unfortunately, these no longer work either.

you mean in the latest versions with SPFx library components no longer work for you on Mac?

[MarkusLanger]

The old library solution is SPFx 1.17.2.

[MarkusLanger]

Could you check, that on a library project, the files inside dist\hello-world-library.js are actually written every time you change anything in code (while running npm run serve inside the library project of course). If no files are written, then it might be the cause of the problem.

The files in the dist folder are written every time I change the code. That works fine

[s-KaiNet]

Could you check, that on a library project, the files inside dist\hello-world-library.js are actually written every time you change anything in code (while running npm run serve inside the library project of course). If no files are written, then it might be the cause of the problem.

The files in the dist folder are written every time I change the code. That works fine

could you send me the content of hello-world-library.js from your Mac?

[MarkusLanger]

ohhhhhh, I tried it with your complete url parameters "?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%224bd4aa4f-b5bc-4dda-91e9-ddb10e31137e%22%3A%7B%22location%22%3A%22ClientSideExtension.ApplicationCustomizer%22%2C%22properties%22%3A%7B%22testMessage%22%3A%22Test+message%22%7D%7D%7D" and then it works fine for me too.

So far I have created a sppkg with gulp bundle && gulp package-solution and then installed it in the App Catalog. Then started the local server and used the code from local and reloaded the page as soon as the code changed.

Is there a difference?

With normal webparts and extensions it works without problems.

[MarkusLanger]

However, I can also work well with the URL parameter variant. Thank you very much for your support!

[s-KaiNet]

Glad it finally works! Library project always serves files from file system, that is why I don't think it will work with App Catalog installation, that's the limitation. However, you could try different options, maybe it will work, otherwise just use url parameters.

[MarkusLanger]

I deploy the webpart or extension in the App Catalog and not the library project. The library project is alwas local. I'm pretty sure it worked once. But I use the parameters now. Thanks a lot!