Is there a way to replace the template used in HTMLPlugin?
dzrw opened this issue · comments
I've got a script that needs to be loaded in the head before the <App /> is rendered. The library I'm trying to load a sets a global variable. When trying to pass that variable as a prop to a component in the MDX file, timing conflicts with <Head /> result in the variable being undefined during the time that the component is processing. This seems like a race condition. Shouldn't the <Head /> component in <Root /> always be resolved first?
However, when I hack up the defaultTemplate in HTMLPlugin to hard-code my script in the actual head, then the page works as expected.
Therefore, it seems like I need to replace the HTMLPlugin's template with my own custom version, but I don't see a way to do that through the local webpack.config.js.
My dirty workaround is to install mdx-go into the local project dir, and apply a patch directly to defaultTemplate. I'd like to avoid that if possible.
Any ideas?
Generally speaking, you shouldn't try to consume global variables within a React component. Sicne mdx-go is really meant to be a zero-config utility, it doesn't support configuring things like the HTML template. If you do need more customization, I'd suggest looking into using Gatsby
That's a shame. Dirty hacks will have to suffice.
FWIW, properties on window are reliably available to React components after componentDidMount (or the useEffect hook).