Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Turn off System.fetch for SystemJS await dynamic imports? #178

Open
blakehurd opened this issue Aug 6, 2024 · 5 comments
Open

Turn off System.fetch for SystemJS await dynamic imports? #178

blakehurd opened this issue Aug 6, 2024 · 5 comments

Comments

@blakehurd
Copy link

Same "issue" as the CSS flavor of the issue, except CSS can be flagged with ?inline to skip the issue (as you noted). The issue is unnecessary fetch() calls that consistently fail to load the registered ".js" keys and unnecessary error logs, while the provided javascript is loaded in properly.

I'm using an inline inject of SystemJS, but it doesn't look like I can override System.shouldFetch (unless I forked the plugin which I'd rather not do). Any thoughts on how to avoid these errors?

@lisonge
Copy link
Owner

lisonge commented Aug 6, 2024

Since your build output is just a single file, I suggest that any side effects in your code should not be placed in the module scope but rather in the function scope within JavaScript. This way, the user can control it by manually calling the functions. In summary, avoid using dynamic modules and use functions instead

@blakehurd
Copy link
Author

blakehurd commented Aug 6, 2024

The dynamic imports are on modules loaded from npm, using a vite mode flag to decide whether it is imported. Done in this manner, the userscript is (intentionally) larger when the mode flag is on, and smaller when the mode flag is off (no dynamic module is imported).

What I'm asking about seems to be an issue in how SystemJS is invoked -- it shouldn't have to load the module via fetch when it already has the javascript itself available to load in?

@lisonge
Copy link
Owner

lisonge commented Aug 6, 2024

The dynamic imports are on modules loaded from npm

what is the package name and example code ?

@blakehurd
Copy link
Author

blakehurd commented Aug 6, 2024

I'll see about providing a small example when I have a moment.

effectively:

  1. take a dependency on any npm package. For my case, it was TomSelect
  2. use a vite build env flag (https://vitejs.dev/guide/env-and-mode) to selectively dynamic import the npm package, e.g. TomSelect in (1).
  3. Observe that when the flag is on, the userscript provided will import TomSelect and when the flag is off, the userscript will not import TomSelect (saving space). We can call these script modes A and B respectively.

When A is installed and TomSelect is imported, there will be fetch() attempts and failures for the entry point .js and TomSelect (or any other NPM module loaded in this way), but the javascript will still be loaded in and work correctly. The error logs add noise, and the network calls create unnecessary traffic to the origin the userscript is running on.

When B is installed, there's no dynamic imports active, so SystemJS isn't loaded in, and no entry point .js is created or npm module .js. There's no faulty fetch() calls or error logs in this situation.

@blakehurd
Copy link
Author

blakehurd commented Aug 6, 2024

I would expect your playground example https://github.com/lisonge/vite-plugin-monkey/blob/main/playground/dynamic-import/src/main.ts to show the same error logs and faulty fetch attempts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants