TypeError: Cannot read property 'width' of null in QML

Question

Item {
    id: root
    width: 200
    height: head.height
    property bool state: false
    property alias root: root
    property alias head: head
    property alias body: body
    property alias title: title
    property alias image: image
    property alias mouseArea: mouseArea
    property var data // when i define data variable in this way, program gets error

    Tasks { id: tasks } // For call my c++ functions
    Rectangle {
        id: head
        width: parent.width
        height: 40
        color: "#333333"
        radius: 10

        ...
    }

    Rectangle {
        id: body
        visible: root.state
        color: "#0d0d0d"
        width: parent.width
        height: 0
        anchors.top: head.bottom
        anchors.topMargin: 1

        ...
    }

    function addItem(categoryName) {
        // let data = tasks.getJson() when i define data variable in this way, program works properly
        let date = Qt.formatDateTime(new Date(), "dd.MM.yyyy")
        for (let i = 0; i < Object.keys(data.categories).length; i++) {
            if (data.categories[i].name === categoryName) {
                for (let j = 0; j < Object.keys(data.categories[i].tasks).length; j++) {
                    if (date === data.categories[i].tasks[j].date)
                        listModel.append({_text: data.categories[i].tasks[j].name, _value: data.categories[i].tasks[j].score})
                    else {
                        //TODO: tasks.saveHistory(data)
                        data.categories[i].tasks[j].score = 0
                        data.categories[i].tasks[j].goal = 0
                        data.categories[i].tasks[j].date = date
                        listModel.append({_text: data.categories[i].tasks[j].name, _value: data.categories[i].tasks[j].score})
                        tasks.saveData(data)
                    }
                    body.height += 50
                }
            }
        }
    }
    Component.onCompleted: data = tasks.getJson()
}

My problem is this: If I define the data variable in the addItem function, my program is working properly. But when I define the data variable to be global, program gets the following error:

qrc:/qml/PopUpGroupBox.qml:23: TypeError: Cannot read property 'width' of null
qrc:/qml/PopUpGroupBox.qml:72: TypeError: Cannot read property 'width' of null

Rectangle {
    id: head
    width: parent.width // line 23
    height: 40
    color: "#333333"
    radius: 10
    ...

Rectangle {
    id: body
    visible: root.state
    color: "#0d0d0d"
    width: parent.width // line 72
    height: 0
    anchors.top: head.bottom
    anchors.topMargin: 1
    ...

Note: My C ++ code is also OK. I have tested many times.

Answer 1

Your problem is because of QML Item already got a data property (link), which has another purpose. So, in this case you should use different name for your variable.