Next.js Discord

Discord Forum

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

Unanswered
Akbash posted this in #help-forum
Open in Discord
AkbashOP
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!

3 Replies

AkbashOP
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;
AkbashOP
🥺