web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.23k stars 537 forks source link

[Bug]: When using require to import files, the behavior is different from that of vue-cli5. #7906

Open tjstyx opened 6 days ago

tjstyx commented 6 days ago

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.1

Details

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

panzhangguo commented 5 days ago

try import

iu-night commented 5 days ago

try import

The same issue occurs when using import.