Pusher with encryption, window is not defined on Next.js

[semoal]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?

import Pusher from "pusher-js/with-encryption";

If the current behavior is a bug, please provide the steps to reproduce and
if possible a minimal demo of the problem via https://jsfiddle.net or similar.

• Create a next app
• Install pusher-js@latest
• import Pusher from "pusher-js/with-encryption";
• Will crash about window is not defined

What is the expected behavior?
Should handle if the lib is being imported in SSR and just early return.

Which versions of Pusher, and which browsers / OS are affected by this issue?
Did this work in previous versions of Pusher? If so, which?
7.3.0 - latest

[benjamin-tang-pusher]

Hi, do you also get this issue with the default Next.js static site generation?

[semoal]

Hi, do you also get this issue with the default Next.js static site generation?

Not sure, probably yes. We’re just using traditional SSR, meanwhile I’m lazy loading the lib inside a Suspense boundary with SSR:false

[benjamin-tang-pusher]

I can reproduce, will escalate.

[webbipage]

Same issue.

[benjamin-tang-pusher]

I'm starting to suspect the entrypoint for /with-encryption isn't working well with Next. Bear with us as this is being prioritised.

[ardalan-nhd]

I have the same issue with next V12.3.1 and pusher-js V7.4.1. I solved this issue temporarily by using require("pusher-js/with-encryption") inside a useEffect and assigning it to a ref. Hope this gets fixed soon. Thanks in advance.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you'd like this issue to stay open please leave a comment indicating how this issue is affecting you. Thank you.

[semoal]

Not staled guys

[ivan3123708]

I have the same issue. It's definitely something related to /with-encryption because it works fine when I use import Pusher from 'pusher-js'.

[tmirkovic]

Having same issue here with version 8.3.0:
https://replit.com/@TiborMirkovic/Pusher-with-encryption-window-issue

Happens when we subscribe to the private-encrypted- channel

[jessethomson]

I have same issue with [email protected] using [email protected].

I don't want to be that guy, but I am totally going to be that guy...

I just started using Pusher today because another developer had recommended it. I am currently setting everything up for a proof of concept, with the thought that if all goes well, our company will likely purchase the Pro plan.

However, the lack of good documentation and the fact that an issue this simple has sat open for over a year gives me a lot of hesitation to move forward. Maybe I'm missing something, but this fix should be as simple as a typeof check with an early return?

If this was just some random open source library, I would never complain. But this is an SDK for a paid enterprise product and there are only 13 open issues so you would think staying on top of something like this wouldn't be so hard.

[razvangherghina]

plus one, with nextjs pusher-js/with-encryption cannot be used without require due to window is not defined error.

[AlexVipond]

I suspect this is happening because pusher-js/with-encryption is bundled as UMD with a reference to window in code that executes immediately at runtime.

pusher-js/webpack/config.web.js

Line 25 in ed900f8

libraryTarget: 'umd'

This is not the correct module format for projects using import—Pusher should be distributing ESM or CJS builds for those projects.

[AlexVipond]

Made my own CJS build just now, which gets you past the initial window error, but you still run into two more several more, including these two:

First one:

pusher-js/src/core/base64.ts

Lines 45 to 49 in ed900f8

	var btoa =
	global.btoa ||
	function(b) {
	return b.replace(/[\s\S]{1,3}/g, cb_encode);
	};

Second one is here:

pusher-js/src/runtimes/web/net_info.ts

Line 15 in ed900f8

if (window.addEventListener !== undefined) {

And it triggers because of this NetInfo instantiation in global scope:

pusher-js/src/runtimes/web/net_info.ts

Line 50 in ed900f8

export var Network = new NetInfo();

The correct solution here is to avoid performing side effects in global scope. Instead, Pusher should ship functions that we can call when & where appropriate in our apps to do the necessary setup work.

A quick fix is to guard these two code execution paths by checking typeof window !== 'undefined'. That seemed to work fine for me, but I don't know if it has any unintended consequences.

[AlexVipond]

PR is up with a fix that works in my NextJS 12.x app.

Also worth noting for anyone in this thread: if you wrote import Pusher from 'pusher-js', you're importing the NodeJS build (dist/node/pusher.js) instead of the browser build (dist/web/pusher.js), because that's where the package.json sends you. If you switch to import Pusher from 'pusher-js/dist/web/pusher' to force the browser build, you'll get the same window is not defined error from the UMD format.

[dmvdven]

Any update on this matter? I'm using NextJS version 15.0.0-canary.58 and import Pusher from "pusher-js/with-encryption";. It also gives me the window is not defined message.

[syrow]

same issue with sveltekit when trying to host on cloudflare pages, i tried browser build, worker etc. nothing seems to work

keep on getting this error

{
 "message": [
"ReferenceError: window is not defined\n at node_modules/pusher-js/dist/web/pusher.js (functionsWorker-0.727323042957112.js:8983:45)\n at require2 (functionsWorker-0.727323042957112.js:30:50)\n at .svelte-kit/output/server/chunks/pusher.js (functionsWorker-0.727323042957112.js:13620:32)\n at init (functionsWorker-0.727323042957112.js:27:56)\n at .svelte-kit/output/server/entries/pages/(app)/_layout.svelte.js (functionsWorker-0.727323042957112.js:13660:5)\n at __init (functionsWorker-0.727323042957112.js:27:56)\n at functionsWorker-0.727323042957112.js:14358:90\n at async Object.component3 (functionsWorker-0.727323042957112.js:14358:54)\n at async Promise.all (index 1)\n at async render_response (functionsWorker-0.727323042957112.js:50610:19)"
],
"level": "error",
"timestamp": 1734691777541
},

[AlexVipond]

I haven't seen any activity on #819, which is discouraging, but in the meantime you might try dynamically importing at runtime:

(async () => {
  try {
    const Pusher = (await import('pusher-js/with-encryption')).default;
    const myPusherInstance = new Pusher(...);
    
    myPusherInstance.connection.bind('connected', myConnectedCallback);
    myPusherInstance.connection.bind('disconnected', myDisconnectedCallback);
  
    myPusherInstance.signin();
  } catch (error) {
    ...
  }
})();

React apps: do this in useEffect
Vue apps: do this in onMounted
Svelte apps: I'm pretty sure you do this in onMount, but I haven't used Svelte extensively

[syrow]

not needed to use onmount as with pusher-js/worker import, it works as that build don't use window instance.