Vite Issue Overview #8232
Replies: 6 comments 1 reply
-
Thoughts on Vite’s High-Priority IssuesBreaking Changes to DiscussBreaking changes need to land in v3, or we have to wait till next year for v4. Besides the ones that have been added to the 3.0 milestone, we still need to discuss the following issues:
For Better CompatibilitiesFirst, we need to solve the CJS-ESM interop issue once-and-for-all.
Secondly, we need an official solution for Node.js polyfills, either as a plugin or as a documentation chapter. The Next Big RefactorsVite is all about speed. So I think if we do big refactors, it should help improve the performance. We can improve the performance in these scenarios:
Empower Plugin / Meta-Framework AuthorsThe plugin API is quite stable. Next, we need to focus on SSR, middleware mode, and backend integration. The major missing piece at the moment is better ES module support. Better Spec-complianceVite is advocated as the “next-generation frontend tooling”, so adopting the latest language specs is always a priority. So far Vite already works great with the newest language spec.
OthersTODO. Please comment if you have any other ideas. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
I've edited and removed the solved issues from the first post. Original content here, just in case.
|
Beta Was this translation helpful? Give feedback.
-
I've removed the solved issues from and added new issues to the first post. Original content here, just in case.
|
Beta Was this translation helpful? Give feedback.
-
I notice that the first issue in library mode is to support inline CSS inside the JS bundle. I'd like to make sure does it mean inject css using import statement or inject a code snippet like |
Beta Was this translation helpful? Give feedback.
-
Hello, Everyone |
Beta Was this translation helpful? Give feedback.
-
I read most (still about 70 issues to triage) open issues till #7832.Update (@sapphi-red): I've updated till #10481.
Here’s an overview of them. I categorized and roughly sorted the issues by priority in each category.
If anyone's interested in contributing to a specific area of Vite, you can expand the corresponding header below and see the issues related to that category and start tackling them.
Dev Server
Dev Server Performance
Source Maps
source-maps://
namespace to separate source mapped files from real filesssrLoadModule
source map off-by-one line: Misplaced breakpoints afterssrLoadModule
#7487css.devSourcemap
option?Server API
devServer.historyApiFallback
Expose history api fallback options #7095, to fix these issues:/landing-page/foo/
should fallback to/landing-page/index.html
, but shows/index.html
transformIndexHtml
hook gets the wrong html filepath when running Multi-Page #2958/foo
, will fall back toindex.html
in the 1st visit, but will showfoo.ts
in the 2nd visit. Wrong File Served When Route Conflicts with File in Project Root #3502script src=@vite/client
to every HTML response body. This may be unwanted in some cases. Maybe it can also be worked around with this API. VITE attaches script[src="/@vite/client"] to html files than the main one #6699/a.random.url.containing.dot
should fall back toindex.html
by default, but the dot is causing 404 now. Dots in URL lead to 404 (regression?) #2415HMR
New Features
ssrLoadModule
#7887this.addWatchFile()
in theload()
hook does not work #3474import.meta.hot.accept
HMR Accept updates from direct dependencies not working #8856addWatchFile()
of modules outside module graph should at least trigger a full page reload by default addWatchFile can not be used to watch files outside of the module graph #7024transformIndexHtml
Allow access to Rollup's PluginContext within transformIndexHtml #2501vite:beforeFullReload
andpayload.preventDefault()
Allow preventing default actions of client.js #5763Connection Issues
server.hmr.retry
option feat(hmr): addserver.hmr.retry
option to solve frequent refresh caused by HMR WebSocket connection loss (#6089) #6090Other Bugs
new URL()
won’t trigger reload after being modified [BUG?] changing an asset doesn't reload the app using new URL syntax (dev mode) #5334Vue
<script src="">
breaks HMR https://github.com/vitejs/vite/issues/7325v-for
#9679React
Lit
Symlinks / File Systems
server.fs
serve.fs.allow
check Symlinks allow bypassing of fs serve root #5281serve.fs.allow
should accept file paths in addition to directory paths Vite fs allow not respecting individual files #5689ENOENT
error on network drives ENOENT Error when importing node_modules from network drive #5010ENOENT
error in SMB folders Failure to load deps when launched from a windows SMB file share #5258Better Error Messages
index.html
is found dev server: show directory listing when index.html is not found #2818.ts?url
usage paintWorklet broken with production build (.ts?url
) #6979Documentation or Guidance
node_modules
, breaking Vue #7454react-refresh
) the vite's HMR does not work when I use React.lazy() API for lazyload #4298 (comment) https://github.com/vitejs/vite/issues/2719.vue
in VSCode For vue cli, there is a cookbook for debugging in vscode, but, for vite, there is nothing. #5882__filename
and__dirname
usage in ES modules in SSR __filename and __dirname in SSR #6899base
prepending (i.e. if you have abaes: '/foo'
and want to proxy/foo/api
, you should configure it asproxy: { '/foo/api': ... }
rather thanproxy: '/api': ...
) Vite proxying with https doesn't work #6102base
option’sorigin
part isn’t taken into count. Thebase
property would be changed #4381Misc and Low Priorities
define
import.meta.env
: Project build failed with "import.meta.env" #3304define
s: vite define and object property value shorthand dev and build inconsistencies #6653import
/export
names and file names Define global constant replacements should ignored filename #6295#
in the project path npm run dev doesn't start if there is '#' in the path #6763serve
: withbase: '/docs/'
, should/docs
work as/docs/
? #8770ECONNRESET at TLSWrap.onStreamRead
), seems to be an upstream issue inhttp-proxy
http proxy error ECONNRESET at TLSWrap.onStreamRead #4794localhost:3000?url=test.com%2Fa.scss
would crash the dev server URL Query Parameter with .scss causes vite to fail #6894base: '/basepath/'
, users should only accessmain.ts
fromlocalhost:3000/basepath/main.ts
, andlocalhost:3000/main.ts
should return 404 When using a base path, resources should not be served without the base path #5656link:
protocol support Support Yarn 2 link protocol aliases #2825fetch('/__open-in-editor')
in error overlay does not respectbase
#8627es2020
compatibility by default #9062rewrite
option inproxy
settings. Support async proxy rewriting #7534Dependency Pre-bundling / Optimization
optimizeDeps.include
Glob support in optimizeDeps.include #5419.vue
files innode_modules
(needs double check though) https://github.com/vitejs/vite/issues/5932new URL(foo, import.meta.url)
doesn't work when dependency was optimized #8427instanceof
breaks in dev mode #9528optimizeDeps.exclude
removesdefault
property from exports #10258Preview Server
Resolution issues
devexpress
fails in production Production build fails in runtime after update to 2.7.1 #6061module
field and CJS requires, lots of related issues. Won't be an easy fix and we might need an additional option:callbag-basics
,react-moment
, etc. Module field breaking CommonJS resolution #7578Cannot set properties of undefined
Type Error for React Moment package #7376graphql
with SSR graphql is loaded twice, once as CJS and second time from the ESM #7879Rollup Build
react-switch
, etc. requires to access.default
after build while it's not required in dev (CJS dependency) #2139node_modules
are ignored. It’s an easy fix. I wonder why it’s excluded in the first place. Dynamic imports with variables in a dependency are not processed at all #6179 feat: handle dynamic imports in dependencies #7564?url
query: Loading SCSS with the?url
flag causes the import to fail #2522 (comment) Importing a script file containingimport
with?url
does not work with build #6757 CSS imported by explicit import with ?url suffix do not have resolved its dependencies #7842.svg
assets Support inlining SVG assets #1204build.assetInline.exclude
option. Add build.assetInlineExclude config #2173 feat: add assets inline exclude #6892 feat: support callback forbuild.assetsInlineLimit
#8717--watch
should watchpublic
folder too, can be easily implemented as a custom plugin Watch for file changes in /public and build to /dist #4970vite build --watch --hmr
vite build --watch HMR #3873rollupOptions.output.banner
+ UMD/IIFE 当构建库时使用 rollupOptions.output.banner 会导致打包出错误的 umd #8412vite build
rejectsnew URL(url, import.meta.url)
with template strings that don't begin with/
or./
#10032Preloading
polyfillModulePreload
enabled Bundle requests twice in Firefox 93 with default polyfillModulePreload enabled #5532Rollup plugin compat
rollup-plugin-assemblyscript
compatibility, it depends on theimport.meta.ROLLUP_FILE_URL_referenceId
feature WASM+Vite via SvelteKit:TypeError: Failed to construct 'URL': Invalid URL
on client #5075vite serve
sourcemapsources
resolution differs fromvite build
/rollup #9501Better Error Messages
browser-externals
in the console during build dev/build silently externalizes some dependencies, leading to runtime errors #7105 feat: give some logs about browser-external at the pre-bundling period #7115build.rollupOptions.output.sourcemap
Invalid Sourcemap #2806Minify
CSS
element-plus
, maybeunplugin-vue-components
is also related 多页项目dev正常,build后自定义样式优先级低于框架样式 #7168manualChunk
vendor CSS. It may have been fixed after removing of the defaultmanualChunk
setting in 2.9. incorrect CSS order after build when manualChunk is used #6375 css injected with wrong order after build #8992url()
issueshttp://
URLs in lessurl()
, related to the previous SASS issue Less 中使用 http的资源地址,路径会解析错误 #3644vanilla-extract
compatibility issue as Vite optimizer currently skips.css.ts
. Already discussed in the team meeting. Waiting for a PR..css.ts
files not scanned for imports #5124composes
#10079.scss
and.less
files on-the-fly, apps that imports large.scss
or.less
files (e.g. fromelement-ui
) will be very slow on first load: Waiting ttfb time too big while loads .scss files #6736file
argument topostcss.config.js
(module.exports = (ctx: { cwd, env, file} => ...
). Seems hard to implement without hurting perf. Add 'file' param support on config files [ module.exports = (ctx: { cwd, env, *file }) => ${config} ] #4653HTML
script
orlink
tag is referring to an external resource. Vite removes external module from index.html #3533 do not want to allow absolute css URLs to be a css module #5906 Link to stylesheet is transformed to javascript import #8976crossorigin="use-credentials"
to the output tags (script
,modulepreload
, etc.) allow use-credentials of crossorigin attribute #6648data-src
) Custom html attributes resolving #5098<meta property="og:image">
) Add import directive for html attributes #7362<object>
<object> tag does not import SVGs #7062transformEntryToHtml
hook in plugins #8000dev
andbuild
when usingbase
#10217SSR
node --inspect-brk --enable-source-maps ./source.js
SSR SourceMap not loaded when debugging #3288 feat(ssr): better DX with sourcemaps, breakpoints, error messages #3928$ vite path/to/server.js
/vite.config.js#server
. #6394ssr.noExternal
shallow #8991 Configure transitive dependencies inssr
external
/noExternal
#9919SSR
: ssrLoadModule issue #9436Library Mode
build.cssCodeSplit: false
#4863build.lib.format
Library Mode: Able to conditional set options based on the format that is used. #7617 Extending environment variables to get build format during build #6954Worker
type module
:new Worker("/assets/tv.worker.b73a6f8e.js", {type: "module"})
Worker is built in legacy mode with the {type: "module"} option #6761lib
mode andbuild --watch
#8172import
inside classic worker, syntax error happens during dev but build success #8470plugins
applies to worker only for dev and requiresworker.plugins
for build #8520?worker
works in dev but bundling with Terser errors #9566new window.SharedWorker
causes unexpected inlining of worker script #9901Legacy Plugin
vite build --watch
omits HTML and CSS outputs when legacy plugin is present build --watch does not output html or css when @vitejs/plugin-legacy is used #6133.browserslistrc
@vitejs/plugin-legacy does not use browserslistrc #2476 fix(plugin-legacy): fix to use the browserslist configuration (fix #2476) #6880regenerator-runtime
requires a non-strict environment (I haven’t checked if Vite has this bug or not) File polyfills-legacy should not be in strict mode (Plugin legacy) #6427assumptions
, andbugfixes
option Allow specifying assumptions in@vitejs/plugin-legacy
#6965 [plugin-legacy] finer control for modern/legacy target polyfills #6922additionalLegacyPolyfills
, a regular JS/TS user defined polyfill file #10413Vue Plugin
@vitejs/plugin-vue
breaks HMR when used withvite-plugin-ssr
#9341 This is fixed but we need a more elegant solution eventually.Vue JSX Plugin
React Plugin
include
/exclude
options intofastRefresh
option; Supportbabel.include
/babel.exclude
babel.include/exclude
options behave #6202React.cloneElement
insideFragment
seems to be causing "Each child in a list should have a unique "key" prop..." warning. https://github.com/vitejs/vite/issues/5646Inconsistency, Spec-compliance, and Third-Party Libraries
@techstark/opencv-js
, related to Node.js polyfills, has workaround, so low-priority Unable to build projects using opencv.js #6710package.json
imports
field Support ESM-style"imports"
field aliases inpackage.json
#7385 feat: support ESM subpath imports #7770sideEffects
relatedsideEffects
doesn't seem to be working correctly #7635exports
condition for styles Allow stylesheets to resolve other stylesheets via export conditions #7809 feat(css): support resolving stylesheets from exports map #7817@mediapipe/pose
. Maybe we can provide an opt-out option for users to only bundle these known-to-be-problematic packages with esbuild rather than Rollup. package name contain "/" will cause class name change #7858 Using obfuscated packages: Uncaught (in promise) TypeError: {......} is not a constructor #4680 (comment)antv/v6
, may be caused by circular dependencies. Uncaught TypeError: Cannot read property 'ToolItem' of undefined #3413@fortawesome/***
, seems related to code splitting or circular dependency. Undefined imports in production build with shared components #4083@rollup/plugin-commonjs
relatedantd-mobile
DatePicker
component, an edge case in@rollup/plugin-commonjs
transformMixedEsModules
optionuseDefineForClassFields
https://github.com/vitejs/vite/issues/9486useDefineForClassFields
value changed from 3.1 when it's derived fromtarget
#10296 ts lit based app fail after upgrading to 3.1.4 #10409URL::toString
#10307Middleware Mode and Backend Integration
pendingRequest
Expose pendingRequests #6011react
andlegacy
plugins need to modify the HTML content. Some community plugins may do this too. Exposing plugin HTML transforms for Backend Integration #2514 So we need to do something about this:manifest.json
manifest.json
during dev, for better back-end integration (Workaround: vite-plugin-symfony). Backend integration in development #2908manifest.json
file collision #9636Configuration
vite.config.ts
importing from untranspiled.ts
files in the same monorepovite.config.ts
can't import untranspiled ts files from other packages in the same monorepo #5370skipLibCheck: true
default in tsconfig.json of starter templates #7867CLI
create-vite
Plugin API
enforce: "pre"
, theimporter
inresolveId
hook is always the HTML file resolveId hook importer inconsistent inpre
stage #5981fileToUrl
, needed byvite-plugin-wasm
ExportfileToUrl
function for plugins #7162this.load()
Support Rollup's this.load() method in the plugin context #6810resolveDynamicImport()
The rollup hookresolveDynamicImport
does not work in dev #1588resolveFileUrl
,resolveImportMeta
,renderChunk
, etc.) Consider to trigger neccessary Rollup Output Hooks in serve mode #5756Other
import.meta.env.DEV
andPROD
are incorrect if a custommode
is provided programmatically #9203tsconfig.json
hot update #9409server.open
BROWSER
environment variable forserver.open
to take on, can only be set viaprocess.env.BROWSER
, but not from.env.development
, this seems confusing. Can't open the server in a specific browser which I set in .env.development file. #7329readonly string[]
as peropen
spec #9572dom
types #9813Very niche case
/
that doesn’t have amain
entry would throw an error during dev Running on root directory "Failed to resolve entry for package" #6859Project Meta
SECURITY.md
Trying to get in touch regarding a security issue #4905Beta Was this translation helpful? Give feedback.
All reactions