search

jxnblk / mdx-go

:zap: Lightning fast MDX-based dev server for progressive documentation
https://mdx-go.now.sh
MIT License
364 stars 27 forks source link

Is there a way to replace the template used in HTMLPlugin? #31

Closed dzrw closed 5 years ago

dzrw commented 5 years ago

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?

jxnblk commented 5 years ago

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

dzrw commented 5 years ago

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).