SPA Build for `npm init slidev` does not render correctly

[chill-cod3r]

Describe the bug When using the documentation's starter workflow with npm init slidev@latest - a project is scaffolded. When this project is built using the provided npm run build script, a dist folder is produced. When served statically with something like npx serve ./dist or github pages it does not appear to render the CSS correctly. See a freshly created project from npm init -

Expected Behavior: When running npm run build on the main starter project it should render correctly as it does when running in dev mode. Dev Mode for same project:

[dizys]

Are there any warnings or errors when you are building your SPA? If yes, would you mind posting them here? Also, the errors in the browser console would also help pinpointing the bug, thx~

[chill-cod3r]

I do not get any, but upon further investigation could it possibly be related to this? seems like maybe an underlying issue with windicss: https://github.com/windicss/vite-plugin-windicss/issues/86

[dizys]

Weird, I followed your exact steps and use npx serve ./dist to serve, and it works fine for me. I'm running on MacOS Big Sur BTW.

[dizys]

Would you mind sharing the errors in the browser console?

[chill-cod3r]

Hmm, that is odd. I'm not getting any errors in the browser at all 🤔

I'm running on MacOS Big Sur BTW

Same here 👍

[dizys]

Hmmm, I can't really think of any reason why it would behave that way. Would you mind sharing your repo created by npm init slidev@latest if that's possible. Technically, it should be the same as mine. Just wanna be sure. 😄

[chill-cod3r]

@dizys sure thing - https://github.com/wolfejw86/slidev-error-repro

Tried to throw up a github pages with it, and interestingly enough I get a weird build time error about not finding windi.config This package repros it locally still though

[chill-cod3r]

Looks like I had to explicitly install npm i @slidev/client as a dependency - which fixed that, however now I have it deployed here on this gh-pages and it's still showing the "shrunken" slide and hardly any formatting - https://wolfejw86.github.io/slidev-error-repro/ (no console / browser / network errors)

[dizys]

Yeah, I'm getting the same error when I build your repo locally.

Error: Cannot find module '@slidev/client/windi.config'
Require stack:
- /Volumes/MacintoshHD/projects/per/temp/slidev/slidev-error-repro/node_modules/@slidev/theme-seriph/windi.config.ts

However, after I remove the node_modules folder and the lock file package-lock.json, and then run npm install and npm run build again, the building process runs smoothly. npx serve ./dist also gives clean looking SPA.

Maybe something messed up within the lock file. Would you mind trying removing the lock file and the node_modules folder and then try installing and building again?

[chill-cod3r]

So here's something fun, I was using NodeJS version 14.2 - after upgrading to 14.7 (latest LTS), deleting node_modules, deleting package-lock, and finally reinstalling everything is now working as expected. I also updated the gh-pages deploy to specifically use node 14.7 and that also worked: https://github.com/wolfejw86/slidev-error-repro/commit/36899985ee20006a2495d685d8c0b9cff7be5af5

How I ended up on 14.2 - no clue at this point 😆 - might be good to mention here though:

Thank you for your help troubleshooting - you being able to take action on my repo and make it work clued me in that something was wrong very early on in my process - ie wrong node version.