ReferenceError: component not defined - creating a dynamic QML object

Question

ClickableRectangle.qml

import QtQuick 2.0;

Rectangle
{
    width: 40;   height: 40;   x: 0;   y: 0;

    // Fluorescent green
    color:'#23FF23';

    border.color: 'black';   border.width: 2;   radius: 100

    property int key;
    signal       iHaveBeenCalled (var key);

    MouseArea
    {
        anchors.fill: parent;
        onClicked:
        {
            iHaveBeenCalled.call (0, key)
        }
    }
}

GUIControllers.js

.import "GlobalVariablesAndFunctions.js" as GlobalVariablesAndFunctions

function createDynamicRectangles ()
{
    /// Returns a Component object created using the QML file at the specified url, or null if an empty
    /// string was given.
    var component = Qt.createComponent ("ClickableRectangle.qml");
    /// The returned component Component::status property indicates whether the component was
    /// successfully created.
    if (component.status === Component.Ready)
    {
        /// arrayOfXAxixOfPoints and arrayOfYAxixOfPoints are the arrays holding x and y axis coordinates
        /// of the rectangles (respectively) to be plotted.
        /// Both these arrays are techincally supposed to have equal number of points which will the
        /// determine number of rectangles to be plotted.
        for (var i = 0; i < GlobalVariablesAndFunctions.arrayOfXAxixOfPoints.length; i++)
        {
            dynamicRectangles[i]  = component.createObject (vehicleDrivingAreaRect, {x: 0, y: 0})

            /// After an object of the component is created at a specified default position (0, 0) in our
            /// case, we can calculate and reset its position and other properties at leisure as follows.
            dynamicRectangles[i].x = GlobalVariablesAndFunctions.arrayOfXAxixOfPoints[i] - (dynamicRectangles[i].width / 2)
            dynamicRectangles[i].y = GlobalVariablesAndFunctions.arrayOfYAxixOfPoints[i] - (dynamicRectangles[i].height / 2)
        }

        numberOfDynamicRectanglesActive = GlobalVariablesAndFunctions.arrayOfXAxixOfPoints.length
    }
}

main.qml

import QtQuick 2.0
import "GUIControllers.js" as GUIControllers

Rectangle
{
    id: rootContainer
    width: 360
    height: 360
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            GUIControllers.createDynamicRectangles()
        }
    }
}

---

An error in the header is displayed in GUIControllers.js on this line:
if (component.status === Component.Ready)

Answer 1

We need to import QtQuick 2.0 into GUIControllers.js as follows:

.import QtQuick 2.0 as QtQuickModuleImportedInJS

Then, if we edit the culprit’s line as follows, the error will disappear:

if (component.status === QtQuickModuleImportedInJS.Component.Ready)