RollupError: Module format "umd" does not support top-level await. Use the "es" or "system" output formats rather

Question

RollupError: Module format "umd" does not support top-level await. Use the "es" or "system" output formats rather.

I can't figure out what to do. I'm trying to build my Vite project but getting this error. Is there a way around?

Error is caused by this file of mine:

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.

//import { dotnet2 } from './_framework_ide_helper/dotnet.js'
import { dotnet as dotnet1 } from './_framework/dotnet.js'
import { dotnet as dotnet2 } from './_framework/dotnet.js'



const dotnetEnv2 = await dotnet2
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .create();

const setModuleImports_ideHelper = dotnetEnv2.setModuleImports;
const getAssemblyExports_ideHelper = dotnetEnv2.getAssemblyExports;
const getConfig_ideHelper = dotnetEnv2.getConfig;

setModuleImports_ideHelper('ide-helper.js', {
    //window: {
    //    location: {
    //        href: () => globalThis.window.location.href
    //    }
    //}
});


var str = `&a = 5;
&b = 8;
if (&a > &b)
{
    &c = &a;
}
else if (&a == &b)
{
    &c = &a;
}
else
    &c = &b;`;

const config = getConfig_ideHelper();
export const exportsHelper = await getAssemblyExports_ideHelper(config.mainAssemblyName);

Here is my vite.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from "vite-tsconfig-paths";
import { resolve } from "path"
import dts from "vite-plugin-dts"


export default defineConfig({

    plugins: [react(), tsconfigPaths(), dts({ rollupTypes: true })],

    build: {
        minify: false,
        lib: {
            entry: resolve(__dirname, "src/main.ts"),
            name: "ide",
            fileName: "ide"
        },
        rollupOptions: {
            external: [
                "react",
                "react-dom",
                "react/jsx-runtime",
            ],
            output: {
                globals: {
                    react: "React",
                    "react-dom": "ReactDOM",
                    "react/jsx-runtime": "react/jsx-runtime",
                },
                dir: 'dist',
                format: 'es',
                entryFileNames: "[name].js"
            },
        },
        target: "esnext",

    },
    esbuild: {
        target: "es2022"
    },
    optimizeDeps: {
        esbuildOptions: {
            target: "es2022",
        }
    },
    resolve: {
        alias: {
            '@src': resolve(__dirname, 'src'),
        },
    },
});

I tried to remove await keywords and use with promise but it's not possible. I don't know what to do. Any help is appreciated. Thank you.

spender · Accepted Answer · 2024-07-04 09:26:09Z

0

defineConfig can accept a function that returns the config object. This function can be async (i.e. return a promise)

Therefore you can

defineConfig(async ()=>{
    // await something exported from another file
    return { /* some config */}
})

answered Jul 4, 2024 at 9:26

spender

121k36 gold badges245 silver badges369 bronze badges

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

2 Comments

shmowzow Over a year ago

Sorry, I don't get why I need to return config object.

spender Over a year ago

@KemalGüneş defineConfig accepts either a config object or a function that returns a config object. When you call defineConfig with a function, the internals of defineConfig will call that function and then use the value that it returns as the config.

Collectives™ on Stack Overflow

RollupError: Module format "umd" does not support top-level await. Use the "es" or "system" output formats rather

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related