feat!: update esbuild to 0.18.2

packages/vite/package.json

@@ -66,7 +66,7 @@
   },
   "//": "READ CONTRIBUTING.md to understand what to put under deps vs. devDeps!",
   "dependencies": {
-    "esbuild": "^0.17.5",
+    "esbuild": "^0.18.2",
     "postcss": "^8.4.24",
     "rollup": "^3.21.0"
   },

packages/vite/src/node/plugins/esbuild.ts

@@ -56,6 +56,7 @@ type TSConfigJSON = {
   extends?: string
   compilerOptions?: {
     alwaysStrict?: boolean
+    experimentalDecorators?: boolean
     importsNotUsedAsValues?: 'remove' | 'preserve' | 'error'
     jsx?: 'preserve' | 'react' | 'react-jsx' | 'react-jsxdev'
     jsxFactory?: string
@@ -64,6 +65,7 @@ type TSConfigJSON = {
     preserveValueImports?: boolean
     target?: string
     useDefineForClassFields?: boolean
+    verbatimModuleSyntax?: boolean
   }
   [key: string]: any
 }
@@ -101,6 +103,7 @@ export async function transformWithEsbuild(
     // https://esbuild.github.io/content-types/#tsconfig-json
     const meaningfulFields: Array<keyof TSCompilerOptions> = [
       'alwaysStrict',
+      'experimentalDecorators',
       'importsNotUsedAsValues',
       'jsx',
       'jsxFactory',
@@ -109,6 +112,7 @@ export async function transformWithEsbuild(
       'preserveValueImports',
       'target',
       'useDefineForClassFields',
+      'verbatimModuleSyntax',
     ]
     const compilerOptionsForFile: TSCompilerOptions = {}
     if (loader === 'ts' || loader === 'tsx') {
@@ -128,28 +132,13 @@ export async function transformWithEsbuild(
       ...tsconfigRaw?.compilerOptions,
     }
 
-    // esbuild derives `useDefineForClassFields` from `target` instead of `tsconfig.compilerOptions.target`
-    // https://github.com/evanw/esbuild/issues/2584
-    // but we want `useDefineForClassFields` to be derived from `tsconfig.compilerOptions.target`
-    if (compilerOptions.useDefineForClassFields === undefined) {
-      const lowercaseTarget = compilerOptions.target?.toLowerCase() ?? 'es3'
-      if (lowercaseTarget.startsWith('es')) {
-        const esVersion = lowercaseTarget.slice(2)
-        compilerOptions.useDefineForClassFields =
-          esVersion === 'next' || +esVersion >= 2022
-      } else {
-        compilerOptions.useDefineForClassFields = false
-      }
-    }
-
     // esbuild uses tsconfig fields when both the normal options and tsconfig was set
     // but we want to prioritize the normal options
     if (options) {
       options.jsx && (compilerOptions.jsx = undefined)
       options.jsxFactory && (compilerOptions.jsxFactory = undefined)
       options.jsxFragment && (compilerOptions.jsxFragmentFactory = undefined)
       options.jsxImportSource && (compilerOptions.jsxImportSource = undefined)
-      options.target && (compilerOptions.target = undefined)
     }
 
     tsconfigRaw = {
@@ -158,19 +147,22 @@ export async function transformWithEsbuild(
     }
   }
 
-  const resolvedOptions = {
+  const resolvedOptions: TransformOptions = {
     sourcemap: true,
     // ensure source file name contains full query
     sourcefile: filename,
     ...options,
     loader,
     tsconfigRaw,
-  } as ESBuildOptions
+  }
 
   // Some projects in the ecosystem are calling this function with an ESBuildOptions
   // object and esbuild throws an error for extra fields
+  // @ts-expect-error include exists in ESBuildOptions
   delete resolvedOptions.include
+  // @ts-expect-error exclude exists in ESBuildOptions
   delete resolvedOptions.exclude
+  // @ts-expect-error jsxInject exists in ESBuildOptions
   delete resolvedOptions.jsxInject
 
   try {
@@ -199,6 +191,10 @@ export async function transformWithEsbuild(
     if (e.errors) {
       e.frame = ''
       e.errors.forEach((m: Message) => {
+        if (m.text === 'Experimental decorators are not currently enabled') {
+          m.text +=
+            '. Vite 4.4+ now uses esbuild 0.18 and you need to enable them by adding "experimentalDecorators": true in your "tsconfig.json" file.'
+        }
         e.frame += `\n` + prettifyMessage(m, code)
       })
       e.loc = e.errors[0].location