Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

inject `<script>` in rendered HTML when `ssr: false`

See original GitHub issue

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

Issue Analytics

State:
Created a year ago
Reactions:8
Comments:5 (4 by maintainers)

Top GitHub Comments

3reactions

pi0commented, Aug 12, 2022

Using the new render:html hook (https://github.com/nuxt/framework/issues/6571), 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

0reactions

pi0commented, Sep 12, 2022

Let’s keep it open until introduce tag utils for a complete solution for #5553.

Top Results From Across the Web

Next js app with SSR is not pre-rendering HTML, so web ...

js app that uses server side rendering. When running the application both locally and in production (on vercel edge), the initial page response ......

Server-Side Rendering (SSR) - Vue.js

By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components...

How to Disable Server-Side Rendering (SSR) in Next.js

Step 2: Disable SSR for Page Content In the code above, we wrap our page content to a component called SafeHydrate that allows...

How to disable Server-Side Rendering in Next.js

It will not render while server-side rendered HTML is loading up in the browser. With react-no-ssr you could also add preloader image or ......

What's Server Side Rendering and do I need it? - Medium

pages as static HTML, and not have them rendered by JS. ... All that's left to do is to add a proper script...