I recently developed a React+Typescript app with Webpack 5 configuration completely from scratch. Everything was running smoothly in development mode, and I utilized React Router DOM version 6.23.1 for routing. However, once I built the app, some components failed to display without any error messages in the console. This issue specifically affects components nested inside <Route> tags. Interestingly, when I moved the <Home> component outside of the <Routes> tag, it appeared on the screen as expected.
Despite trying various solutions like downgrading React Router DOM and adding
"homepage": "."index.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement!);
root.render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);
App.tsx
import { Route, Routes } from "react-router-dom";
import GlobalStyle from "./globalStyles";
import { ApolloProvider } from "@apollo/client";
import { RecoilRoot } from "recoil";
import { Layout } from "./components/Layout";
import { Home } from "./components/pages/Home";
import { client } from "./lib/data";
import { Favorites } from "./components/pages/Favorites";
import { Tours } from "./components/pages/Tours";
import { About } from "./components/pages/About";
export default function App() {
return (
<main>
<GlobalStyle />
<RecoilRoot>
<ApolloProvider client={client}>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="favorites" element={<Favorites />} />
<Route path="tours" element={<Tours />} />
<Route path="about" element={<About />} />
</Route>
</Routes>
</ApolloProvider>
</RecoilRoot>
</main>
);
}
webpack.config.ts
import path from "path";
import { Configuration } from "webpack";
import CopyWebpackPlugin from "copy-webpack-plugin";
import "webpack-dev-server";
const config: Configuration = {
entry: "./src/index.tsx",
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/",
},
devServer: {
historyApiFallback: true,
static: {
directory: path.resolve(__dirname, "dist"),
},
compress: true,
port: 8080,
},
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: "public" }],
}),
],
};
export default config;
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"noImplicitAny": true,
"target": "es5",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outDir": "./dist/",
"moduleResolution": "node"
},
"include": ["**/*.ts", "**/*.tsx"]
}