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

Discussed in https://github.com/nuxt/nuxt.js/discussions/10612

<div type='discussions-op-text'>

^{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" />

</div>

I can see this PR ----> https://github.com/nuxt/nuxt.js/pull/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>

[danielroe]

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

[danielroe]

Should be this week.