Inject scripts into html file on build in JSX? #9850

jcubic · 2024-02-15T12:20:18Z

jcubic
Feb 15, 2024

This is similar to Custom index.html but instead of my custom HTML, I want to modify it at build time to add script and styles.

I have this code:

export default function Interpreter(): JSX.Element {
    const { siteConfig } = useDocusaurusContext();
    const prod = process.env.NODE_ENV === 'production';
    useScripts(prod ? [] : [
        'https://cdn.jsdelivr.net/<some_file>.js`
    ]);
    return (
        <>
          <Head>
            <link rel="preconnect" href="https://cdn.jsdelivr.net" />
            <link href="https://cdn.jsdelivr.net/<some_file>.css" rel="stylesheet"/>
            {prod && <>
              <script src="https://cdn.jsdelivr.net/<some_file>.js"/>
            </>}
          </Head>
         ...
      </>
   );
}

and the Interpreter is used in src/pages/index.tsx.

What I would expect is the HTML code to have the script I have in <Head>.

Is there a way to have my script and styles in the output HTML file for index.html when building the project? I have some runtime JavaScript that is outside of React.

slorber · 2024-02-15T14:52:36Z

slorber
Feb 15, 2024
Collaborator

Plugins lifecycles allow you to add such head tags:
https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis#injectHtmlTags

Take a look at some plugins such as the gtag/gtm ones for inspiration.

What I would expect is the HTML code to have the script I have in .

The <Head> should also enable that. If that's not the case, please prove it by creating a https://docusaurus.new repro

I don't know what useScripts() is, that does not look like a Docusaurus API so we can't provide support for this

6 replies

slorber Feb 15, 2024
Collaborator

Also how I'm supposed to reproduce the issue with prod on CodeSandbox?

You modify the sandbox to reproduce the issue, hit save, and then share with me the url of your sandbox

I usually prefer StackBlitz sandbox, recently I've found it more reliable than codesandbox:
https://stackblitz.com/github/facebook/docusaurus/tree/main/examples/classic-typescript

If it's too complicated to use a sandbox, feel free to provide a repro based on this template:

https://github.com/slorber/docusaurus-starter

(you can fork it and modify your fork)

jcubic Feb 15, 2024
Author

I was able to run build and serve from CodeSandbox but I'm not able to reproduce the issue. The code seems the same: https://codesandbox.io/p/devbox/morning-bush-9dzlc6?file=%2Fsrc%2Fpages%2Findex.tsx%3A8%2C1 I'm snot ure why but locally the scripts in Head don't load.

Do I need to setup something special to make it work?

jcubic Feb 15, 2024
Author

I'm not sure what I did, but now the scripts don't run at all:

https://codesandbox.io/p/devbox/morning-bush-9dzlc6?file=%2Fsrc%2Fcomponents%2FRun%2Findex.tsx%3A5%2C11

when running build && serve when running start only run2.js runs which is correct.

Can you take a look if I did something wrong? I'm not able to make the scripts run at all.

slorber Feb 15, 2024
Collaborator

In dev there is no SSR/SSG, the html template is kind of empty in the beginning and the React is rendered client-side. That might be why you observe a difference between dev (local?) and prod.

I can't help much on your sandbox because I see a lot of "tests" and I'm not sure what your expectations are for each piece of code.

Please share only one test/sandbox at a time, tell me where to look at (url path, file and code snippet), and tell me exactly what you expect this piece of code to do, and how it differs from what you observe.

jcubic Feb 15, 2024
Author

Both links are the same

Uh oh!

Inject scripts into html file on build in JSX? #9850

Uh oh!

Uh oh!

jcubic Feb 15, 2024

Replies: 1 comment · 6 replies

Uh oh!

slorber Feb 15, 2024 Collaborator

Uh oh!

Uh oh!

slorber Feb 15, 2024 Collaborator

Uh oh!

Uh oh!

jcubic Feb 15, 2024 Author

Uh oh!

jcubic Feb 15, 2024 Author

Uh oh!

Uh oh!

slorber Feb 15, 2024 Collaborator

Uh oh!

Uh oh!

jcubic Feb 15, 2024 Author

jcubic
Feb 15, 2024

Replies: 1 comment 6 replies

slorber
Feb 15, 2024
Collaborator

slorber Feb 15, 2024
Collaborator

jcubic Feb 15, 2024
Author

jcubic Feb 15, 2024
Author

slorber Feb 15, 2024
Collaborator

jcubic Feb 15, 2024
Author