Throwing "ReferenceError: window is not defined" on Next.js with SSR

[ivanproskuryakov]

The library fails to work with the Next.js framework ("next": "^12.1.6") while SSR.

The issue is caused by the missing window object within the file node_modules/@twa-dev/sdk/dist/sdk.js, and it occurs at the time of import.
Ref: https://github.com/twa-dev/SDK/blob/master/src/sdk.ts

Transpiled file

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebApp = void 0;
require("./telegram-web-apps");
var telegramWindow = window; // Seems to be the line causing the problem
exports.WebApp = telegramWindow.Telegram.WebApp;
//# sourceMappingURL=sdk.js.map

Demo app:

import WebApp from '@twa-dev/sdk'; // Happens at the time of import

const MiniApp = () => {
  return (
    <div>
      ...
      <button onClick={() => WebApp.showAlert(`Hello World!`)}>
        Show Alert
      </button>
    </div>
  );
};

export default MiniApp;

Console output

Uncaught ReferenceError: window is not defined
    at <unknown> (file:https:///Users/ivan/code/communa/frontend/node_modules/@twa-dev/sdk/dist/telegram-web-apps.js:248:5)
    at Object.<anonymous> (file:https:///Users/ivan/code/communa/frontend/node_modules/@twa-dev/sdk/dist/telegram-web-apps.js:274:3)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (file:https:///Users/ivan/code/communa/frontend/node_modules/@twa-dev/sdk/dist/sdk.js:4:1)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)

[kevcube]

@ivanproskuryakov I am experiencing the same, let me know if you find a good fix.

I am able to use Next's Script tag to load the TWA script and then do the JS there, but I would like to use this SDK.

[ivanproskuryakov]

@kevcube Sure, I'll open a PR with a patch.
Meanwhile, can you post your workaround for this error, please?

[kevcube]

@ivanproskuryakov

"use client";
import Script from "next/script";

import { Telegram } from "@twa-dev/types";

declare global {
  interface Window {
    Telegram: Telegram;
  }
}

export default function Page() {
  return (
    <Script
      id="TelegramWebApp"
      src="https://telegram.org/js/telegram-web-app.js"
      onReady={() => {
        window.Telegram.WebApp.MainButton.setParams({
          text: `Hello`,
          is_visible: true,
        });
      }}
    />
  );
}

I'm using Next 14, this can go in layout or other imported files to auto load on all pages of your app.

[EliusHHimel]

@ivanproskuryakov

"use client";
import Script from "next/script";

import { Telegram } from "@twa-dev/types";

declare global {
  interface Window {
    Telegram: Telegram;
  }
}

export default function Page() {
  return (
    <Script
      id="TelegramWebApp"
      src="https://telegram.org/js/telegram-web-app.js"
      onReady={() => {
        window.Telegram.WebApp.MainButton.setParams({
          text: `Hello`,
          is_visible: true,
        });
      }}
    />
  );
}

I'm using Next 14, this can go in layout or other imported files to auto load on all pages of your app.

It didn't work for me. Anyone faced the issue and find a solution other than this?

[kevcube]

@ivanproskuryakov

"use client";

import Script from "next/script";

import { Telegram } from "@twa-dev/types";

declare global {

interface Window {

Telegram: Telegram;

}

}

export default function Page() {

return (

<Script

  id="TelegramWebApp"

  src="https://telegram.org/js/telegram-web-app.js"

  onReady={() => {

    window.Telegram.WebApp.MainButton.setParams({

      text: `Hello`,

      is_visible: true,

    });

  }}

/>

);

}

I'm using Next 14, this can go in layout or other imported files to auto load on all pages of your app.

It didn't work for me. Anyone faced the issue and find a solution other than this?

Just use telegram-mini-apps/twa.js and join @devs on telegram

[sramezani]

Just check if window is exist, like this:

if (typeof window !== "undefined") {
     // Your code here
}

something like this:

import WebApp from '@twa-dev/sdk'; // Happens at the time of import

const MiniApp = () => {

 const onClick = () => {
     if (typeof window !== "undefined") {
         WebApp.showAlert(`Hello World!`)
    }   
 }

  return (
    <div>
      ...
      <button onClick={onClick}>
        Show Alert
      </button>
    </div>
  );
};

export default MiniApp;

[n8m]

still the same issue i faced. No PR with fix merged ?

[podrabinek]

The issue is still there!