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:///Users/ivan/code/communa/frontend/node_modules/@twa-dev/sdk/dist/telegram-web-apps.js:248:5)
    at Object.<anonymous> (file:///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:///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.