-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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
Wrong esbuild target when using vite dev
#13756
Comments
Start a new pull request in StackBlitz Codeflow. |
Glad to answer your questions. Vite use esbuild to pre-bundle dependencies in node_modules. For pre-bundle stage, optimizeDeps.esbuildOptions is used as transform api's parameter. You can try it.
I just tried it, and it work. Not sure if I misunderstood you, but I hope this can help you. |
I am also having this issue. I'm working on an Adobe plugin and using vite to build/develop. Adobe's current environment is using chrome version 88, so having the default build output for dev being set to I understand there is supposed to be a way to override this behavior using |
However, it's also worth noting that I'm not having this issue on version |
The configuration for that line is through the |
@bluwy looks like that works, thank you! I am curious though... shouldn't the build be picking up my tsconfig target? it seems a little odd and unfortunate to need to define the build target in multiple places. |
So as far as I understand, this is how the target is determined for the different parts:
I find this quite confusing, honestly. IMO everything should be affected by |
@newcat
@treardon17 I'm currently also tracking this behaviour in #13863, but I haven't yet figure out where is causing this issue. I agree that it would be better to have a single place to configure |
@bluwy I may be misunderstanding something, but I'm not sure if separating the targets for build vs dev is a good default behavior. I could see it being a useful opt-in behavior if it's explicitly set. With the exception of minification, I expect (or hope) my code will have the same output in both scenarios because debugging/fixing something is much more difficult if it is built for a different environment. |
That's how Vite works fundamentally (even before I started maintaining it). Dev and build are two separate paths, and while we try to keep things consistent between them, dev has kept it's philosophy of serving things as-is without too many work that slow things down. Maybe I could see dependency prebundling falling back to I took another look in the issue and it seems to not be a regression like I thought. It is working as expected and only needs the right |
What is the recommended way to target older versions of a browser for development/debugging purposes? I've tried setting the three different target parameters but none of them seem to be working to change the target of what the NPM dependencies are transformed to. |
|
So would you recommend using |
Yes that would be the way, however it may be bring a slower development loop depending on your project size. It's a tradeoff Vite makes for the DX side of things. |
I'm using explicit resource management feature, which hasn't been supported by any browsers, nor node. Currently, I add a plugin which calls esbuild in transform hook, which do work despite breaking the sourcemap. After some test, seems that my problem isn't related to target, as vite does use es2022 as target when I inspect into it. Maybe there are some other flags that disable transpiling logic. Things get weird. I've copied the config that passed into esbuild by vite to my plugin, which still works. Does it mean that esbuild behaves differently between outside and inside vite? config copied from debug console. {
target: 'es2022',
charset: 'utf8',
jsxDev: true,
minify: false,
minifyIdentifiers: false,
minifySyntax: false,
minifyWhitespace: false,
treeShaking: false,
keepNames: false,
supported: {
'dynamic-import': true,
'import-meta': true
},
loader: 'ts',
tsconfigRaw: {
compilerOptions: {
target: 'es2022',
verbatimModuleSyntax: true
}
}
} |
Inability to override the default |
You can set |
@bluwy thanks. I did try changing Edit: actually it works for export default {
esbuild: {
jsx: "automatic",
target: "es2020",
include: /\.jsx?$/,
jsxImportSource: "preact",
}
} Edit 2: I figured out that the export default {
esbuild: {
jsx: "automatic",
target: "es2020",
include: /\.jsx?$/,
exclude: [],
jsxImportSource: "preact",
}
} |
Describe the bug
When setting a build target in the config using either
build.target
oresbuild.target
, this only applies tovite build
. So far, this is expected, since #10207 automatically sets the esbuild target toesnext
when usingvite dev
. However, when I import a library that requires the target to be set toesnext
(bson for example) and try runningvite dev
I get this error message:Running
vite build
works fine. So I am wondering, why the target environment duringvite dev
is set to the default target instead ofesnext
.Reproduction
https://stackblitz.com/edit/vitejs-vite-rfowdk?file=main.js
Steps to reproduce
vite build
succeedsvite dev
failsSystem 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: 16.20.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.4.2 - /usr/local/bin/npm pnpm: 8.6.3 - /usr/local/bin/pnpm npmPackages: vite: ^4.4.0 => 4.4.2
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: