codesandbox/sandpack

ReferenceError: self is not defined

boar-is opened this issue · 2 comments

boar-is commented

Bug report

Packages affected

  • nodebox

Description of the problem

I can't make the simplest example work with Next.js and Nodebox.

What were you doing when the problem occurred?

What steps can we take to reproduce the problem?

  1. Create a Next.js app.
  2. Install nodebox
  3. Go to page.tsx
  4. Replace the content with:
'use client'

import { Nodebox } from '@codesandbox/nodebox'
import { useEffect, useRef } from 'react'

export default function Home() {
  const iframeRef = useRef<HTMLIFrameElement>(null)

  useEffect(() => {
    const thisEffect = async () => {
      if (!iframeRef.current) {
        return
      }

      const emulator = new Nodebox({
        iframe: iframeRef.current,
      })

      await emulator.connect()
    }

    thisEffect()
  })

  return (
    <div>
      <iframe
        id="nodebox-runtime-iframe"
        ref={iframeRef}
      />
    </div>
  )
}
  1. Get the following error (server):
 X node_modules/@codesandbox/nodebox/build/index.mjs (64:0) @ ../../node_modules/.pnpm/cuid@2.1.8/node_modules/cuid/lib/fingerprint.browser.js
 X ReferenceError: self is not defined
    at __webpack_require__ (/home/projects/stackblitz-starters-nxgtxn/.next/server/webpack-runtime.js:33:42)
    at eval (./app/page.tsx:7:78)
    at (ssr)/./app/page.tsx (/home/projects/stackblitz-starters-nxgtxn/.next/server/app/page.js:151:1)
    at __webpack_require__ (/home/projects/stackblitz-starters-nxgtxn/.next/server/webpack-runtime.js:33:42)
null

Link to sandbox: link

Your Environment

Software Name/Version
nodebox version 0.1.9
Browser N/A
Operating System N/A
theswerd commented

+1 — any idea how to fix this?

  • 👀1