Get error to build my project in Vite - Top-level await is not available in the configured target environment

Question

I try to build my project in vite,

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

I run npm run dev and all work.

but when I run to build it I get an error.

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

I try to fetch a data and think here is the problem link (line 22+23) - https://github.com/yakovcohen4/starbucks-openlayers/blob/main/starbucks-project/src/main.ts

const shopsData = await fetchStarbucksShops();

If anyone encounters this curse I would be happy to help

Hi. I hope one of the response answered your question. If it did, could you please mark it as the accepted answer? Thanks! — ForcedFakeLaugh
– ForcedFakeLaugh, Commented Oct 6, 2024 at 5:49
@ForcedFakeLaugh Hi, i marked the response that works for me. and this is my code export default defineConfig({base: './', build: { target: 'esnext'}, }); — yakov
– yakov, Commented Oct 6, 2024 at 12:28

ForcedFakeLaugh · Accepted Answer · 2023-09-06 06:34:13Z

76

Top-level-await is a new es feature which wouldn't run in old browsers. If you believe your users use relatively new versions and can handle top-level-await, you can set up vite.config like this:

export default defineConfig({
  build: {
    target: 'esnext' //browsers can handle the latest ES features
  }
})

or

export default defineConfig({
  esbuild: {
    supported: {
      'top-level-await': true //browsers can handle top-level-await features
    },
  }
})

edited Sep 6, 2023 at 6:34

answered Mar 25, 2023 at 0:33

ForcedFakeLaugh

1,2072 gold badges15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zymotik Over a year ago

I prefer setting supported features so that I can see other potential errors if they arise in future. esnext is not a fixed version. See my answer for how to target a specific dependency too.

kmars Over a year ago

Can someone help me understand why this worked please? I already had lib: { formats: 'esnext' }, but adding this option was the only thing that made it work. Is it because it asserts to esbuild to just use top level await, and the formats option does not?

cprcrack Over a year ago

I prefer to use target: 'es2022' as that's the oldest target that will work. Source: en.wikipedia.org/wiki/…

Samuel RIGAUD · Accepted Answer · 2024-11-29 21:25:48Z

39

For those who experience the same issue in the both dev and build commands, add the following

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

edited Nov 29, 2024 at 21:25

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Dec 12, 2023 at 5:34

Maduka Jayalath

1,7831 gold badge18 silver badges18 bronze badges

4 Comments

RandomUsername Over a year ago

This solved the problem for me. "@vitejs/plugin-vue": "^5.0.2","vite": "^5.0.11"

Ali Over a year ago

Adding esbuildOptions: { target: 'esnext' } to optimizeDeps was the fix for me. Tried other variations of build and esbuild target settings but it was this one that fixed it.

Cephas Over a year ago

Same as above comments

marzetti Feb 24 at 10:26

If this is a new "vite.config.js" file you will probably need "import { defineConfig } from 'vite'" as your first line, otherwise you'll get "ReferenceError: defineConfig is not defined" when you run "npx vite build"

Zymotik · Accepted Answer · 2024-01-22 12:39:58Z

"Top-level await" is am ES2022 feature. Check to see which browsers are supported using CanIUse.com - await: top-level.

Option 1 - If top-level await is in the list of your supported browsers, then you can safely ignore this error with the Vite config below. This is my prefered method of disabling the build error as it only ignores a specific ES feature and doesn't hide errors from other potential breaking changes.

Set up your vite.config.js or vite.config.ts like this if the error is coming from your source code:

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

Set up your vite.config.js or vite.config.ts like this if the error is coming from a specific dependency, for instance pdfjs-dist (removing the dependency name will apply the rule to all dependencies):

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

Option 2 - You can use a Vite plugin to remove the top level await. An example would be vite-plugin-top-level-await. The downside with this option is that you are adding yet another dependency to your project and it will also affect your production code. Bugs may be more difficult to trace as you have a more unique configuration.

Cengiz · Accepted Answer · 2022-06-16 12:01:25Z

4

First, check this; https://github.com/vitejs/vite/issues/6985. If you can't find an answer try this to create a big fat async function that executes itself to decrease the level of your await;

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

It might not work. You should avoid top-level await somehow, whether use await inside the async function, or use .then()

answered Jun 16, 2022 at 12:01

Cengiz

3021 silver badge9 bronze badges

1 Comment

yakov Over a year ago

Thank you very much, in the end, I saw this repo and it helps me ... (thank you for your answer)

Wakil Ahmed · Accepted Answer · 2025-04-22 13:29:48Z

1

Adding this to vite config will solve the problem:

{
  build: {
    target: "es2022"
  },
  esbuild: {
    target: "es2022"
  },
  optimizeDeps:{
    esbuildOptions: {
      target: "es2022",
    }
  }
}

Find more here: https://github.com/mozilla/pdf.js/issues/17245

answered Apr 22 at 13:29

Wakil Ahmed

1,4671 gold badge13 silver badges30 bronze badges

Collectives™ on Stack Overflow

Get error to build my project in Vite - Top-level await is not available in the configured target environment

5 Answers 5

3 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related