Encountering an issue while building my project in Vite - The configured target environment does not support top-level await

Question

Encountering an issue while building my project in Vite - The configured target environment does not support top-level await

I attempted to compile my project using vite,

my project - https://github.com/yakovcohen4/starbucks-openlayers

Running npm run dev works fine.

However, I encountered an error when trying to build it.

Error message:

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

I suspect the issue lies in trying to fetch data at this link (line 22+23) - https://github.com/yakovcohen4/starbucks-openlayers/blob/main/starbucks-project/src/main.ts

const shopsData = await fetchStarbucksShops();

If anyone has faced this problem before, I would appreciate any help.

typescript vite

Answer 1

Answer №1

Introducing top-level-await, a cutting-edge ES feature that may not be compatible with outdated browsers. If you have confidence that your audience is on more recent browser versions and can handle top-level-await, you can configure your vite.config file as follows:

export default defineConfig({
  build: {
    target: 'esnext' //ensure support for the latest ES features in modern browsers 
  }
})

or

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true //facilitating compatibility with top-level-await features in browsers
    },
  }
})

Answer 2

Introducing top-level-await, a cutting-edge ES feature that may not be compatible with outdated browsers. If you have confidence that your audience is on more recent browser versions and can handle top-level-await, you can configure your vite.config file as follows:

export default defineConfig({
  build: {
    target: 'esnext' //ensure support for the latest ES features in modern browsers 
  }
})

or

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true //facilitating compatibility with top-level-await features in browsers
    },
  }
})

Answer 3

Answer №2

If you are facing the same issue with both development and build commands, try adding the following code snippet to your vite.config.js file:

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext'
    }
  },
  build: {
    target: 'esnext'
  },
  // more config options ...
})

Answer 4

If you are facing the same issue with both development and build commands, try adding the following code snippet to your vite.config.js file:

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext'
    }
  },
  build: {
    target: 'esnext'
  },
  // more config options ...
})

Answer 5

Answer №3

"Top-level await" is a feature expected in ES2022. To check browser support, visit CanIUse.com - await: top-level.

Option 1 - If your supported browsers include top-level await, you can overlook the error using the Vite config provided below. This method specifically targets disabling the build error for this ES feature without masking potential other breaking changes.

To address source code issues causing the error:

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true
    },
  },
});

To tackle errors from specific dependencies like pdfjs-dist:

export default defineConfig({
  optimizeDeps: {
    include: ["pdfjs-dist"],
    esbuildOptions: {
      supported: {
        "top-level-await": true
      },
    },
  },
});

Option 2 - Another approach is to use a Vite plugin such as vite-plugin-top-level-await to eliminate top level awaits. Keep in mind that adding another dependency may complicate debugging and affect production code.

Answer 6

"Top-level await" is a feature expected in ES2022. To check browser support, visit CanIUse.com - await: top-level.

Option 1 - If your supported browsers include top-level await, you can overlook the error using the Vite config provided below. This method specifically targets disabling the build error for this ES feature without masking potential other breaking changes.

To address source code issues causing the error:

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true
    },
  },
});

To tackle errors from specific dependencies like pdfjs-dist:

export default defineConfig({
  optimizeDeps: {
    include: ["pdfjs-dist"],
    esbuildOptions: {
      supported: {
        "top-level-await": true
      },
    },
  },
});

Option 2 - Another approach is to use a Vite plugin such as vite-plugin-top-level-await to eliminate top level awaits. Keep in mind that adding another dependency may complicate debugging and affect production code.

Answer 7

Answer №4

Before moving forward, make sure to review the following link: https://github.com/vitejs/vite/issues/6985. If you're unable to find a solution, attempt creating a large asynchronous function that runs itself to reduce the reliance on await statements;

    (async () => {
    export const shopsData: shopType[] = await fetchStarbucksShops();
    export const countryGeoData: countryGeoDataType = await fetchGeoJsonCountry();
    .
    .
    .
    .
    .
     })();

This method may not be successful. It is recommended to avoid using top-level awaits by incorporating them within the asynchronous function or utilizing .then() instead.

Answer 8

Before moving forward, make sure to review the following link: https://github.com/vitejs/vite/issues/6985. If you're unable to find a solution, attempt creating a large asynchronous function that runs itself to reduce the reliance on await statements;

    (async () => {
    export const shopsData: shopType[] = await fetchStarbucksShops();
    export const countryGeoData: countryGeoDataType = await fetchGeoJsonCountry();
    .
    .
    .
    .
    .
     })();

This method may not be successful. It is recommended to avoid using top-level awaits by incorporating them within the asynchronous function or utilizing .then() instead.

Encountering an issue while building my project in Vite - The configured target environment does not support top-level await

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular click switch Component keeps track of its previous state

Could JOI be used to validate unidentified keys within nested data structures?

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

I am having trouble with updating an array in React useState. Every time I try to make changes, it keeps reverting back to the initial state. What could

Trying to create a function in TypeScript that works like lodash's "bindKey"?

Searching and adding new elements to a sorted array of objects using binary insertion algorithm

Using AWS StepFunctions to add a prefix to an input string

"Upon the addition of a child, no response is being given

When assigning JSON to a class object, the local functions within the class became damaged

Encountering Errno: -4071 with EINVAL in NextJS, issues persisting with resolution

The type NgxMatDatetimePicker cannot be assigned to type MatDatepickerBase

Define the type as an array of any attributes from an interface

Links do not open in a new tab or new window as intended

Incorporate Select2 functionality within the Angular2 application

The navigate function in this.router is not functioning as intended

Having trouble implementing two-way binding in Angular for a specialized component?

Wait for a minimum of X milliseconds using RxJS

Showing Nested Numerical Objects Post RequestBeing Made

Ensuring the safety of generic types in Typescript

Utilize API with unique characters in the URL