The web assembly module seems to be missing from the package

[SubhoYadav]

[alexjg]

This looks like it's some artifact of the bundler you are using, can you post a minimal reproduction of the issue somewhere?

[SubhoYadav]

Ya sure, here are the steps to reproduce the bug

1. Create a new next app with latest nextjs version
2. Follow the instructions of creating a new repo and a new document from the quick start guide here: https://automerge.org/docs/quickstart/

Also I will be more than happy, if I could contribute to the project, really interested in CRDTs Thanks

[alexjg]

Could you put up a repo somewhere with the example you describe above? (I know it's straightforward but the less scope there is for me to misunderstand you the better).

[SubhoYadav]

Here is the example repo: https://github.com/SubhoYadav/automerge-example

[alexjg]

Hmm, I see the problem. I had a crack at solving this by enabling the webassembly support in webpack but I run into other problems then. I'll try and have more of a look when I'm back from holidays.

For reference there's some useful stuff here: vercel/next.js#29362

[SubhoYadav]

Thank you very much

[rohitvpatil0810]

Is this issue solved?

[HerbCaudill]

I'm running into this as well, trying to port a functioning app from vanilla React to Next.js.

I've put up a simple repro here:
https://github.com/HerbCaudill/next-automerge-wasm

Output:

> next-automerge-wasm@0.1.0 build /Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
   Collecting page data  .Error: ENOENT: no such file or directory, open '/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/app/automerge_wasm_bg.wasm'
    at Object.openSync (node:fs:581:18)
    at Object.readFileSync (node:fs:457:35)
    at 4 (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/app/page.js:7:281)
    at t (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/webpack-runtime.js:1:142)
    at 4689 (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/app/page.js:1:16734)
    at Function.t (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/webpack-runtime.js:1:142)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/utils.js:919:21)
    at async /Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/utils.js:1138:17
    at async Span.traceAsyncFn (/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:151:20) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/.next/server/app/automerge_wasm_bg.wasm'
}

> Build error occurred
Error: Failed to collect page data for /
    at /Users/herbcaudill/Code/HerbCaudill/next-automerge-wasm/node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/utils.js:1258:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  . ELIFECYCLE  Command failed with exit code 1.

// next.config.mjs
const nextConfig = {
  webpack: function (config, options) {
    config.experiments = { asyncWebAssembly: true, layers: true }
    return config
  },
}

I get the same error whether or not the config.experiments.asyncWebAssembly flag is set.

[HerbCaudill]

When I run pnpm dev, I get this error:

### Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: object. You likely forgot to export your component from the
file it's defined in, or you might have mixed up default and named imports.

Check the render method of `StaticGenerationSearchParamsBailoutProvider`.

Call Stack
createFiberFromTypeAndProps
node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (27799:16)
...

I came across this comment which suggests that this is intended behavior:

I don't think this is a bug. WebAssembly instantiation is supposed to be async. In a client component, you would probably want a dynamic import and React.lazy/suspense.

Following the proposed code, I was able to get this appalling monstrosity to run:

'use client'

import { useEffect, useState } from 'react'

export default function PageComponent() {
  const [message, setMessage] = useState<string | undefined>(undefined)
  useEffect(() => {
    import('@automerge/automerge').then(({ next: A }) => {
      const foo = A.from({ message: 'Hello, world!' })
      setMessage(foo.message)
    })
  }, [])

  return <p>{message ?? 'Loading...'}</p>
}

I don't understand the whole "wasm has to be async" thing -- obviously, I can't be jumping through all those hoops every time I want to use Automerge, and somehow Vite manages to bundle Automerge's wasm with no issues. I suppose I could just abandon Next.js, but it is far and away the most widely used website framework for React, so I don't think Automerge can just write it off:

So ... I'm not sure where that leaves us.