Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tjstyx opened this issue Sep 13, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@tjstyx
Copy link

tjstyx commented Sep 13, 2024

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
Copy link

try import

@iu-night
Copy link

try import

The same issue occurs when using import.

@chenjiahan chenjiahan transferred this issue from web-infra-dev/rsbuild Sep 15, 2024
@chenjiahan chenjiahan added the bug Something isn't working label Sep 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants