Usage in Next.js server components

[icrayix]

Scenario & Reproduction Steps

1. scaffold a new next.js app with npx create-next-app@latest and default options
2. npm install @1password/sdk
3. replace contents of app/page.tsx with

import { createClient } from "@1password/sdk";

export default async function Home() {
  // Creates an authenticated client.
  const client = await createClient({
    auth: process.env.OP_SERVICE_ACCOUNT_TOKEN!,
    // Set the following to your own integration name and version.
    integrationName: "My 1Password Integration",
    integrationVersion: "v1.0.0",
  });

  return null;
}

4. run npm run dev

Actual Behavior

When navigating to localhost:3000 I get the following error in the console:

Error: ENOENT: no such file or directory, open '<project-root>/.next/server/vendor-chunks/core_bg.wasm'
    at Object.openSync (node:fs:581:18)
    at Object.readFileSync (node:fs:460:35)
    at __webpack_require__ (<project-root>/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (<project-root>/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (<project-root>/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.tsx:5:72)
    at (rsc)/./app/page.tsx (<project-root>/.next/server/app/page.js:184:1)
    at Function.__webpack_require__ (<project-root>/.next/server/webpack-runtime.js:33:43)
    at async Promise.all (index 0

Expected Behavior

No response

SDK version

@1password/sdk@0.1.

Additional information

One fix I found is to run cp node_modules/@1password/sdk-core/nodejs/core_bg.wasm .next/server/vendor-chunks AFTER starting the dev server using npm run dev.
This has to be run every single time when starting the dev server and thereby is very infeasible.

[AndyTitu]

Hi @icrayix, I'm noticing you're using our SDK in a browser based client, in the frontend React code. Our JS SDK doesn't currently support browsers, meaning we haven't officially tested this use case, and we are only claiming compatibility with Node.js. We looked into supporting browser apps so it's not completely uncharted territory, so I will raise this issue internally as a feature request for browser support.

To get you unblocked faster, I'm wondering whether your use case can leverage Next.JS's server side rendering feature to run the SDK in a node.js environment and still get your required data on the frontend.

[icrayix]

Hi @AndyTitu, thanks for your response!
In the Next.js App Router (available in version 13 and above), which I'm using, React Server Components are the default. This means that these components exclusively run on the server and only the rendered html is sent to the client.
Thereby, the code snippet I sent for the reproduction does only run on the server in the Node.js runtime.

[AndyTitu]

Okay, I see. In this case, I think the problem lays somewhere with the webpack bundling that's going on. Bundlers are also not yet on the supported list of target environments as we have never officially tested for these scenarios (it might be that some do work - like in your case after moving one file around). I'll modify our README to reflect this while we work on better supporting these use cases as well.

[icrayix]

Okay, thanks. I appreciate that!