import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router #526

iamgamelover · 2024-03-11T08:16:44Z

Hello everyone,

I used import { createDataItemSigner, message, dryrun } from "@permaweb/aoconnect"; in a Next.js project.
Running on localhost, get an error on the browser page.

./node_modules/@permaweb/aoconnect/dist/index.js
Attempted import error: 'warp-arbundles' does not contain a default export (imported as 'WarpArBundles').

I changed to const { createDataItemSigner, message, dryrun } = require("@permaweb/aoconnect"); and it's working.
But when I'm deploying it to vercel.com, get a new error on the vercel deploy page:

TypeError: Cannot assign to read only property 'name' of function 'class A extends Error{static{this.name="InvalidSchedulerLocation"}constructor(...e){super(...e),this.name=A.name}}'
--
 at <static_initializer> (/vercel/path0/.next/server/app/testao/page.js:34:124266)
at 25290 (/vercel/path0/.next/server/app/testao/page.js:34:124244)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)
at 8672 (/vercel/path0/.next/server/app/testao/page.js:69:2159)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:143)

Anybody can give me some advices? Thanks.

The text was updated successfully, but these errors were encountered:

TillaTheHun0 · 2024-03-11T13:56:13Z

Hey @iamgamelover , sorry you're having issues.

Both of these issues are downstream from NextJS' config. The first issue is most likely due to NextJS webpack config -- aoconnect is not importing a default export from warp-arbundles. This is the line in aoconnect/dist/index.js:

import * as WarpArBundles from "warp-arbundles";
var { createData, ArweaveSigner } = WarpArBundles;

I suspect something with NextJS webpack config is trying to support the myriad of ESM+CJS combinations that exist in NodeJS ecosystem, and is getting tongue tied. Sounds like the require get's around that issue though.

The seconds issue is an error in NextJS' static code analysis (also being done by Webpack, it seems). It's claiming that read-only property name cannot be reassigned, in relation to this error class

But this is definitely valid using static members.

Maybe there's a way to suppress the static check with NextJS?

TillaTheHun0 · 2024-03-11T17:49:19Z

fixed by changes in #527 . Closing.

iamgamelover · 2024-03-12T01:46:30Z

Thank you, Sir!
I also downgrade the NextJS to v13.5.6 to solve this problem. Used v14 before. :-)

TillaTheHun0 · 2024-03-12T01:51:25Z

@iamgamelover we determined that an issue only occurs when using NextJS' "App Router".

So another workaround is to not use App Router and instead use conventional API routes. That worked with the latest version of NextJS.

We'll need to investigate the deal with App Router, but that seems to be the source of the issue.

TillaTheHun0 · 2024-03-19T15:28:34Z

Reopening. The original issue was solved, but it unveiled another issue when using NextJS' App Router.

Merdi-kim · 2024-03-19T15:34:16Z

Adding the screenshot just for reference

Merdi-kim · 2024-03-19T15:37:45Z

next.js version 13.5.6 seems to be working. Thanks to @iamgamelover 's answer

Merdi-kim · 2024-03-19T15:38:54Z

But I can help investigate the issue with next.js 14 and see if there are workarounds without downgrading

femaury · 2024-04-09T14:30:23Z

Hey @Merdi-kim @TillaTheHun0 has any progress been made on this? Happy to help if I can, would love to not have to downgrade or go back to the pages api 😄

I was digging through the AO discord and there was some talk about this PR warp-contracts/warp#514 potentially helping things? Haven't been able to find how it relates to this exactly though...

TillaTheHun0 · 2024-04-09T16:50:49Z

@TillaTheHun0 afaik, no progress has been made on this. It's definitely something to do with NextJS App Router, as using NextJS "conventional" api routes works, even on latest versions of NextJS.

Re: PR to warp: aoconnect doesn't use warp, but it uses warp-arbundles which is a lightweight ANS-104 implementation. The idea was maybe submitting a PR to warp-arbundles like the PR there submitted to warp, since it seems to be a similar issue. I'm not sure if anyone is currently tracking that down.

jrdn91 · 2024-06-12T19:48:44Z

As far as I can tell, this is an issue with Webpack which is what Next.js uses under the hood. There is an open issue with little traction on the Next.js repo here vercel/next.js#49120

And there are some other discussions that are giving some extra context

vercel/next.js#32714
webpack/webpack#4674

One fix is to simply append /browser to the end of the import which forces the module resolution to resolve to a specific file instead of using it's resolution logic to determine which field is best. That looks something like this

...
import { createDataItemSigner, message } from "@permaweb/aoconnect/browser";
...

However, you can edit the next.config.mjs file to "rewrite" the package to point to browser so you don't have to edit this each time, and so that auto import can keep working as normal...

...
const nextConfig = {
  webpack: (config, { isServer }) => {
    // Add the alias to the webpack configuration
    config.resolve.alias["@permaweb/aoconnect"] = path.resolve(
      process.cwd(), // __dirname is not available in all environments this may run in
      "node_modules/@permaweb/aoconnect/dist/browser"
    );

    // Return the modified config
    return config;
  },
};
...

TillaTheHun0 mentioned this issue Mar 11, 2024

aoconnect to support for NextJS apps #527

Merged

TillaTheHun0 closed this as completed Mar 11, 2024

TillaTheHun0 reopened this Mar 19, 2024

TillaTheHun0 added help wanted Extra attention is needed connect ao connect labels Mar 19, 2024

TillaTheHun0 changed the title ~~import objects from "@permaweb/aoconnect" get error in a Next.js project.~~ import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router Mar 19, 2024

TillaTheHun0 mentioned this issue May 14, 2024

Warp Arbundles is not exported correctly when using Next JS #707

Closed

TillaTheHun0 added the bug Something isn't working label May 23, 2024

jrdn91 mentioned this issue Jun 5, 2024

fix(connect): removes default export check causing error when importing #772

Closed

jrdn91 mentioned this issue Jun 12, 2024

fix(connect): add note to readme about usage with Next.js #792

Merged

jrdn91 added a commit that referenced this issue Jun 12, 2024

fix(connect): add note to readme about usage with Next.js #526

a31b1e9

TillaTheHun0 assigned jrdn91 Jun 12, 2024

jrdn91 added a commit that referenced this issue Jun 13, 2024

fix(connect): add note to readme about usage with Next.js #526

c71ecc5

jrdn91 added a commit that referenced this issue Jun 13, 2024

fix(connect): add note to readme about usage with Next.js #526

8516434

jrdn91 added a commit that referenced this issue Jun 13, 2024

fix(connect): add note to readme about usage with Next.js #526

622f1d1

jrdn91 added a commit that referenced this issue Jun 13, 2024

fix(connect): add note to readme about usage with Next.js #526

4aeb407

jrdn91 closed this as completed in #792 Jun 13, 2024

jrdn91 mentioned this issue Jun 17, 2024

fix(connect): fix webpack module resolution for browsers #798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router #526

import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router #526

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router #526

import objects from "@permaweb/aoconnect" get error in a Next.js project when using NextJS App Router #526

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!