Buffer is not defined

[Diego Krefta]

Hello everyone, I'm having some issues when I'm using the storybook ( "storybook": "^7.0.4",
) and nextjs ( "next": "^12.3.1")

Unexpected error while loading ./molecules/Menu/Menu.stories.tsx: Buffer is not defined
 ReferenceError: Buffer is not defined
    at ./node_modules/@peculiar/webcrypto/build/webcrypto.es.js (http://localhost:6006/vendors-node_modules_accounts_client_lib_index_js-node_modules_accounts_graphql-client_lib_in-a8d6b8.iframe.bundle.js:32620:23)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:283:25)
    at ./node_modules/iron-session/dist/index.mjs (http://localhost:6006/vendors-node_modules_accounts_client_lib_index_js-node_modules_accounts_graphql-client_lib_in-a8d6b8.iframe.bundle.js:129867:77)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:283:25)
    at ./utils/security.ts (http://localhost:6006/main.iframe.bundle.js:86956:70)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:283:25)
    at ./business-layer/contracts/auth/rq-hooks/mutations.ts (http://localhost:6006/main.iframe.bundle.js:1275:73)
    

 import Crypto from 'crypto';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

Crypto.timingSafeEqual = function timingSafeEqual(a, b) {
  if (!Buffer.isBuffer(a) || !Buffer.isBuffer(b) || a.length !== b.length) {
    throw new TypeError('Error in cryptography verification.');
  }
  let out = 0;
  let i = -1;
  while (++i < a.length) out |= a[i] ^ b[i];
  return out === 0;
};

export function middleware(request: NextRequest) {
  if (request.nextUrl.href.includes('/core/_next')) {
    return NextResponse.rewrite(request.nextUrl.href.replace('/core/_next', '/_next'));
  }
}

I tried to fix it with the middleware.ts changes ( check above) but I still not seeing my components if I use the sealData on my session, any workaround? ( if I remove the sealData it's not happening haha but I want to have the iron session )

Thanks

[Vincent Voyer]

Hey there, iron-session v8 is live now 👍 https://github.com/vvo/iron-session and compatible with app router. We even have demos: https://get-iron-session.vercel.app/

Good luck.