Giters

lisonge / vite-plugin-monkey

A vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat

Repository from Github https://github.comlisonge/vite-plugin-monkeyRepository from Github https://github.comlisonge/vite-plugin-monkey

Is it possible to opt out of SystemJS usage when using async/await imports? And/or cleanup error messages

blakehurd opened this issue · comments

commented

This is a minor issue (cosmetic, more than functional), but I thought I'd bring it up as it adds noise to the error logs and some unnecessary HTTP requests in my use case. I'd also like to remove the @require on SystemJS assuming I don't actually need them.

When a userscript is using iframes and supporting Greasemonkey compatibility, using async imports of css instead of static imports is beneficial, to ensure the CSS is added correctly/at the right time. When importing CSS in this manner, it works and I can use .default to get the CSS. However, the SystemJS invocation from the vite-plugin-monkey created code seems to largely fail with a couple of noisy error logs.

Omitted the origin/full URLs as they're not relevant.

mainline:1 Access to script at '.../style-7450c90d-aca50956.js' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
.../style-7450c90d-aca50956.js:1       
       Failed to load resource: net::ERR_FAILED
3userscript.html?name=....user.js&id=fcd33a59-d9b7-49ee-9892-8566aad7de97:5 Uncaught (in promise) Error: Error loading .../style-7450c90d-aca50956.js (SystemJS Error#3 https://github.com/systemjs/systemjs/blob/main/docs/errors.md#3)

The .css being imported in this way does not have a corresponding .js file, so I'm not sure why vite-plugin-monkey is trying to load it in this fashion, unless it's trying to polyfill for older browsers (based on my reading of what SystemJS does).

commented 
import cssText from './your_style.css?inline'

const style = document.createElement('style')
style.textContent = cssText

if(your_condition){
  document.head.append(style)
}
commented

Thanks! Looks like I had everything except I didn't know about the ?inline flag. That seems to do exactly what I wanted.

FYI, there's an eslint unresolved module error with this approach for some reason (addition of ?inline perhaps?). The plugin seems to work fine/as expected though, so I just ignored the errors.