title: How setup react-helmet with Server Side Rendering?
body: <p>I've been trying to setup react-helmet with server-side-rendering. I followed the docs and some blog posts on how to setup react-helmet with SSR, but have been unable to produce the desired results. Here's a code snippet of how I'm rendering the App:</p>
  
  <pre><code>import React from 'react';
  import { renderToString } from 'react-dom/server';
  import App from './src/App';
  const express = require('express');
  
  const app = express();
  app.get('*', (req, res) =&gt; {
    const app = renderToString(&lt;App /&gt;);
    const helmet = Helmet.renderStatic();
  
    res.send(formatHTML(app, helmet));
  })
  
  function formatHTML(appStr, helmet) {
    return `
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          ${helmet.title.toString()}
          ${helmet.meta.toString()}
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id="root"&gt;
            ${ appStr }
          &lt;/div&gt;
          &lt;script src="./bundle.js"&gt;&lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
    `
  }
  </code></pre>
  
  <p>When I run the above code, I get an error saying 'cannot use import statement outside a module'. Is it possible to use both es5 and es6 syntax at the same time? Or is there is better way to setup React-helmet?</p>
  
  <p>This is my babel configuration file</p>
  
  <pre><code>{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false
        }
      ],
      "@babel/preset-react",
      "@babel/preset-flow"
    ],
    "env": {
      "development": {
        "only": [
          "app",
          "internals/scripts"
        ],
        "plugins": [
          "@babel/plugin-transform-react-jsx-source"
        ]
      },
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "@babel/plugin-transform-react-constant-elements",
          "@babel/plugin-transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    },
    "compact": true,
    "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      "@babel/plugin-syntax-import-meta",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-proposal-json-strings",
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "@babel/plugin-proposal-function-sent",
      "@babel/plugin-proposal-export-namespace-from",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-throw-expressions",
      "@babel/plugin-proposal-export-default-from",
      "@babel/plugin-proposal-logical-assignment-operators",
      "@babel/plugin-proposal-optional-chaining",
      [
        "@babel/plugin-proposal-pipeline-operator",
        {
          "proposal": "minimal"
        }
      ],
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-do-expressions",
      "@babel/plugin-proposal-function-bind",
      "lodash"
    ]
  }
  </code></pre>