reactjswebpacknext.jsturbopack

When I run Next.js 13 with turbopack I get "TypeError: Class extends value #" but no error with webpack


I have an app that uses Next.js 13. I have been running it with Turbopack and a few commits ago it stopped working. It now fails with a vague error. It says TypeError: Class extends value # in the browser, Uncaught ReferenceError: $RefreshSig$ is not defined in the browser console, Error during SSR Rendering TypeError: Class extends value #<Object> is not a constructor or null. This is what it looks like in the browser:
enter image description here

If I could just get a more specific error I could start to debug. The launch script in my package.json file looks like this for turbopack "next dev --turbo --show-all"

So how do I get a more specific traceable error?


Solution

  • there are two open github issues:

    https://github.com/vercel/turbo/issues/2361

    [...]/node_modules/node-fetch/lib/index.mjs Error resolving commonjs request unable to resolve module "encoding"

    I installed encoding inside the directory (I made some other changes but I forgot) and then I got another error:

    enter image description here

    It is an also has an open issue: https://github.com/vercel/turbo/issues/2372

    From the last open issue, someone commented:

    I think there are a few issues being reported here.

    1- Node stdlib requires/imports are failing

    2- Highly dynamic requires/imports are failing

    I think we can get stdlib imports to work in SSR, and should stop that error from reporting. If you use it in client side, then we need to still warn.

    For the dynamic requires (it's using eval!), this is challenging to support. Again, we could just let node handle it, but that'll break if you're trying to do a relative require (this case requires a node_module, which would work ok).

    I think this clearly explains the issue. turpopack will give us alot of headache.