#Issue with topLevelAwait and async/await in loro-crdt when running Next.js

1 messages · Page 1 of 1 (latest)

formal rain
#

Hi everyone,

I’m running into an issue when trying to use the loro-crdt
package in my Next.js project.

When I import it, I get this warning/error:

The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
../node_modules/.pnpm/loro-crdt@1.5.9/node_modules/loro-crdt/bundler/loro_wasm.js
../node_modules/.pnpm/loro-crdt@1.5.9/node_modules/loro-crdt/bundler/index.js
./lib/ide/editor/loro.ts
./lib/ide/editor/index.ts
./components/ide/editor.tsx
./components/ide/editor/tabs-content.tsx
./components/ide.tsx

I have no idea how to solve this issue, is anyone can help here? Thanks in advanced!

ornate plazaBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

formal rain
#

Here is my tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    },
    "target": "ES2017"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next.config.js"
  ],
  "exclude": ["node_modules"]
}
#

and my next.config.js

// @ts-check

const GRPC_WEB_URL = "http://127.0.0.1:7820";

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: () => {
    return Promise.resolve([
      {
        source: "/apis/:path*",
        destination: `${GRPC_WEB_URL}/:path*`,
      },
      {
        source: "/loro",
        destination: "http://127.0.0.1:7830/",
      },
      {
        source: "/lsp/:path*",
        destination: "http://127.0.0.1:7860/:path*",
      },
    ]);
  },

  /**
   * @param {import('webpack').Configuration} config
   * @returns {import('webpack').Configuration}
   */
  webpack: (config) => {
    // @ts-ignore
    config.experiments = {
      // @ts-ignore
      layers: true,
      // @ts-ignore
      asyncWebAssembly: true,
    };
    // @ts-ignore
    config.module.exprContextCritical = false;
    return config;
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  experimental: {
    reactCompiler: true,
    // typedRoutes: true,
    nodeMiddleware: true,
  },
  output: process.env.NODE_ENV === "production" ? "standalone" : undefined,
};

export default nextConfig;