Next.js 15 ReferenceError: Cannot access 'isBrowser' before initialization

[vladimir-nesterov]

In the clean project Next 15 made a form:

import { createClient } from "@deepgram/sdk";
export default function FormLoadAudio() {

async function handleUpload(dataForm: FormData) {
'use server';
const deepgram = createClient(process.env.DEEPGRAM_API_KEY ?? "");
}

return (

Load Audio

Submit

);
}

When calling a function createClient the browser displays an error:
Server Error
ReferenceError: Cannot access 'isBrowser' before initialization

How can I fix this error?
(There is a DEEPGRAM_API_KEY key in .env.local)

[deepgram-community[bot]]

Hey there! It looks like you haven't connected your GitHub account to your Deepgram account. You can do this at https://community.deepgram.com - being verified through this process will allow our team to help you in a much more streamlined fashion.

[deepgram-community[bot]]

It looks like we're missing some important information to help debug your issue. Would you mind providing us with the following details in a reply?

• The deepgram product you are using (e.g Speech to Text, Agent API)
• A request ID that triggered your error or issue.

[vladimir-nesterov]

package.json

{
"name": "deepgram-js-sdk-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@deepgram/sdk": "^3.9.0",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "15.0.3",
"typescript": "^5"
}
}

[deepgram-community[bot]]

It seems like you're encountering a scope issue with the 'isBrowser' variable in your Next.js project. This error typically occurs when a variable is used before it's defined or initialized.

However, without seeing the full context of your code, it's hard to provide a precise solution. The 'isBrowser' variable might be used in the '!subteam^S01J8LPFU8N|@deepgram/sdk' package or in your own code.

If 'isBrowser' is a variable in your own code, make sure it's defined before you call the createClient function. If it's in the '!subteam^S01J8LPFU8N|@deepgram/sdk' package, it might be a bug or compatibility issue with Next.js.

In the latter case, you could try the following steps:

1. Ensure you're using the latest version of '!subteam^S01J8LPFU8N|@deepgram/sdk'. Update the package if necessary.
2. Check the official '!subteam^S01J8LPFU8N|@deepgram/sdk' documentation or GitHub issues for any reported bugs or compatibility issues with Next.js.
3. If the issue persists, consider opening a new issue in the '!subteam^S01J8LPFU8N|@deepgram/sdk' GitHub repository with a detailed description of your problem and the error message you're receiving.

Remember to include the version of Next.js and '!subteam^S01J8LPFU8N|@deepgram/sdk' you're using, as well as relevant snippets of your code. This will help the maintainers understand and address your issue more effectively.

John Vajda

[VGraupera]

I am having the same issue, doesnt seem to work out of the box with turbopack. is there a way to configure it, or is there any update? Here is the GH issue, deepgram/deepgram-js-sdk#346 thanks

[deepgram-community[bot]]

Right now it appears to be incompatible with Next.js 15, and we may need to release a specific Next.JS library, so as to not complicate the SDK any further.

We have working examples in Next.js 14, so if you do not require any of 15s features then you could downgrade.

This message was sent by luke from Deepgram, via our community automation.