title: Uncaught SyntaxError: Unexpected token '<' when navigate to route with 2 or more path element after ci deployment
body: <p>After ci deployment, I try to navigate to '/records/:id' or other routes with 2 or more path elements and will get this error in the console. This error never comes out when running in local.</p>
  <p><code>Uncaught SyntaxError: Unexpected token '&lt;'</code></p>
  <p>I had used <strong>webpack</strong> for configuration and <strong>connected-react-router</strong> as router in my project.</p>
  <p><strong>webpack.config.js</strong></p>
  <pre><code>
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  const config = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
      path: path.join(__dirname, 'public'),
      filename: '[name].[hash].js',
      publicPath: '/',
    },
    devtool: 'source-map',
    resolve: {
      extensions: ['.css', '.ts', '.tsx', '.js'],
    },
    devServer: {
      historyApiFallback: true,
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: [/node_modules/, /\.stories\.tsx$/],
          use: [
            {
              loader: 'babel-loader',
            },
          ],
        },
        {
          test: /\.css$/,
          use: [
            {loader: 'css-loader'}
          ]
        }
      ],
    },
      
    plugins: [
      new HtmlWebpackPlugin({
        template: 'static/index.template.html',
        filename: 'index.html',
      }),
  
      new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*']}),
    ]
  };
  
  module.exports = config;
  </code></pre>
  <p><strong>webpack.config.prod.js</strong></p>
  <pre><code>const path = require('path');
  const { merge } = require('webpack-merge');
  const common = require('./webpack.config');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = merge(common, {
    mode: 'production',
    output: {
      filename: '[name].[hash].js',
      publicPath: './',
      path: path.join(__dirname, 'public'),
    },
    devtool: false,
    performance: {
      hints: false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'static/index.template.html',
        filename: 'index.html',
      })
    ]
  })
  </code></pre>
  <p><strong>index.tsx</strong></p>
  <pre><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;ConnectedRouter history={history}&gt;
        &lt;Switch&gt;
          &lt;Route exact path=&quot;/&quot; component={Dashboard} /&gt;
          &lt;Route exact path=&quot;/records&quot; component={Records} /&gt;
          &lt;Route path=&quot;/records/:id&quot; component={Record} /&gt;
          &lt;Route component={NotFound} /&gt;
        &lt;/Switch&gt;
      &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>...
    &quot;scripts&quot;: {
      &quot;type-check:watch&quot;: &quot;npm run type-check -- --watch&quot;,
      &quot;build&quot;: &quot;webpack --progress --config webpack.config.prod.js&quot;,
      &quot;start&quot;: &quot;webpack-dev-server --port 4001 --progress --colors --open --mode=development&quot;,
      &quot;watch:css&quot;: &quot;postcss src/styles/tailwind.css -o src/styles/main.css&quot;
    },
  ...
  </code></pre>
  <p>May I know this error is caused by the configuration in webpack or router?</p>