vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.21k stars 6.04k forks source link

Dynamic import not working as expected with base public path option. #18019

Closed Kerryliu closed 1 week ago

Kerryliu commented 1 week ago

Describe the bug

I'm working on a project where we will be building a library to be hosted on a CDN. Currently, I'm struggling with an issue where dynamic imports are not working as expected with the base public path option.

What I'm expecting to happen is that when this option is set in my config: (E.g.: base: www.somepath.com), all dynamic imports should also have this path appended to them after being built - import('./dynamic.js'); would be come import('www.somepath.com/dynamic.js');

However, this does not seem to currently be the case and the dynamic imports are still using relative paths. If this is not a bug, and I'm misusing this option and/or is there an alternative approach that I should be taking?

Reproduction

https://stackblitz.com/edit/vitejs-vite-bdc46m?file=dist%2Fmain.js

Steps to reproduce

  1. Run npm run build
  2. Open main.js in the dist folder.
  3. Observe that the import("./dynamic-HASH.js"); does not contain the base path specified in vite.config.ts

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.4.2 => 5.4.2 


### Used Package Manager

npm

### Logs

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to [vuejs/core](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
stackblitz[bot] commented 1 week ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

sapphi-red commented 1 week ago

import("./dynamic-HASH.js"); is relative to the file containing that statement. As long as you are serving the file importing the other file and the imported file on the same origin, it won't be an issue.

Kerryliu commented 1 week ago

The problem is the imported file is not on the same origin.
For example, I am hosting my library at www.someWebsite.com/main.js, and the imported file is at www.someWebsite.com/dynamic-HASH.js.

If the library is consumed via www.anotherWebsite.com, this is a different origin, so the import("./dynamic-HASH.js"); would fail, as it would try to grab it from www.anotherWebsite.com/dynamic-HASH.js.

sapphi-red commented 1 week ago

Do you have the file importing dynamic-HASH.js on a different origin from dynamic-HASH.js? For example, www.someWebsite.com/main.js imports www.anotherWebsite.com/dynamic-HASH.js. In that case, you should make dynamic-HASH.js an entry point instead of a implicit chunk generated by dynamic import, otherwise the entry signature can be changed by rollup (some export might be removed if main.js doesn't use it).

If you have main.js and dynamic-HASH.js served on the same origin and importing main.js from a different origin, then import can work with relative path. It will be resolved from main.js and not the location.href/document.baseURI.

Kerryliu commented 1 week ago

If you have main.js and dynamic-HASH.js served on the same origin and importing main.js from a different origin, then import can work with relative path. It will be resolved from main.js and not the location.href/document.baseURI.

Interesting, you are correct, I tested this and this does seem to be the case. I vaguely remember I had problems with webpack around a similar issue (maybe it handles dynamic imports differently?), so that might be why I assumed the latter to be true.

Thanks for the help/clarification!