Nuxt bridge is not adding the head metadata into the initial loading HTML file. #20

sasanksasi · 2022-03-18T19:41:57Z

Environment

Nuxt CLI v3.0.0-27460146.2ad93eb
RootDir: /projects/nuxt
Nuxt project info:

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 2.16.0-27358576.777a4b7f
Package Manager: [email protected]
Builder: webpack
User Config: telemetry, ssr, bridge, head, env, loading, css, plugins, router, modules, axios, build, buildModules, server
Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
Build Modules: @nuxtjs/[email protected], @nuxt/[email protected]

Reproduction

Updated package.json as follows:
"nuxt": "^2.14.12", -> "nuxt-edge": "latest",

+"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27460146.2ad93eb",
+"@nuxt/devalue": "^2.0.0",
+"std-env": "^3.0.1", -- added because of #175

"dev": "nuxi dev",

npm run dev

Describe the bug

Nuxt bridge is not adding the head metadata into the initial loading HTML file.

Following is config after upgrade:

import { defineNuxtConfig } from "@nuxt/bridge";

export default defineNuxtConfig({
  telemetry: false,
  ssr: false,
  /*
   ** Headers of the page
   */
  head: {
    title: 'name',
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: pkg.description },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons",
      },
    ],
    script: [
      { src: "https://unpkg.com/lodash@latest/lodash.min.js" },
      { src: "https://unpkg.com/dayjs@latest/dayjs.min.js" },
    ],
  },
});

After using bridge

Before using bridge

Additional context

No response

Logs

 WARN  Compiled with 1 warnings                                                                                             friendly-errors 11:51:27


 WARN  in ./node_modules/fflate/esm/index.mjs                                                                               friendly-errors 11:51:27

Module not found: Error: Can't resolve 'worker_threads' in '/Users/sasank/Documents/adt/projects/erp-nuxt/node_modules/fflate/esm'
                                                                                                                            friendly-errors 11:51:27
ℹ Waiting for file changes                                                                                                                  11:51:27
✔ Nitro built in 313 ms

The text was updated successfully, but these errors were encountered:

yulafezmesi · 2022-04-05T14:42:19Z

same here

sankhagowit · 2022-06-17T03:19:38Z

I am having a similar issue with missing head meta tags after transitioning a Nuxt 2 SPA ssr: false that was using @nuxtjs/composition-api to nuxt-bridge using Nuxt CLI v3.0.0-rc.4-27588443.cf25525

When deploying the site to production on Vercel the Social Cards that are set using meta tags in nuxt.config.js no longer work and the <head> tag is empty on the initial HTML File (screenshot below of curl on the production app using nuxt-bridge)

Something else I've noticed. Upon inspecting the source of the nuxt-bridge production site after the SPA has loaded all the meta tags. For Nuxt-bridge all of the meta tags are towards the bottom of <head> after all of the <style> and <link> tags where the <meta> tags used to be at the top of <head> in Nuxt 2 and in the order in which they were specified in the nuxt.config.js.

Not sure if order matters in <head> but regardless the order is now different in nuxt-bridge, perhaps a clue to the underlying issue here.

bdeo · 2022-06-18T15:09:46Z

I'm also having this issue attempting to upgrade from nuxt 2 to nuxt bridge. Are there any known work arounds for now?

EDIT: #27 (comment) appears to fix this for now.

MartinX3 · 2022-07-09T14:01:17Z

Is there a known way to inject the meta stuff manually in the head of the index.html?
maybe some hook I could add?

Edit:
Either I do it wrong or the generate:page hook doesn't work anymore.
I try to edit the html variable, but the generated index.html stays the same @danielroe .

Edit0:
I try to use

bridge: {
	meta: true
}

but it throws the error @vueuse/head not found.
Manually installing throws the error that it needs vue 3.x.
I manually forced the installation of the package.

Using it like in the bridge docs also doesn't work.
There is still no content in the <head> section.

It seems that I need to add a hook outside of the nuxtJS framework to add the needed <meta> in the <head> section.

Edit1:
Finally a working workaround to add the header back:

    hooks: {
        generate: {
            done(generator) {
                let extraFilePath = path.join(generator.distPath, 'index.html')
                fs.writeFileSync(
                    extraFilePath,
                    fs
                        .readFileSync(extraFilePath)
                        .toLocaleString()
                        .replace(
                            '<head>',
                            `<head>
<title>Title</title>
<meta data-n-head="1" charset="utf-8">
<meta data-n-head="1" content="width=device-width,initial-scale=1" name="viewport">
<meta data-n-head="1" content="" data-hid="description" name="description">
<meta data-n-head="1" content="telephone=no" name="format-detection">
<link data-n-head="1" href="/favicon.ico" rel="icon" type="image/x-icon">`
                        )
                )

                extraFilePath = path.join(generator.distPath, '200.html')
                fs.writeFileSync(
                    extraFilePath,
                    fs
                        .readFileSync(extraFilePath)
                        .toLocaleString()
                        .replace(
                            '<head>',
                            `<head>
<title>Title</title>
<meta data-n-head="1" charset="utf-8">
<meta data-n-head="1" content="width=device-width,initial-scale=1" name="viewport">
<meta data-n-head="1" content="" data-hid="description" name="description">
<meta data-n-head="1" content="telephone=no" name="format-detection">
<link data-n-head="1" href="/favicon.ico" rel="icon" type="image/x-icon">`
                        )
                )
            },
        },
    },

But it's still broken, if I access a url path directly instead via the router.
It will result in an html file with empty <head>.

Edit2:
A better solution is to create a app.html file at the root of your project:

<!-- TODO WORKAROUND FOR https://github.com/nuxt/bridge/issues/20
REMOVE FILE AFTER FIXED!-->
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
  {{ HEAD }}
  <title>Title</title>
  <meta data-n-head="1" charset="utf-8">
  <meta data-n-head="1" content="width=device-width,initial-scale=1" name="viewport">
  <meta data-n-head="1" content="" data-hid="description" name="description">
  <meta data-n-head="1" content="telephone=no" name="format-detection">
  <link data-n-head="1" href="/favicon.ico" rel="icon" type="image/x-icon">
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

wattanx · 2023-06-11T01:05:57Z

This does not appear to be occurring in the latest version.
Let me know if not; I'm happy to reopen.

Signed-off-by: Martin Dünkelmann <[email protected]>

onlurking · 2023-06-28T19:14:01Z

Hey @wattanx, bug still happens within the latest version when using ssr: false, I just created a minimal repo for testing:
https://github.com/onlurking/nuxt-bridge-meta-poc

Ouput when using ssr: false:

<!DOCTYPE html>
<html >
  <head >
    <link rel="modulepreload" as="script" crossorigin href="/_nuxt/1b8a5db.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/2b79740.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/7ce7b7d.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/d7f6c67.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/1fa85a8.js">
  </head>
  <body >
    <div id="__nuxt"></div><script>window.__NUXT__=(function(a,b){return {serverRendered:false,config:{public:{},app:{baseURL:a,basePath:a,assetsPath:b,cdnURL:"",buildAssetsDir:b}}}}("\u002F","\u002F_nuxt\u002F"))</script><script type="module" src="/_nuxt/1b8a5db.js" crossorigin></script><script type="module" src="/_nuxt/2b79740.js" crossorigin></script><script type="module" src="/_nuxt/7ce7b7d.js" crossorigin></script><script type="module" src="/_nuxt/d7f6c67.js" crossorigin></script>
  </body>
</html>

With ssr: true:

<!DOCTYPE html>
<html >
  <head >
    <title>Nuxt.js starter for CSB</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Official Nuxt.js starter for CodeSandBox"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/5452fdc.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/ae4ca0a.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/bc5cfe3.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/d7f6c67.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/1fa85a8.js"><style data-vue-ssr-id="38b0ce29:0">.nuxt-progress{background-color:#000;height:2px;left:0;opacity:1;position:fixed;right:0;top:0;transition:width .1s,opacity .4s;width:0;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}</style>
  </head>
  <body >
    <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div></div></div></div><script>window.__NUXT__=(function(a,b){return {layout:"default",data:[{}],fetch:{},error:null,serverRendered:true,routePath:a,config:{public:{},app:{baseURL:a,basePath:a,assetsPath:b,cdnURL:"",buildAssetsDir:b}},_asyncData:{},_errors:{}}}("\u002F","\u002F_nuxt\u002F"))</script><script type="module" src="/_nuxt/5452fdc.js" crossorigin></script><script type="module" src="/_nuxt/ae4ca0a.js" crossorigin></script><script type="module" src="/_nuxt/bc5cfe3.js" crossorigin></script><script type="module" src="/_nuxt/d7f6c67.js" crossorigin></script>
  </body>
</html>

Using bridge: { meta: true } doesn't work either.

Versions:

Nuxt: both "nuxt": "^2.17.0" and "nuxt-edge 2.17.1-28131860.8edc36e"
@nuxt/bridge "nuxt/bridge-edge@^3.0.0-28132497.798694a"
Node: v16.20.0

sasanksasi added bridge pending triage labels Mar 18, 2022

danielroe removed the pending triage label Mar 21, 2022

danielroe mentioned this issue Apr 13, 2022

Page css loads after a few seconds. nuxt/nuxt#13331

Closed

danielroe transferred this issue from nuxt/framework Apr 13, 2022

danielroe mentioned this issue Jul 9, 2022

render <head> with ssr: false #396

Closed

danielroe added bug Something isn't working 🔨 p3-minor-bug labels Jul 9, 2022

MartinX3 mentioned this issue Jul 9, 2022

Garbage .js files if using pinia store or date-holidays #395

Closed

nmackey mentioned this issue Oct 6, 2022

Nitro required for RC-11? #576

Closed

wattanx closed this as completed Jun 11, 2023

MartinX3 added a commit to Rad-Touristik-Club-Koln-e-V-1972/Rad-Touristik-Club-Koln-e-V-1972.github.io that referenced this issue Jun 15, 2023

refactor: remove workaround for issue nuxt/bridge#20

243d652

Signed-off-by: Martin Dünkelmann <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nuxt bridge is not adding the head metadata into the initial loading HTML file. #20

Nuxt bridge is not adding the head metadata into the initial loading HTML file. #20

sasanksasi commented Mar 18, 2022 •

edited

Loading

yulafezmesi commented Apr 5, 2022

sankhagowit commented Jun 17, 2022

bdeo commented Jun 18, 2022 •

edited

Loading

MartinX3 commented Jul 9, 2022 •

edited

Loading

wattanx commented Jun 11, 2023

onlurking commented Jun 28, 2023 •

edited

Loading

Nuxt bridge is not adding the head metadata into the initial loading HTML file. #20

Nuxt bridge is not adding the head metadata into the initial loading HTML file. #20

Comments

sasanksasi commented Mar 18, 2022 • edited Loading

Environment

Reproduction

Describe the bug

Additional context

Logs

yulafezmesi commented Apr 5, 2022

sankhagowit commented Jun 17, 2022

bdeo commented Jun 18, 2022 • edited Loading

MartinX3 commented Jul 9, 2022 • edited Loading

wattanx commented Jun 11, 2023

onlurking commented Jun 28, 2023 • edited Loading

sasanksasi commented Mar 18, 2022 •

edited

Loading

bdeo commented Jun 18, 2022 •

edited

Loading

MartinX3 commented Jul 9, 2022 •

edited

Loading

onlurking commented Jun 28, 2023 •

edited

Loading