Crossorigin attribute not added to link prefetch element

devklepacki commented 4 months ago

crossorigin attribute is properly added to the Plausible script tag itself, but not to the link prefetch element:

<link rel="preload" href="https://plausible.io/js/script.js" as="script" integrity="sha256-foobar">

Warning in Chrome console is as follows:

A preload for 'https://plausible.io/js/script.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Here's the script itself for comparison:

<script src="https://plausible.io/js/script.js" async="" defer="" data-domain="foobar.com" integrity="sha256-foobar" crossorigin="anonymous" data-nscript="afterInteractive"></script>

4lejandrito commented 3 months ago

I can't reproduce this. I do not get the <link> element. Can you share how you are using <PlausibleProvider/>?

devklepacki commented 3 months ago

Sure! Maybe that's due to Next 15?

/* package.json */

"next": "15.0.0-rc.0",
"next-plausible": "^3.12.0",
"react": "19.0.0-rc-f994737d14-20240522",

// layout.tsx

import PlausibleProvider from "next-plausible"

...

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pl">
      <head>
        <PlausibleProvider
          domain="foobar.pl"
          integrity="sha256-0yIPQuNDyhSEo..."
          enabled={process.env.VERCEL_ENV === "production"}
          trackOutboundLinks={true}
          taggedEvents={true}
        />
      </head>

I don't insert anything manually. I only use the script itself and a hook in one component:

import { usePlausible } from "next-plausible"
...
export function SearchInput() {
  ...
  const plausible = usePlausible()
  ...
  const performSearch = async (query: string) => {
    ...
    plausible("search", {
      props: { query: encodeURIComponent(query) },
    })
    ...
  }
  ...
}

On my website this inserts the two scripts mentioned in the first post.

4lejandrito / next-plausible

Crossorigin attribute not added to link prefetch element #125