Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when building in Next.js 14 app #3

Open
femaury opened this issue Aug 30, 2024 · 0 comments
Open

Error when building in Next.js 14 app #3

femaury opened this issue Aug 30, 2024 · 0 comments

Comments

@femaury
Copy link

femaury commented Aug 30, 2024

Problem

Using the react wallet kit in a Next.js v14 app does not work. It throws the following error

❯ npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.7

   Creating an optimized production build ...
Failed to compile.

./node_modules/@arweave-wallet-kit/react/dist/index.es.js
Module parse failed: 'super' keyword outside a method (2540:12)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
You may need an additional loader to handle the result of these loaders.
|         var _this;
|         var t = function() {
>             super(...args), _this = this;
|             for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
|                 args[_key] = arguments[_key];

Import trace for requested module:
./node_modules/@arweave-wallet-kit/react/dist/index.es.js
./src/components/ArweaveWalletProvider.tsx


> Build failed because of webpack errors

Reproduction

Simply use the provider component in a barebones Next.js v14 app, you will get the error during build (or dev).
Repo if needed: https://github.com/femaury/wallet-kit-react-nextjs-14

Dist code fix

Modifying the index.es.js dist file directly fixes the build issue (line 2626):

var _n = {}, bt = {};
Object.defineProperty(bt, "__esModule", { value: !0 });
bt.getError = void 0;
class ju extends Error {
  constructor(n, r = {}) {
+    if (r.message) {
+      super(r.message);
+    } else {
+      super();
+    }
+    this.type = n;
+    this.response = r.response;  
-    var t = (...args) => {
-      super(...args);
-      q(this, "type");
-      q(this, "response");
-    };
-    r.message ? t(r.message) : t(), this.type = n, this.response = r.response;
  }
  getType() {
    return this.type;
  }
}
bt.default = ju;

Any clue as what part of the code is causing this? Trying to understand what's causing webpack to produce this error code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant