Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

inject <script> in rendered HTML when ssr: false #14172

Closed
GabriMcNab opened this issue Jun 16, 2022 · 6 comments
Closed

inject <script> in rendered HTML when ssr: false #14172

GabriMcNab opened this issue Jun 16, 2022 · 6 comments
Assignees
@pi0
Labels
3.x enhancement 🍰 p2-nice-to-have workaround available

Comments

@GabriMcNab
Copy link

Environment

Nuxt project info: 11:29:52

  • Operating System: Darwin
  • Node Version: v14.18.1
  • Nuxt Version: 3.0.0-rc.1
  • Package Manager: npm@6.14.15
  • Builder: vite
  • User Config: typescript, modules, ssr, app, css, vite
  • Runtime Modules: @pinia/nuxt@0.1.9
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ztv7ch-3v2mxy?file=nuxt.config.ts

Describe the bug

As described here: https://github.com/nuxt/framework/discussions/5476. I need to inject a script in the <head> tag, to be able to set some runtime configuration on the global window object.

I'm injecting the script using the nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false, 
  typescript: {
    shim: false,
  },
  modules: ["@pinia/nuxt"],
  app: {
    head: {
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
      script: [
        {
          // injects the config based on the environment
          src: "/static/config/config.js",
        },
      ],
    },
  },
  vite: {
    plugins: [svgLoader()],
  },
});

config.js:

window.config = {
  ENV: "dev",
  API: {
    EXPERIENCE_RAW_SERVICE_BASE_URL: "https://experience-raw-service.dev.company.com",
  },
};

The new meta module injects this script at runtime (as you can see, there is no <script> tag in the html output):

<!DOCTYPE html>
<html >

<head >
  <link rel="stylesheet" href="/_nuxt/entry.983043ac.css">
</head>

<body >
  <div id="__nuxt"></div><script>window.__NUXT__={serverRendered:false,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}}}</script><script type="module" src="/_nuxt/entry-3549318c.mjs"></script>
</body>

</html>

The problem is that this script should be executed before anything else. But as you can see in the repro project, if I'm trying to access window.config in a Plugin, I get undefined.
This is because some of the application code is run before the config.js script is injected in the <head>.

There should be a way to run this script before anything else in the page.

Note: This issue is related to "client side only" projects (ssr: false), setting ssr: true solves this issue.

Additional context

No response

Logs

No response
@danielroe danielroe changed the title <script> injected in <head> tag cannot be executed before application code inject <script> in rendered HTML when ssr: false Jun 16, 2022
@JulianMar
Copy link
Contributor

It looks like to be caused by adding the meta in a plugin. https://github.com/nuxt/framework/tree/main/packages/nuxt/src/head

I want to try to fix it, I think you could fix it by moving the adding of the meta to the module instead of the plugin. should I just check if it's not a ssr build and then just push it to the html?
I Would really like some feedback before I start.

@danielroe danielroe mentioned this issue Jan 19, 2023
Closed
@Harm-Nullix

This comment was marked as outdated.

Sign in to view
@pi0
Copy link
Member

pi0 commented Aug 12, 2022 •
edited

Using the new render:html hook (#14569), it is now easily possible to inject some scripts universally:

// server/plugins/render.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    html.head.push('<script src="/config.js"></script>');
  });
})

Sandbox: https://stackblitz.com/edit/github-86cqr7-vvdzwx?file=server%2Fplugins%2Frender.ts,app.vue,public%2Fconfig.js,nuxt.config.ts

@WhiteR4bbitt WhiteR4bbitt mentioned this issue Jan 19, 2023
Closed
@danielroe Volta.net
Copy link
Member

@pi0 Shall we close this then?

@pi0
Copy link
Member

pi0 commented Sep 12, 2022

Let's keep it open until introduce tag utils for a complete solution for nuxt/framework#5553.

@pi0 pi0 self-assigned this Sep 12, 2022
@danielroe danielroe mentioned this issue Oct 21, 2022
Closed
@harlan-zw harlan-zw mentioned this issue Nov 14, 2022
Merged
7 tasks
@danielroe danielroe added the 3.x label Jan 19, 2023
@JulianMar JulianMar mentioned this issue Jan 19, 2023
Closed
7 tasks
@danielroe danielroe transferred this issue from nuxt/framework Jan 19, 2023
@danielroe
Copy link
Member

This was implemented in nuxt/framework#8975.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pi0 pi0

Labels
3.x enhancement 🍰 p2-nice-to-have workaround available
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(head): inject <script> in rendered HTML when ssr: false JulianMar/framework
5 participants
@pi0 @danielroe @JulianMar @GabriMcNab @Harm-Nullix