I'm building a module federation/react aplication. I'm currently working on my container, and i've been setting up the environment for everything, including TS, now, when i try to create my routes, only the Home appear, but other routes don't. Let me show you
This is how my Routing.tsx looks like
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Autenticacion from "./Website/Autenticacion";
import Home from "./Website/Home";
const Routing = () => {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/auth" element={<Autenticacion />} />
</Routes>
</BrowserRouter>
</div>
);
};
export default Routing;
When i go to "/" the component appears with no problem
But, when i go "/auth"
Nothing appears and, no errors in the console, it's like "/[something]" does not work, i'm pretty sure this might be an stupid error, it's just that, i can't see it.
As i told you, i'm using webpack for module federation, and, i don't know if this problem is related to that configuration.
What is going on ?
UPDATING
This is my package.json
{
"name": "container",
"version": "1.0.0",
"main": "index.tsx",
"license": "MIT",
"scripts": {
"start": "webpack serve --config config/webpack.dev.js"
},
"dependencies": {
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.2.0",
"@mui/material": "^5.2.2",
"@mui/styles": "^5.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@types/node": "^16.11.10",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"typescript": "^4.5.2",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0",
"webpack-merge": "^5.8.0"
}
}
This is my config in webpack, maybe you can spot an error related to this.
webpack.common
module.exports = {
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.m?tsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
["@babel/preset-react", { runtime: "automatic" }],
"@babel/preset-env",
"@babel/preset-typescript",
],
plugins: ["@babel/plugin-transform-runtime"],
},
},
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};
webpack.dev
const { merge } = require("webpack-merge");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const commonConfig = require("./webpack.common");
const { dependencies } = require("../package.json");
const devConfig = {
mode: "development",
devServer: {
port: 3000,
historyApiFallback: {
index: "index.html",
},
},
plugins: [
new ModuleFederationPlugin({
name: "container",
remotes: {},
shared: dependencies,
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
module.exports = merge(commonConfig, devConfig);
Another Update
This is my index.tsx file (I have to do it like this)
import("./bootstap");
export {};
This is my bootstrap file
import { render } from "react-dom";
import { CssBaseline } from "@mui/material";
import Routing from "./Routing";
render(
<>
<CssBaseline />
<Routing />
</>,
document.getElementById("root")
);

