Why did it start after adding one package?

That package is probably browser-only. Check its README for server-side rendering notes or a separate Node.js entry point, and import it on the client only until then.

Can I define self on the server as a workaround?

Setting globalThis.self = globalThis can get one import past the error, but the package may then call other browser APIs and fail later. Loading it on the client is the reliable fix.

Can you fix it for me?

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.

“ReferenceError: self Is Not Defined”: Fix

JavaScript errorJavaScript: “ReferenceError: self is not defined”

A build, server render or test fails with ReferenceError: self is not defined. self is the global object in browsers and Web Workers, and Node.js does not have it. The usual cause is a package built for the browser (often a webpack UMD bundle, which uses self by default) being imported on the server.

Short answer

Find the file in the stack trace. If it is inside node_modules, that package is browser-only: import it only on the client (a dynamic import with ssr: false inside a Client Component in Next.js, or inside useEffect), or look for a server or Node.js build of it. If it is your own library, build it with output.globalObject set to 'this' or use globalThis. If it is your own code, replace self with globalThis.

Where self comes from, and the fix

01
A browser-only package imported on the server
Chart, map, editor and analytics libraries often reference self as soon as they are imported. In Next.js, load them on the client only, from a Client Component, because ssr: false is not allowed in Server Components.
```
'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('./Chart'), { ssr: false });
```
02
Your own library built with webpack
“To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'.” webpack, Output: output.globalObject
For web-like targets, webpack’s UMD wrapper is called with self as the global object, so it throws when the bundle is loaded in Node.js. Set the global object so the bundle works in both.
```
// webpack.config.js
module.exports = {
  output: {
    library: { name: 'myLib', type: 'umd' },
    globalObject: 'this',
  },
};
```
03
Your own code uses self
“The globalThis property provides a standard way of accessing the global this value (and hence the global object itself) across environments.” MDN, globalThis
self, window and global each exist only in some runtimes. globalThis exists in all of them.
```
const root = globalThis;
```
04
Tests running in Node.js
A test that imports a browser package fails the same way under the default Node.js test environment. Use a jsdom environment for that test, or mock the package.

Checked against the vendor’s docs on November 8, 2026: webpack: output.globalObject; MDN: globalThis.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

JavaScript errorJavaScript: “ReferenceError: self is not defined”

Where self comes from, and the fix

A browser-only package imported on the server

Your own library built with webpack

Your own code uses self

Tests running in Node.js

Rather hand it over?

More on this error

Describe it and get a written quote