When the target of tsconfig.json is es5, how to use es6 in the configuration file？

[lastnigtic]

I created a vite.config.ts to write my build configuration which includes const.

But vite will fail when loading the configuration file and throw an error Transforming const to the configured target environment ("ES5") is not supported

When I changed the target of tsconfig.json to ES6, it worked fine.

So how to change the target only when building the project with vite?

This may related to evanw/esbuild#1355

[Shinigami92]

Would be helpful if you share your vite.config.ts

[Shinigami92]

I think so, yes
But I also think that it is just an error showing up in your IDE, so ignoring this may be sufficient

Or is it really when starting vite?!

Normally Vite will be used for modern environments 🤔

[lastnigtic]

it's an error

[Shinigami92]

Okay, so as the last line says: "Transforming const to the configured target environment ("es5") is not supported yet"
So it's not supported 🤷

[lastnigtic]

I just want to find a way to escape this without changing my tsconfig.json.

Because I use tsc to compile my files, this leads me to add --target es5 to my compile command.

[strokirk]

I also have this problem, is support tracked in some issue in this repo? I haven't been able to find it.

[trashhalo]

If anyone finds themselves here I was able to work around this issue with patch-package

diff --git a/node_modules/vite/dist/node/chunks/dep-1513d487.js b/node_modules/vite/dist/node/chunks/dep-1513d487.js
index 4b12ad1..4db815a 100644
--- a/node_modules/vite/dist/node/chunks/dep-1513d487.js
+++ b/node_modules/vite/dist/node/chunks/dep-1513d487.js
@@ -38849,7 +38849,7 @@ async function ssrTransformScript(code, inMap, url, originalCode) {
     function defineImport(node, source) {
         deps.add(source);
         const importId = `__vite_ssr_import_${uid++}__`;
-        s.appendLeft(node.start, `const ${importId} = await ${ssrImportKey}(${JSON.stringify(source)});\n`);
+        s.appendLeft(node.start, `var ${importId} = await ${ssrImportKey}(${JSON.stringify(source)});\n`);
         return importId;
     }
     function defineExport(position, name, local = name) {
@@ -38975,7 +38975,7 @@ async function ssrTransformScript(code, inMap, url, originalCode) {
                     declaredConst.add(id.name);
                     // locate the top-most node containing the class declaration
                     const topNode = parentStack[parentStack.length - 2];
-                    s.prependRight(topNode.start, `const ${id.name} = ${binding};\n`);
+                    s.prependRight(topNode.start, `var ${id.name} = ${binding};\n`);
                 }
             }
             else {
@@ -40535,13 +40535,13 @@ function transformCjsImport(importExp, url, rawUrl, importIndex) {
         const lines = [`import ${cjsModuleName} from "${url}"`];
         importNames.forEach(({ importedName, localName }) => {
             if (importedName === '*') {
-                lines.push(`const ${localName} = ${cjsModuleName}`);
+                lines.push(`var ${localName} = ${cjsModuleName}`);
             }
             else if (importedName === 'default') {
-                lines.push(`const ${localName} = ${cjsModuleName}.__esModule ? ${cjsModuleName}.default : ${cjsModuleName}`);
+                lines.push(`var ${localName} = ${cjsModuleName}.__esModule ? ${cjsModuleName}.default : ${cjsModuleName}`);
             }
             else {
-                lines.push(`const ${localName} = ${cjsModuleName}["${importedName}"]`);
+                lines.push(`var ${localName} = ${cjsModuleName}["${importedName}"]`);
             }
         });
         if (defaultExports) {
@@ -40632,7 +40632,7 @@ function buildImportAnalysisPlugin(config) {
     const assetsURL = relativePreloadUrls
         ? `function(dep,importerUrl) { return new URL(dep, importerUrl).href }`
         : `function(dep) { return ${JSON.stringify(config.base)}+dep }`;
-    const preloadCode = `const scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`;
+    const preloadCode = `var scriptRel = ${scriptRel};const assetsURL = ${assetsURL};const seen = {};export const ${preloadMethod} = ${preload.toString()}`;
     return {
         name: 'vite:build-import-analysis',
         resolveId(id) {
@@ -40776,7 +40776,7 @@ function buildImportAnalysisPlugin(config) {
             }
             if (needPreloadHelper &&
                 insertPreload &&
-                !source.includes(`const ${preloadMethod} =`)) {
+                !source.includes(`var ${preloadMethod} =`)) {
                 str().prepend(`import { ${preloadMethod} } from "${preloadHelperId}";`);
             }
             if (s) {
@@ -40946,7 +40946,7 @@ function modulePreloadPolyfillPlugin(config) {
                 }
                 if (!polyfillString) {
                     polyfillString =
-                        `const p = ${polyfill.toString()};` + `${isModernFlag}&&p();`;
+                        `var p = ${polyfill.toString()};` + `${isModernFlag}&&p();`;
                 }
                 return polyfillString;
             }
@@ -41862,8 +41862,8 @@ function cssPostPlugin(config) {
                 const devBase = config.base;
                 return [
                     `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify(path$n.posix.join(devBase, CLIENT_PUBLIC_PATH))}`,
-                    `const __vite__id = ${JSON.stringify(id)}`,
-                    `const __vite__css = ${JSON.stringify(cssContent)}`,
+                    `var __vite__id = ${JSON.stringify(id)}`,
+                    `var __vite__css = ${JSON.stringify(cssContent)}`,
                     `__vite__updateStyle(__vite__id, __vite__css)`,
                     // css modules exports change on edit so it can't self accept
                     `${modulesCode ||
@@ -59941,7 +59941,7 @@ function webWorkerPlugin(config) {
                     const chunk = await bundleWorkerEntry(config, id, query);
                     // inline as blob data url
                     return {
-                        code: `const encodedJs = "${Buffer.from(chunk.code).toString('base64')}";
+                        code: `var encodedJs = "${Buffer.from(chunk.code).toString('base64')}";
             const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
             export default function WorkerWrapper() {
               const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
@@ -62773,9 +62773,9 @@ async function bundleConfigFile(fileName, isESM) {
                 setup(build) {
                     build.onLoad({ filter: /\.[cm]?[jt]s$/ }, async (args) => {
                         const contents = await fs$l.promises.readFile(args.path, 'utf8');
-                        const injectValues = `const ${dirnameVarName} = ${JSON.stringify(path$n.dirname(args.path))};` +
-                            `const ${filenameVarName} = ${JSON.stringify(args.path)};` +
-                            `const ${importMetaUrlVarName} = ${JSON.stringify(pathToFileURL(args.path).href)};`;
+                        const injectValues = `var ${dirnameVarName} = ${JSON.stringify(path$n.dirname(args.path))};` +
+                            `var ${filenameVarName} = ${JSON.stringify(args.path)};` +
+                            `var ${importMetaUrlVarName} = ${JSON.stringify(pathToFileURL(args.path).href)};`;
                         return {
                             loader: args.path.endsWith('ts') ? 'ts' : 'js',
                             contents: injectValues + contents

[danieljaguiar]

@Shinigami92
I am getting a similar issue, the difference is that I can't get it working on ES5... can you help me out?

Error:

X [ERROR] Transforming const to the configured target environment ("ES5") is not supported yet

    vite.config.ts:1:0:
      1 │ const __vite_injected_original_dirname = "C:\\CodeRepositories\\xxx\\client";co... 
        ╵ ~~~~~

  The target environment was set to "ES5" here:

    tsconfig.json:3:14:
      3 │     "target": "ES5",
        ╵               ~~~~~

tsoncifg.json

{
  "compilerOptions": {
    "target": "ES5",
    "types": ["vite/client"],
    "lib": ["dom", "dom.iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import pluginRewriteAll from "vite-plugin-rewrite-all";

export default defineConfig({
  plugins: [pluginRewriteAll(), react()],
  server: {
    proxy: {
      "/api": "http://localhost:4000",
      "/auth/google": "http://localhost:4000",
      "/auth/facebook": "http://localhost:4000",
      "/auth/logout": "http://localhost:4000",
    },
  },
});

[danieljaguiar]

The issue doesn't happen on vite 2.9.14 ... if I bump to 3.0.4 , than I get the error with ES5

[sapphi-red]

#9457 will fix this error.

[htmnk]

stopped working for me after updating vite #9457 (comment)