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

ReferenceError: Cannot access 'isBrowser' before initialization #346

Open
clacladev opened this issue Oct 29, 2024 · 4 comments
Open

ReferenceError: Cannot access 'isBrowser' before initialization #346

clacladev opened this issue Oct 29, 2024 · 4 comments
Assignees
Labels
bug Something isn't working

Comments

@clacladev
Copy link

clacladev commented Oct 29, 2024

What is the current behavior?

I am trying to use the JS sdk in a Next.js 15 App Router api route. So executed on the server.

I am instantiating Deepgram as per instructions here with

const deepgram = createClient(process.env.DEEPGRAM_API_KEY);

but I get the following error:

⨯ ReferenceError: Cannot access 'isBrowser' before initialization
    at Module.isBrowser
    ...
  page: '/api/audio/text-to-speech'
}
 POST /api/audio/text-to-speech 500 in 50ms

Steps to reproduce

  • Create a Next.js 15 App router codebase
  • create an api route
  • in the same file add const deepgram = createClient(process.env.DEEPGRAM_API_KEY);
  • call the route
  • error will be thrown in the app console

Expected behavior

To just be able to use the sdk in an api route

Please tell us about your environment

We want to make sure the problem isn't specific to your operating system or programming language.

  • Operating System/Version: macOS
  • Language: TypeScript
  • Browser: Chrome
  • Next.js: 15.0.1
  • @deepgram/sdk: 3.9.0

Other information

This is the stack trace:

⨯ ReferenceError: Cannot access 'isBrowser' before initialization
    at Module.isBrowser (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:147:23)
    at [project]/node_modules/@deepgram/sdk/dist/module/lib/constants.js [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:99:211)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/@deepgram/sdk/dist/module/lib/helpers.js [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:160:177)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/@deepgram/sdk/dist/module/packages/ListenRestClient.js [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:676:175)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/@deepgram/sdk/dist/module/packages/ListenClient.js [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:1269:189)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/@deepgram/sdk/dist/module/DeepgramClient.js [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:2909:185)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/@deepgram/sdk/dist/module/index.js [app-route] (ecmascript) <locals> (/Users/claudio/Dev/web/cuecard/.next/server/chunks/node_modules_@deepgram_sdk_dist_module_6533bc._.js:3030:175)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/libs/deepgram/speech.ts [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[root of the server]__c97bc6._.js:107:182)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/app/api/audio/text-to-speech/route.ts [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[root of the server]__c97bc6._.js:490:132)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at getOrInstantiateModuleFromParent (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:644:12)
    at esmImport (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:132:20)
    at [project]/node_modules/next/dist/esm/build/templates/app-route.js { INNER_APP_ROUTE => "[project]/app/api/audio/text-to-speech/route.ts [app-route] (ecmascript)" } [app-route] (ecmascript) (/Users/claudio/Dev/web/cuecard/.next/server/chunks/_5829b8._.js:47:158)
    at instantiateModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:589:23)
    at instantiateRuntimeModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:652:12)
    at Object.getOrInstantiateRuntimeModule (/Users/claudio/Dev/web/cuecard/.next/server/chunks/[turbopack]_runtime.js:668:12)
    at Object.<anonymous> (/Users/claudio/Dev/web/cuecard/.next/server/app/api/audio/text-to-speech/route.js:13:26)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at mod.require (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:179:18)
    at requirePage (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/require.js:103:84)
    at loadComponentsImpl (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/load-components.js:99:57)
    at async DevServer.findPageComponentsImpl (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/next-server.js:732:36)
    at async DevServer.findPageComponents (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/dev/next-dev-server.js:611:20)
    at async DevServer.renderPageComponent (/Users/claudio/Dev/web/cuecard/node_modules/next/dist/server/base-server.js:2279:24) {
  page: '/api/audio/text-to-speech'
}
 POST /api/audio/text-to-speech 500 in 50ms
@VGraupera
Copy link

Having the same issue using Next 15.1.2

@lukeocodes
Copy link
Contributor

The SDK remains untested and (it looks) incompatible with some new features of Next.js 15. For now, you can downgrade to Next.js 14, or you can connect to Deepgram via a pages/api express-like proxy instead of using the SDK in Next.js specifically

@lukeocodes lukeocodes self-assigned this Dec 30, 2024
@lukeocodes lukeocodes added the bug Something isn't working label Dec 30, 2024
@lukeocodes lukeocodes added this to the Next 15 support milestone Dec 30, 2024
@VGraupera
Copy link

thanks, how do you "connect to Deepgram via a pages/api express-like proxy instead of using the SDK in Next.js specifically" ? is there an example of that?

@nicolello-dev
Copy link

Following this. I have, for now, delegated the work to a Python lambda and called the lambda within my Next API route. Alternatively, one may call the backend API directly (cURL). I believe it is also related to webpack, see webpack/webpack#12724.

To confirm, could you share your Next config file and tsconfig files?

I'm also experiencing the same issue, here are mine:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    remotePatterns: [
      {
        hostname: "https://s3.eu-central-1.amazonaws.com",
      },
      {
        hostname: "localhost",
      },
    ],
  },
};

const withPWA = require("next-pwa")({
  dest: "/public",
  scope: "/src/app",
  disable: process.env.VERCEL_ENV == "development",
  register: true,
  skipWaiting: true,
});

module.exports = withPWA(nextConfig);

And

// tsconfig.json
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants