Duplicate <link rel='preload'> and <script>, Browser warning to add "crossoriging" to link and "as" to script for Nuxt generated page sources

[Envoy49]

Discussed in nuxt/nuxt#10612

^{Originally posted by Envoy49 August 1, 2022}
Hi, I have got two types of browser warnings asking me to add "crossorigin" and "as" to the relevant preloaded JS resources created by NUXT itself.
I have done all research I could, tried different webpack configurations and failed all the time.
I don't understand what is the problem and what is the source of it? Is it because of nuxt-bridge I am using?
Seen similar problems but people had access to the html tag to be able to add missing property, in my case I don't understand how I can manipulate it.

Using : "nuxt-edge": "^2.16.0-27358576.777a4b7f" and "@nuxt/bridge": "npm:@nuxt/bridge-edge", node version: 14.8

I think that I should be able to fix it in nuxt.config but not sure what needs to be done. Will appreciate any help

UPDATE:
I am getting script tags with "as" in the page source. Wondering why the warning still appearing in the console

    <link rel="preload" href="/_nuxt/app~._.nuxt_A.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._.nuxt_A.css" as="style" />
    <link rel="preload" href="/_nuxt/app~._a.css" as="style" />
    <link rel="preload" href="/_nuxt/app~._a.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._l.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._layouts_d.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._n.js" as="script" />
    <link
      rel="preload"
      href="/_nuxt/app~._node_modules_atlas_node_modules_vue_dist_vue.runtime.esm.js~8cb01656.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_nuxt/app~._node_modules_atlas_src_c.js"
      as="script"
    />
    <link rel="preload" href="/_nuxt/app~._node_modules_ba.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._node_modules_c.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._node_modules_h.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._node_modules_i.js" as="script" />
    <link rel="preload" href="/_nuxt/app~._node_modules_vue-c.js" as="script" />
    <link
      rel="preload"
      href="/_nuxt/app~._node_modules_vue_dist_vue.runtime.esm.js~6acccc03.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_nuxt/header-bar-mobile-menu~._node_modules_atlas_src_components_HeaderBar_HeaderBarMobileMenu.vue~0.js"
      as="script"
    />
    <link rel="preload" href="/_nuxt/pages/index~._c.css" as="style" />
    <link rel="preload" href="/_nuxt/pages/index~._c.js" as="script" />
    <link
      rel="preload"
      href="/_nuxt/pages/_~pages/index~pages/preview/_~pages/search~._c.js"
      as="script"
    />
    <link rel="preload" href="/_nuxt/0.js" as="script" />

I can see this PR ----> nuxt/nuxt#7709 merged back in 2020, related to missing "crossorigin"
Wondering if it fixed issue and I am not using the version which has it missing.

UPDATE:

I just discovered that the same scripts are at the bottom of my page and has "crossorigin" attribute.
So basically first error is coming from the HEAD html tag where I got all my preloaded scripts without "crossorigin" tag and the second error message is coming from bottom of the page where I have "crossorigin" tag withouth "as".

    <script src="/_nuxt/app~._.nuxt_A.js" defer crossorigin></script>
    <script src="/_nuxt/app~._a.js" defer crossorigin></script>
    <script src="/_nuxt/app~._la.js" defer crossorigin></script>
    <script src="/_nuxt/app~._m.js" defer crossorigin></script>
    <script src="/_nuxt/app~._n.js" defer crossorigin></script>
    <script src="/_nuxt/app~._node_modules_an.js" defer crossorigin></script>
    <script
      src="/_nuxt/app~._node_modules_atlas_src_c.js"
      defer
      crossorigin
    ></script>
    <script src="/_nuxt/app~._node_modules_ba.js" defer crossorigin></script>
    <script src="/_nuxt/app~._node_modules_c.js" defer crossorigin></script>
    <script src="/_nuxt/app~._node_modules_h.js" defer crossorigin></script>
    <script src="/_nuxt/app~._node_modules_i.js" defer crossorigin></script>
    <script src="/_nuxt/app~._node_modules_vue-c.js" defer crossorigin></script>
    <script
      src="/_nuxt/app~._node_modules_vue_dist_vue.runtime.esm.js~6acccc03.js"
      defer
      crossorigin
    ></script>

[Envoy49]

Updating nuxt-edge and nuxt-bridge to the latest versions didn't help to solve the problem.

"@nuxt/bridge-edge": "^3.0.0-27657000.c87fdbe",
"nuxt-edge": "^2.16.0-27616340.013f051b",

[Envoy49]

tried

  router: {
    prefetchLinks: false
  }

and

  render: {
    resourceHints: false
  }
  

and

 optimization: {
      sideEffects: false,
  }

and

export default {
  head: {
    script: [
      {
        src:
          'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver',
        body: true
      }
    ]
  }
} 

didn't work

Tried preload-webpack-plugin, couldn't make it work

Couldn't also make this parameter work:

  output: {
    crossOriginLoading: "anonymous",
  },

[Envoy49]

Hi @danielroe ,
Thanks for moving this to the correct repo. I was wondering if you could give me some clue or hint to move in certain direction?

[danielroe]

This will be fixed when we upgrade to the new version of vue-bundle-renderer.

[duboloms]

@danielroe Do you know how long it will take?

[danielroe]

Should be this week.

[duboloms]

@danielroe I hope all will be fine and soon :)

[kissu]

@duboloms please bit a bit patient. 😺 🤗

[antlionguard]

@duboloms please bit a bit patient. 😺 🤗

@danielroe I hope all will be fine and soon :)

vue-bundle-renderer will be updated with #461. But this pr has got some error on testing process. They will be merge pr after the errors are fixed.

[Envoy49]

@danielroe, I was wondering if this is available for upgrade yet or it hasn't been released yet? Which version I should update it to?

[antlionguard]

Same. I installed latest version but vue-bundle-renderer still 0.3.9

[danielroe]

Yes, the automatic release didn't trigger for some reason.

[Envoy49]

@danielroe, could you please let us know when the release will be available?

[Envoy49]

@danielroe Sorry, do we have any news on this one being released? Should we keep this open?

[danielroe]

Apologies @Envoy49 🙏 This should be released in the latest edge version.

[Envoy49]

Thanks for your hard work @danielroe , can confirm that it has been fixed.

[DulcePC]

I'm using nuxt3, where I had the same problem, I changed the ssr to true, I know the problem comes from the preload but I really don't know why this fixed the problem.