[Bug]: When using require to import files, the behavior is different from that of vue-cli5. #7906
Description
Version
System:
OS: macOS 13.6.4
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 69.22 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Chrome: 128.0.6613.138
Edge: 127.0.2651.98
Safari: 17.5
npmPackages:
@rsbuild/core: ^1.0.2 => 1.0.2
@rsbuild/plugin-vue2: ^1.0.1 => 1.0.1Details
const remotePath = this.$route.path.replace(/.*\/(remote)\//, "");
const name = remotePath.replace(/\//g, "");
if (import.meta.env.PUBLIC_REMOTE_PAGE_DIR) {
try {
const lastPath = remotePath
.replace(import.meta.env.PUBLIC_REMOTE_PAGE_DIR, "")
.replace(/^\//, "");
console.log("🚀 ~ register ~ lastPath:", lastPath);
const module = await Promise.resolve(
require(`../remote/${import.meta.env.PUBLIC_REMOTE_PAGE_DIR}/${lastPath}.vue`)
);
this.$options.components[name] = module.default;
this.name = name;
return;
} catch (e) {
console.log("error:", e);
console.log("local not exist " + remotePath);
}
}// .env
VUE_APP_REMOTE_PAGE_DIR = "test"
PUBLIC_REMOTE_PAGE_DIR = "test"
When I access http://localhost:3000/#/remote/test/new/index, it prompts Cannot find module './"test"new/index.vue.
I found that when rsbuild runs, it compiles into this.
const module = await Promise.resolve(__webpack_require__("./remote/test sync recursive ^\\.\\/.*\\.vue$")(./"test"${lastPath}.vue));Runs normally in vue-cli. http://localhost:8080/#/remote/test/new/index
const module = await Promise.resolve(__webpack_require__(\"./remote/test sync recursive ^\\\\.\\\\/.*\\\\.vue$\")(`./${lastPath}.vue`));Reproduce link
https://github.com/tjstyx/test-code
Reproduce Steps
to page
rsbuild
http://localhost:3000/#/remote/test/new/index
vue cli
http://localhost:8080/#/remote/test/new/index