Lighthouse crossorigin warnings despite using this plugin

[styxlab]

Thanks a lot for providing this plugin!

I'm using Lighthouse 6.1.0 from the command line (also tested it with LH 6.0.0 and chrome devtools) and cannot figure out how to get rid of multiple warnings of the form:

A preload <link> was found for "http://localhost:9000/page-data/app-data.json" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

Note that I am using the gatsby-plugin-preload-link-crossorigin plugin. The plugin does add the crossorigin attribute to the preload links, but the warning remains. Looks like the gatsby-offline plugin kicks in, which I want to keep.

Steps to reproduce

Clone the standard gatby-starter-blog, but with gatsby-plugin-preload-link-crossorigin and gatsby-plugin-offline added:

$ git clone https://github.com/styxlab/gatsby-starter-blog.git
$ cd gatsby-starter-blog
$ yarn; yarn build
$ gatsby serve
$ lighthouse http://localhost:9000 --only-categories=performance --view

Remove preload-link-crossorigin and offline-plugin

$ git checkout remove-preload-link-crossorigin
$ yarn clean; yarn build
$ gatsby serve
$ lighthouse http://localhost:9000 --only-categories=performance --view

This looks good, but I had to remove the offline-plugin which I need.

Add the preload-link-crossorigin plugin again (offline plugin removed)

$ git checkout remove-offline
$ yarn clean; yarn build
$ gatsby serve
$ lighthouse http://localhost:9000 --only-categories=performance --view

Now the warning is appearing again, even without the offline plugin, so it looks like gatsby-plugin-preload-link-crossorigin is causing the issue instead of solving it.

I hope you can give some insight as to why this plugin does not have the desired effects. Thanks for your time!

[NoriSte]

First of all, thanks for the detailed feedback, this is a perfect issue-reporting 😊 I link #351 where we discussed it and if you want to add minimatch and raising a PR you're more than welcome 😊

[styxlab]

Thanks for looking into this. Are you sure #351 is the same root cause?

[NoriSte]

I think so, you could try to change the code of the plugin checking if the problem disappears. In order to do so:

• open node_modules/gatsby-plugin-preload-link-crossorigin/gatsby-ssr.js
• replace

if (component.type === "link" && component.props && component.props.rel === "preload") {

with

if (component.type === "link" && component.props && component.props.rel === "preload" && !component.props.href.startsWith("/")) {

and check if Gatsby reports the same error.

Please let us know, thanks @styxlab 😊

[styxlab]

Thanks for your suggestion, but I won't have time to follow up on this. I think the issue should be solved upstream - however, your plugin could serve as a transient solution after being enhanced.

[NoriSte]

Don't you have the time to try the change I suggested? It's just a matter of a file change and a npm run serve/build 😊 anyway, thanks for the detailed report 😉

[lvtz]

@NoriSte

and check if Gatsby reports the same error.

I can confirm that is not resolved this issue. After applying your suggested patch seems to don't get an expected result.

I haven't noticed this issue on the localhost, faced it on production build, with the newest Google Chrome and Vercel.

I have also using the gatsby-plugin-offline plugin for gatsby.

[mbcod3]

I think the console warning is caused by crossorigin being empty and not set to anonymouse on a production build. This plugin is also not setting crossorigin to anyonymous because after using it the links still have crossorigin="".

This plugin is not solving the issue.

[NoriSte]

As reported on MDN

Setting the attribute name to an empty value, like crossorigin or crossorigin="", is the same as anonymous.

Could you check out if setting it to anonymous produce any relevant change, please? It shouldn't

[mbcod3]

You are right mdn does say that but the thing is after using the plugin I still get the same error.

What exactly does your plugin do? Can you add crossOrigin="use-credentials" instead to thos preload scripts with your plugin?

[NoriSte]

I'm thinking about deprecating this module since it's more an annoyance than a help 😉

[NoriSte]

Done, I deprecated this package 😉