Не работают динамические страницы react router dom, в чем ошибка конфига?

Question

[EvilPode]

Приветствую.

Webpack настраивал вручную, роутинг работает как надо, пока не понадобилось решить вопрос с динамическим роутингом (detail/:id).

Пытаюсь открыть эту страницу "localhost:3000/detail/123" и всё крашится,в консоли:

GET localhost:3000/detail/main.36c0b803e76b0180bf23.js net::ERR_ABORTED 404 (Not Found)
123:10 Refused to execute script from 'localhost:3000/detail/main.36c0b803e76b0180bf23.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

<BrowserRouter>
          <Routes>
            <Route path="/" element={<MainLayout />}>
              <Route index element={<Home />} />
              <Route path="detail/:id" element={<div>detail</div>} />
              <Route path="favorites" element={<Favorites />} />
            </Route>
          </Routes>
    </BrowserRouter>

Скорее всего проблема с настройкой entry или output, но как мне настроить, чтобы работало и для dev сервера и для бандла итогового:

const paths: BuildPaths = {
    entry: path.resolve(__dirname, "src", "index.tsx"),
    output: path.resolve(__dirname, "./dist"),
    html: path.resolve(__dirname, "public", "index.html"),
  };

Comments

[Александр]

- Не использовать вебпак?
- Использовать сервер, который отдаёт всегда index.html (npx serve -s ./path-to-output).

[EvilPode]

Александр, да по заданию его нужно использовать обязательно, не подскажешь, что можно исправить?

[EvilPode]

Всё, вопрос решён, если кому надо будет, то проблема в этой строке publicPath: "/"

output: {
      path: paths.output,
      filename: "[name].[contenthash].js",
      publicPath: "/",
      clean: true
    }