search

richardtallent / vite-plugin-singlefile

Vite plugin for inlining JavaScript and CSS resources
MIT License
808 stars 53 forks source link

"removeViteModuleLoader = true" doesn't work #57

Closed humbleCoder1990 closed 1 year ago

humbleCoder1990 commented 1 year ago

image I still see this kind of codes I didn't write in index.html after build. It seems it came from vite. The "removeViteModuleLoader = true" option doesn't remove this code..

richardtallent commented 1 year ago

The goal of this plugin is to bundle all files together, to the greatest extent possible. The use cases for this plugin are very, very limited -- mostly embedded or non-networked environments.

Splicing JavaScript using RegEx just isn't a good idea, so I'm not going to continue trying to remove all vestigial remnants of Vite or Rollup's own module-loading code, unless that code is actually breaking anything. If the existing option just isn't working anymore due to changes in the loader code, I'll end up just removing the option.

Greenheart commented 1 year ago

@humbleCoder1990 Thanks for reporting!

This was a quick fix - PR coming soon.

To fix it, I copied the Vite module loader code into https://regexr.com and copied the broken regex, tweaking it until it worked again.

Vite is maturing and it seems like their module loading strategy hasn't changed too much in the past 12 months. Mostly minor tweaks at this point.

image

I'd really prefer to keep the removeViteModuleLoader option in the core library, since it keeps the output as clean as possible. I know that several people in my network are using this option. Also, if we remove it, that means more than 10 of my projects would need to maintain the same regex in their separate build scripts - or use a forked version of vite-plugin-singlefile which would keep the option even if it's removed from this version.

A more long term strategy might be to get Vite to not add the module loader script in the first place. Perhaps if we could move the execution of vite-plugin-singlefile to another phase of the build process could help with that, since that might allow us to remove the virtual modules that Vite thinks it needs to load with the preloading script. Thus perhaps removing the need for a regex.

richardtallent commented 1 year ago

Resolved in the latest release. I adjusted the regex to simplify the logic a bit (and improve performance), hopefully that keeps it rolling for longer this time.

Greenheart commented 1 year ago

Nice! Thanks for the consideration!

humbleCoder1990 commented 1 year ago

I still see same result I posted after upgrading this plugin today. image

I enabled the option in vite.config.ts image

I'm working app for local enviorment, So I really need in the use case of removeViteModuleLoader... But it seems it never works. How can I use it?

Greenheart commented 1 year ago

@humbleCoder1990 Hi again! Two things:

  1. Are you sure you upgraded to the latest version of vite-plugin-singlefile and vite?

With the following dependencies, this issue has been resolved for me:

vite-plugin-singlefile@0.12.2
vite@3.1.6

I've tested in multiple projects with the versions listed above, and vite-plugin-singlefile@0.12.2 consistently fixes this problem, while 0.12.1 is broken. Thus I'm pretty confident you've not upgraded to the latest version.

However, there is a small chance that something else might be happening, and if so, please follow the instructions below.

  1. If it's still broken when you have the versions specified above, please create a minimal reproduction repo so we can debug and fix this. Without it, it will be hard to know what's causing it and we won't be able to help you.

To create a minimal reproduction repo, publish a copy of your project as a public GitHub repository, and only keep the code and config that are needed to reproduce the issue.

humbleCoder1990 commented 1 year ago

@Greenheart

I'm using vite@3.1.7 & vite-plugin-singlefile@0.12.2. I think the problem comes when using "vite-tsconfig-paths" plugin. Could you try to use this plugin together? https://www.npmjs.com/package/vite-tsconfig-paths

image

Greenheart commented 1 year ago

Thanks for the details.

Yes, looking at the code for vite-tsconfig-paths, it seems like it could be interfering with vite-plugin-singlefile: https://github.com/aleclarson/vite-tsconfig-paths/blob/master/src/index.ts#L20-L49

@humbleCoder1990 Does your project output a single HTML file after running both plugins? Or does it fail completely and output a regular build bundle?

Can you provide a minimal reproduction repository? Make a copy of your project where you get this issue, and remove all sensitive details plus irrelevant code and config. Then publish this as a public GitHub repository that we can use to debug this.

Without a reproduction, this will be hard to fix.