AztecSDK with NextJS: Compile Error

[notjustinshaw]

Expected Behaviour

Following the documentation should produce a working app.

Current Behaviour

When making a new NextJS project, the app does not work. I created an example project to reproduce the error at: https://github.com/justinalexandershaw/with-nextjs

You should be able to clone that repository and then run npm install to install the project dependencies, and then npm run dev to start the website on localhost:3000.

The app currently stops with the following errors:

on chrome:
- Error: missing provider 
- (argument="provider", value=undefined, code=INVALID_ARGUMENT, version=providers/5.0.21)

on brave:
- ./node_modules/@aztec/sdk/index.js 
- Critical dependency: the request of a dependency is an expression
and
- WriteError: QuotaExceededError
- at eval (webpack-internal:///./node_modules/@aztec/sdk/index.js:662:2661)

The build logs can be found here: https://github.com/justinalexandershaw/with-nextjs/blob/master/output.txt

Steps to Reproduce (for bugs)

1. Create a new NextJS project (npx create-next-app)
2. Install AzdecSDK (npm install @aztec/sdk)
3. Update the webpack config for WASM:

const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
  webpack: (config) => {
    config = {
      plugins: [
        new CopyPlugin({
          patterns: [
            {
              from: 'node_modules/@aztec/sdk/*.(wasm|worker.js)',
              to: '[name].[ext]',
            },
          ],
        }
      ),
    ], ...config};
    return config
  },
}

4. Run the installation script when the app loads:

import { createWalletSdk } from '@aztec/sdk';

const rollupProviderUrl = 'https://api.aztec.network/falafel';
const aztecSdk = await createWalletSdk(window.ethereum, rollupProviderUrl);

console.info(aztecSdk.getLocalStatus());
// initState: 'UNINITIALIZED'

await aztecSdk.init();

console.info(aztecSdk.getLocalStatus());
// initState: 'INITIALIZED'

await aztecSdk.destroy();

console.info(aztecSdk.getLocalStatus());
// initState: 'DESTROYED'

Your Environment

Running on a Macbook Pro Intel 13" 2020

• AZTEC packages and their versions: @aztec/sdk: v2.0.87
• Node and yarn version: NodeJS v16.4.2, npm v7.18.1
• Operating System and version: macOS Big Sur 11.4

[notjustinshaw]

If you manually copy over the following files from node_modules to /public so that these files will be accessible to the scripts, we can get past the webpack problem.

1. barretenberg.wasm
2. worker.0de6408f.js
3. worker.0de6408f.js.map

Either way, we still get the following error:

- ./node_modules/@aztec/sdk/index.js
- Critical dependency: the request of a dependency is an expression

[notjustinshaw]

cc @joeandrews