GoogleChromeLabs / prerender-loader

📰 Painless universal pre-rendering for Webpack.
https://npm.im/prerender-loader
Apache License 2.0
1.9k stars 50 forks source link

Allow defining custom env variables for the prerender build #54

Closed pimterry closed 3 years ago

pimterry commented 3 years ago

It's useful to be able to customize the prerender build with custom environment variables. There's two main reasons for this:

In my case it's the latter: I'm using styled-components, which doesn't work with server rendering unless their 'Speedy' mode (which manages the CSSOM directly without serializing anything to the DOM) is disabled. Their logic that handles this is here: https://github.com/styled-components/styled-components/blob/25d5a87c6bb5d22b1157c2355bd971e434ec2093/packages/styled-components/src/constants.ts#L15-L31. It checks when initially imported for various environment variables that can be used to disable this, and that code runs before my entrypoint. This makes it very difficult to disable for SSR but enable for production with the current setup!

With this PR, styled components prerenders correctly and retains speedy mode in production builds given this webpack rule:

{
  test: INDEX_HTML,
  use: [{
    loader: 'prerender-loader',
    options: {
      string: true,
      env: {
        SC_DISABLE_SPEEDY: 'true'
      }
    }
  }]
}