vitepress
vitepress copied to clipboard
vuejs
About config head Dynamically add script problems
Describe the bug
//cofing.js
export default {
head: [
['script', { src: 'https://unpkg.com/[email protected]/lodash.js' }],
],
}
Lodash namespace will not be found in the page
Reproduction
The reason is that the script is dynamically added to the page. When the lodash namespace is used in the page, the script of lodash has not been loaded
Expected behavior
It is hoped that the script loading is not dynamically loaded into the head, but directly put into the head through compilation to maintain the browser's original loading method (synchronous)
hope
<head>
<script src="https://unpkg.com/[email protected]/lodash.js"></script>
</head>
instead of
let script = document.createElement('script');
...
document.head.appendChild(script)
System Info
_ is undefined
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
@brc-dd This problem only occurs in the development environment, and there is no problem in the production environment
I'm marking this as a FR instead of bug as this is intentional. If we somehow can get the head tags here, only then this can work in dev:
https://github.com/vuejs/vitepress/blob/8e6665bd8de66a8249fca92fbb1b9a4f6d76a041/src/node/plugin.ts#L176-L188
BTW why not directly use lodash from npm? Alternatively, you can do something like this for now: https://stackoverflow.com/q/7486309
@brc-dd thks,
Lodash, I'm just taking an example. There are still many traditional packages that are not published to NPM, or some packages do not conform to the ESM specification and need to be loaded in the traditional way
I just looked at the code，My guess is right
https://github.com/vuejs/vitepress/blob/708c36183a925e06c13b9b04ed03af073c315978/src/client/app/composables/head.ts?_pjax=%23js-repo-pjax-container#L20