Subscribe on changes!

Support extending globalWhitelist in vue compiler

avatar
Mar 7th 2021

What problem does this feature solve?

Vue compiler prefixes all identifiers used in template syntax with this or _ctx except these:

https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts

Is there a way that we can add some custom globals like window , or __MY_GLOBAL_CONSTANT__ to globals? If we could, then we can use env variables (or ...) directly and it makes tree-shaking works inside render-tree.

I encountered this problem here

https://github.com/SasanFarrokh/vite-plugin-multi-device#caveats

What does the proposed API look like?

inside vueCompilerOptions add another field to extend the globalsWhitelist like

vueCompilerOptions: {
   globalsWhitelist: ['window', '__DEVICE__']
}
avatar
Oct 17th 2022

I ran into this trying to use console.log() inside a template. You get an absolutely bizarre-sounding error:

Uncaught TypeError: Cannot read properties of undefined (reading 'log')

Unless you think to disable sourcemap support, you have no idea that it's rewriting console.log to _ctx.console.log, and even then it's not easy to find this issue.