[Bug]: react-router-dom cannot configure nested routers of 3 levels or more

[nguyenbatranvan]

System Info

MacOs M1

Details

With react router dom when I configure from nesting router 2 levels or less. Everything still works normally. To my surprise, When I configured to the 3rd level, an error appeared:

I copied all the files and worked with vite, everything works fine with my current config!! Is there a problem with the router?

Reproduce link

https://github.com/nguyenbatranvan/rspack-turbo-mdf

Reproduce Steps

1. pnpm i
2. pnpm run remote
3. goto http://localhost:3000/nested-1 -> Working
4. goto http://localhost:3000/nested-1/1 -> show error above

[nguyenbatranvan]

The problem occurs due to the publicPath='auto' configuration. If I specify publicPath='http://localhost:3000' the problem is resolved. Is there any way to automatically get publicPath according to window.location.origin?

[nguyenbatranvan]

any update this??

[LingyuCoder]

I think you can set output.publicPath='/' to prevent the errors. I test it in your repro and it works well.

The runtime module of auto public path is aligned with webpack. You can see its code here. It is calculated base on document.currentScript.src.

If you want to caculate base on window.location.origin, you can try to write a plugin which uses compilation.runtimeModule hook to override the content of the runtime. Just like code below:

class Plugin {
	apply(compiler) {
		compiler.hooks.compilation.tap("MyPlugin", compilation => {
			compilation.hooks.runtimeModule.tap("MyPlugin", (module, chunk) => {
				if (module.name === "auto_public_path") {
					const originSource = module.source.source.toString("utf-8");
					module.source.source = Buffer.from(
						`/* code of your own auto public path runtime module */`,
						"utf-8"
					);
				}
			});
		});
	}
}

[nguyenbatranvan]

I think you can set output.publicPath='/' to prevent the errors. I test it in your repro and it works well.

The runtime module of auto public path is aligned with webpack. You can see its code here. It is calculated base on document.currentScript.src.

If you want to caculate base on window.location.origin, you can try to write a plugin which uses compilation.runtimeModule hook to override the content of the runtime. Just like code below:

class Plugin {
	apply(compiler) {
		compiler.hooks.compilation.tap("MyPlugin", compilation => {
			compilation.hooks.runtimeModule.tap("MyPlugin", (module, chunk) => {
				if (module.name === "auto_public_path") {
					const originSource = module.source.source.toString("utf-8");
					module.source.source = Buffer.from(
						`/* code of your own auto public path runtime module */`,
						"utf-8"
					);
				}
			});
		});
	}
}

I can't seem to apply this plugin. Is there any documentation on how to write a plugin with rspack?

[LingyuCoder]

I think you can set output.publicPath='/' to prevent the errors. I test it in your repro and it works well.
The runtime module of auto public path is aligned with webpack. You can see its code here. It is calculated base on document.currentScript.src.
If you want to caculate base on window.location.origin, you can try to write a plugin which uses compilation.runtimeModule hook to override the content of the runtime. Just like code below:

class Plugin {
	apply(compiler) {
		compiler.hooks.compilation.tap("MyPlugin", compilation => {
			compilation.hooks.runtimeModule.tap("MyPlugin", (module, chunk) => {
				if (module.name === "auto_public_path") {
					const originSource = module.source.source.toString("utf-8");
					module.source.source = Buffer.from(
						`/* code of your own auto public path runtime module */`,
						"utf-8"
					);
				}
			});
		});
	}
}

I can't seem to apply this plugin. Is there any documentation on how to write a plugin with rspack?

same as webpack. see this doc for more details