React Router not working with path

1

I wrote a react router code like this and it works

@react.component
let make = () => {
  <div>
    <Header />
    {
      switch RescriptReactRouter.useUrl().path {
      | list{} => <StockOverview />
      | list{"detail"} => <StockDetail />
      | _ => <PageNotFound />
      }
    }
    <Footer />
  </div>
}

However If I change this code to

@react.component
let make = () => {
  <div>
    <Header />
    {
      switch RescriptReactRouter.useUrl().path {
      | list{} => <StockOverview />
      | list{"detail", symbol} => <StockDetail symbol />
      | _ => <PageNotFound />
      }
    }
    <Footer />
  </div>
}

Now when I say http://localhost:8001/detail/MSFT it crashes at runtime with error

[Error] SyntaxError: Unexpected token '<' (anonymous function) (index.js:1)

Here are the details of my webpack configuration of the dev server

  devServer: {
    historyApiFallback: {
      index: './index.js',
      disableDotRule: true,
      rewrites: [
        {
          from: /\.(js|css|svg|png|jpg|json|woff|woff2|ttf)$/,
          to: function (context) {
            return context.parsedUrl.pathname.replace(/^\/.*\//, '/');
          },
        },
      ],
    },
    static: {
      directory: outputDir,
    },
    compress: true,
    port: 8001
  }

I also tried

  devServer: {
    historyApiFallback: true,
    static: {
      directory: outputDir,
    },
    compress: true,
    port: 8001
  }

but now it gives error

[Error] Refused to execute http://localhost:8001/detail/index.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.

2

I solved the problem by writing custom javascript code in the rewrites functionality of webpack-dev-server.

  devServer: {
    historyApiFallback: {
      rewrites: [
        {
          from: /^\/detail\/index.js$/,
          to: function(context) {
            return 'index.js';
          }
        },
        {
          from: /^\/detail\/.*$/,
          to: function(context) {
            return 'index.html';
          }
        }        
      ]      
    }

The problem with my code was that when I say http://localhost:8001/detail/MSFT webpack-dev-server was trying to get a file /detail/index.js but webpack-dev-server was trying to serve ‘index.html’ always. This led to syntax error as index.html is not valid javascript.

Although I have solved this problem it looks like a very heavy handed solution to get the basic react-router path to work with webpack-dev-server. If anyone knows of a better solution then please let me know.

Edit:: I still see an error in the javascript console (even though the app works)

[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'module.hot.accept')