title: Resolving JSX syntax error when using CRA (create react app)
body: <p>I'm trying to set up server side routing on a React project. Like always, I have used CRA. When I try to run the start command from my terminal, I get the error shown in the screen below:
  <a href="https://i.stack.imgur.com/WF7ug.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WF7ug.png" alt="enter image description here" /></a></p>
  <p>Can anyone help me get past this? I think the problem is that I'm using CRA because from what I've read, there seem to be some extra steps I need to take in order to get my app to read my babel config files when using CRA. I can't quite figure it out though.
  This is what my webpack.config.js file looks like:</p>
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  var nodeExternals = require('webpack-node-externals')
  var browserConfig = {
    entry: './src/browser/index.js',
    output: {
      path: path.resolve(__dirname, 'public'),
      filename: 'bundle.js',
      publicPath: '/'
    },
    module: {
      rules: [
        { test: /\.(js)$/, use: 'babel-loader' },
      ]
    },
    mode: 'production',
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: &quot;true&quot;
      })
    ]
  }
  var serverConfig = {
    entry: './src/server/index.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: __dirname,
      filename: 'server.js',
      publicPath: '/'
    },
    mode: 'production',
    module: {
      rules: [
        { test: /\.(js)$/, use: 'babel-loader' }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: &quot;false&quot;
      }),
    ]
  }
  module.exports = [browserConfig, serverConfig]
  </code></pre>
  <p>This is my index.js file inside the server directory:</p>
  <pre><code>import React from &quot;react&quot;;
  import express from &quot;express&quot;;
  import cors from &quot;cors&quot;;
  import { renderToString } from &quot;react-dom/server&quot;;
  import App from &quot;../App&quot;;
  const port = 8000;
  const server = express();
  server.use(cors());
  server.use(express.static(&quot;public&quot;));
  server.get(&quot;*&quot;, (req, res, next) =&gt; {
    const markup = renderToString(&lt;App /&gt;);
    res.send(`
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;SSR with RR&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;app&quot;&gt;${markup}&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;
    `);
  });
  server.listen(port, () =&gt; {
    console.log(`Server launched on port ${port}`);
  });
  </code></pre>