Bug: Can't import react-devtools-core in NodeJS environment

[deniz-blue]

I'm writing a custom react renderer that completely runs inside NodeJS.

When I try to import react-devtools-core, this error occurs:

webpack://ReactDevToolsBackend/webpack/universalModuleDefinition:10
})(self, () => {
 ^


ReferenceError: self is not defined
    at Object.<anonymous> (webpack://ReactDevToolsBackend/webpack/universalModuleDefinition:10:2)
    at Module._compile (node:internal/modules/cjs/loader:1734:14)
    at Object.transformer (C:\Users\dennis\AppData\Local\pnpm-cache\dlx\gxuwnoud2xciwjjtv2xv6oox4u\19691f41bd2-2c40\node_modules\.pnpm\tsx@4.19.4\node_modules\tsx\dist\register-D2KMMyKp.cjs:2:1186)
    at Module.load (node:internal/modules/cjs/loader:1469:32)
    at Function._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1491:12)
    at require (node:internal/modules/helpers:135:16)
    at <anonymous> (C:\Users\dennis\source\Repos\TheAlan404\games-bot\src\devtools.ts:5:47)

Node.js v23.11.0

Repo to repro:
https://github.com/deniz-blue/games-bot/tree/dba1d46ab6346844cb05e4a1978f0275ba062bb1

I think this is an issue about how react compiles and publishes that package

[inject3r]

I'm writing a custom react renderer that completely runs inside NodeJS.

When I try to import react-devtools-core, this error occurs:

webpack://ReactDevToolsBackend/webpack/universalModuleDefinition:10
})(self, () => {
 ^


ReferenceError: self is not defined
    at Object.<anonymous> (webpack://ReactDevToolsBackend/webpack/universalModuleDefinition:10:2)
    at Module._compile (node:internal/modules/cjs/loader:1734:14)
    at Object.transformer (C:\Users\dennis\AppData\Local\pnpm-cache\dlx\gxuwnoud2xciwjjtv2xv6oox4u\19691f41bd2-2c40\node_modules\.pnpm\tsx@4.19.4\node_modules\tsx\dist\register-D2KMMyKp.cjs:2:1186)
    at Module.load (node:internal/modules/cjs/loader:1469:32)
    at Function._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1491:12)
    at require (node:internal/modules/helpers:135:16)
    at <anonymous> (C:\Users\dennis\source\Repos\TheAlan404\games-bot\src\devtools.ts:5:47)

Node.js v23.11.0

Repo to repro: https://github.com/deniz-blue/games-bot/tree/dba1d46ab6346844cb05e4a1978f0275ba062bb1

I think this is an issue about how react compiles and publishes that package

hi @deniz-blue

this issue occurs because the react-devtools-core package assumes a browser-like environment where the self global is defined (such as in window or Web Workers). Since you're running entirely within Node.js, self is undefined, which leads to the error.

I will look into this and look at your project and work on it because we shouldn't have this error.

[deniz-blue]

I managed to get react-devtools-core to work by

1. pnpm-patching the self to this (there's just one usage of self) in react-devtools-core
2. defining window to equal to global before importing react-devtools-core

[inject3r]

I managed to get react-devtools-core to work by

1. pnpm-patching the self to this (there's just one usage of self) in react-devtools-core
2. defining window to equal to global before importing react-devtools-core

Yes, this is one way and you can also use the following method

Manually define self: Before importing, try defining globalThis.self = globalThis

globalThis.self = globalThis;

[moaminrajabi]

You’re absolutely right — the error you’re encountering:
ReferenceError: self is not defined

is because react-devtools-core is designed to run in browser environments, where self (like window) is defined as the global context.

Since you’re running a custom React renderer entirely in Node.js, there’s no self, so the UMD wrapper in the bundle fails when evaluating the module.

A few suggestions:
1. Avoid using the devtools backend directly in Node.js — it’s not designed to run in non-browser environments. You’d typically connect to the devtools from a browser-based frontend.
2. If you really want to inspect React internals in Node.js, you might need a custom bridge — or see how the react-devtools inline or react-devtools backend can be embedded (though still browser-oriented).
3. For now, you could mock self as a workaround:
(globalThis as any).self = globalThis;

Alternatives:

If you’re building a headless renderer (e.g., for CLI tools, bots, etc.), devtools might not be necessary — you might want to inspect React fibers directly, or log snapshots manually.