make script failing

[spevilgenius]

At first I had this issue:

Testing the app works fine. When running the make script I receive:

Bundle assets: index-58cdf158.css, index-89a7a34b.js, logo-da9b9095.svg

Webpart script references new assets.

ERROR:

Can't find index.js asset.

I realized this was due to the hashing using a minus instead of a period so I updated the script regex and that part works.

But during the build there are some tsc errors most I can ignore, but it doesn't resolve"

Cannot find module '../assets/appcode/index.ID.js' or its corresponding type declarations.

This prevents the build from completing causing further issues so I am not sure why that part is failing

[spevilgenius]

I got around that issue by fixing the other regex expressions in the bundle file.

However, the webpack fails with a sea of red issues. It might be a later version of SPFx but that shouldn't cause it to fail to me. I am going to have to try a standard webpart build of SPFX to see where the difference is. There are so many errors I can't fix them. Will keep updating...

[spevilgenius]

So, it appears that the addRenderFn function is not worklng as expected. It adds code to the script but it's in strange place and corrupts the index file. Still troubleshooting.

[spevilgenius]

So, I successfully got things working after doing more things. I knew the issue was how the build script was working but normally minified code is not so easy to read. I set vite to not minify and found that with the new version it was adding a bit more code and was also implementing "const" instead of "var". Also, it was no longer the last index that I needed to capture and discovered that the "const App" was the string I needed to get and then this allowed the bundle to work. I had split out the make.ps1 file to do a bundle only "bundle.ps1" so that I could bundle and run gulp serve locally and this worked a treat. Now to go beyond boilerplate!!

[spevilgenius]

Just an additional comment here for closing. I have to ensure that vite does not minify code. I had to change the bundle script file to account for build changes. The first change is that the updated build tools add a minus instead of a period when hashing files. Not sure I want to change that as it is the default so I had to change the regex to accommodate that. The vue build added more code to the generated script so the bundle file needed more updates to basically find the correct piece to snip to create the RenderFN function. This has allowed me to get it working on SPFx 1.16 and vite 4 with vue 3 latest.

[Zugidor]

Hi @spevilgenius

Apologies for pinging on a closed issue. I was wondering if you had the code on hand for getting this working on SPFx 1.16, Vite, and Vue 3? I'm running into what seem to be the same problems regarding the massive webpack errors to do with addRenderFn and the Vue build files, but I'm having some trouble following how you resolved the issue.

Many thanks in advance!

[spevilgenius]

I have checked in a project I am working on. It requires a license for Syncfusion but at least you can see the changes that I made. https://github.com/spevilgenius/peo-mlb-advanced-kanban.git