await import causing error

[msuntharesan]

Hello,
I am trying out next 9.5 and running into an issue with top level await import()
Ex:
index.tsx

const { myFunc } = await import("./file");

export default function Main() {
  const content = myFunc();
  return <div>content</div>;
}

This throws

The default export is not a React Component in page: "/"

In my next.js file, I have

config.experiments = {
  topLevelAwait: true,
  importAsync: true,
  asyncWebAssembly: true,
  importAwait: true,
};

Versions:

"next": "9.5.0",
"typescript": "beta"

"resolutions": {
  "webpack": "^5.0.0-beta.22"
}

Any help is appriciated.

Thanks

[ghost]

Hello! I wanna know as to what ./file means. Is it file.js or file.jsx?

[msuntharesan]

it is file.ts. it is exporting a function.

[ghost]

Ok. So, can you show me the code of file.ts (If you don't mind)?

[todortotev]

#11185

[msuntharesan]

Here is an example of what I am trying to do.
https://github.com/msuntharesan/next-js-wasm

When running with a standalone webpack, this works. I will try to add that to the example as well.
Thanks.

[msuntharesan]

But the async import doesn't have to just wasm. Any top level async import throws the same error

[ghost]

Have you followed the steps in #11185 ? I hope that you have also tried something like this:

(async () => {
    var { myFunc } = await import('./file.ts'); // Make sure you have used await inside an asynchronous function
    // ....
})();

[msuntharesan]

I used react Context to solve this.
Use useEffect to load wasm module and set it as value to Provider then using useContext to get the wasm functions in components.

[ghost]

Oh wow! Alright then! Good answer. I didn't even know what useEffect was used for all this while y know. Now I know thx to this answer