Beginner question about Node-GUI

Describe the bug
I keep getting rootview.layout.addWidget and I do not understand why when I'm reading the API...

Sample of my code

const { 
	QMainWindow,
	QWidget, 
	QLabel, 
	QLayout,
	QPushButton, 
	QIcon, 
	QBoxLayout, 
	Direction, 
	FlexLayout
} = require("@nodegui/nodegui");
const path = require("path");

function main() {
	const rootview = new QWidget();
	rootview.setLayout(new FlexLayout());
	rootview.setObjectName("rootView");

	const label = new QLabel();
	label.setObjectName("label");
	label.setText("Import");

	const view = new QWidget();
	view.setObjectName("view");
	rootview.layout.addWidget(label);

	const win = new QMainWindow();
	win.setWindowTitle("Playlist Music TTRPG Manager");
	win.resize(1400, 1000);
	win.show();
	global.win = win;
}
main();

end of the code

Expected behavior
I'm just trying to complete basic tutorial since a week ago and I'm still stuck on the matter.
Do I lack something in my code for it to be recognize a XXX.layout.addWidget() as a function?

Please don't tell me it's because I'm coding in commonJS and it only works with typescript...

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: W10
NodeGUI version 0.74.0
OS Version 22H2 KB5075912

Additional context
Hi, first time trying to dev a GUI and I'm trying with nodegui. I was looking for a discord nodegui dev-based community, but couldn't find one. Hence me making an issue for what's probably the easiest thing you'll ever see here.
But I'm seriously losing hope here, so if somebody is able to help me, I'll gladly take it...

Can someone please help me, please?

I'm literally just using the code example on your Doc here and NOTHING ELSE, the example in FlexLayout : https://docs.nodegui.org/docs/guides/layout/#example

And my node gets back to me with this error, I find nothing on the matter online and not even a community that could help me with this...

XXXX\projet-musique-jdr>npm run start

> projet-musique-jdr@0.2.0 start
> webpack && qode ./dist/index.js

asset nodegui_core-c9f5d691d47a2cafdcc6f688c37ad522.node 5 MiB [emitted] (auxiliary name: main)
asset index.js 1.45 MiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/@nodegui/nodegui/dist/lib/ 610 KiB 237 
modules
modules by path ./node_modules/postcss/lib/*.js 480 KiB
  ./node_modules/postcss/lib/postcss.js 18.7 KiB [built] [code generated]
  ./node_modules/postcss/lib/declaration.js 6.21 KiB [built] [code generated]
  + 23 modules
modules by path ./node_modules/source-map/ 99.4 KiB
  ./node_modules/source-map/source-map.js 405 bytes [built] [code generated]
  ./node_modules/source-map/lib/source-map-generator.js 14 KiB [built] [code generated]
  + 9 modules
modules by path ./node_modules/cuid/ 2.88 KiB
  ./node_modules/cuid/index.js 2.18 KiB [built] [code generated]      
  ./node_modules/cuid/lib/fingerprint.js 435 bytes [built] [code generated]
  + 2 modules
+ 12 modules
webpack 5.105.2 compiled successfully in 415 ms
webpack://projet-musique-jdr/./index.js?:17
rootView.layout.addWidget(label);
                ^

TypeError: rootView.layout.addWidget is not a function
    at eval (webpack://projet-musique-jdr/./index.js?:17:17)
    at ./index.js (C:\Users\Lancer\Documents\FoundryVTT\projet-musique-jdr\dist\index.js:3169:1)
    at __webpack_require__ (C:\Users\Lancer\Documents\FoundryVTT\projet-musique-jdr\dist\index.js:3199:42)
    at C:\Users\Lancer\Documents\FoundryVTT\projet-musique-jdr\dist\index.js:3239:37
    at Object.<anonymous> (C:\Users\Lancer\Documents\FoundryVTT\projet-musique-jdr\dist\index.js:3241:12)
    at Module._compile (node:internal/modules/cjs/loader:1761:14)     
    at Object..js (node:internal/modules/cjs/loader:1893:10)
    at Module.load (node:internal/modules/cjs/loader:1481:32)
    at Module._load (node:internal/modules/cjs/loader:1300:12)        
    at TracingChannel.traceSync (node:diagnostics_channel:328:14)     

Node.js v24.12.0
QThreadStorage: entry 0 destroyed before end of thread 0x26d7ff02240```

maybe try this one: https://github.com/sedwards2009/nodegui-simple-starter

@sedwards2009

@sedwards2009
If I try with cloning the project you linked (even if I don't plan to use typescript on this project) and use the code quote on the docs, it still tells me (in another way than before, though) that a QWidget.layout.addWidget() is not a function...

I also tried using this: https://github.com/scanline/nodegui-simple-starter-js/
Same result as usual. I get an error when I compile the code...

I finally found a solution. You need to declare a rootLayout outside of the setLayout like this.

const rootView = new QWidget();
const rootLayout = new FlexLayout();
rootView.setLayout(rootLayout);
rootView.setObjectName("rootView");

const label = new QLabel();
label.setText("Hello");
label.setObjectName("label");

rootLayout.addWidget(label);
rootLayout.addWidget(view);

The documentation is absolutely not up-to-date. I lost 2 months on my project just because nobody realized that. Won-der-ful

@Angor-de-Redjak

@Angor-de-Redjak I know your question is a while ago but i think you simply have a little error in your code.
If you look up the typescript sourcecode of QWidget.ts

nodegui/src/lib/QtWidgets/QWidget.ts

Line 67 in d54943c

layout(): QLayout | null {

you can see layout is actualy a getter function and not a property.
Did you try:
rootview.layout().addWidget(label);
instead of:
rootview.layout.addWidget(label);
yet?

Hi Scanline,
You are totally right, indeed!

The thing is it is not my code. It's part of a code I linked above which is... On the official nodeGUI doc website 😬
So the official documentation is not up to date :/

It's a little hard to keep track of such a huge project Angor-de-Redjak. I can't remember seeing the original author of NodeGui for quite some time now.
Most if not all work is done by a single person - sedwards2009 - so mistakes happen. It's the nature of the beast! ;)
Back then when https://docs.nodegui.org/docs/guides/layout/#example was written, layout has indeed been a property of QWidget. I remember I had a discussion here about this topic too. It was changed to a getter function around NodeGui version 0.45.0

I completely understand that!

I'm also a complete beginner on everything related to UI and at that time, I lost several weeks spent of my fan project just because I was blindly following the tutorial part of the documentation. So yeah, I understand that it's a massive task for the author.
But I also come from a place of really intense frustration, especially when a dev-project is the only thing letting you stay afloat on an everyday basis... Anyway!

Navigation Menu

Repository navigation

Beginner question about Node-GUI #1085

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Beginner question about Node-GUI #1085

Description

Activity

Angor-de-Redjak commented on Mar 15, 2026

sedwards2009 commented on Mar 15, 2026

Angor-de-Redjak commented on Mar 16, 2026

Angor-de-Redjak commented on May 12, 2026

scanline commented on Oct 7, 2026

Angor-de-Redjak commented on Oct 7, 2026

scanline commented on Oct 8, 2026

Angor-de-Redjak commented on Oct 8, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions