Errors

@gondel/core

All error descriptions below are related to the @gondel/core package.

Boot failed, is not registered

This error occurs in the GondelComponentStarter#constructComponent method

tbd.

Component not found in DOM

This error occurs in the GondelDomUtils#getComponentByDomNode method

Why does this error occur?

Could not find any Gondel component in namespace dedicated on a certain DOM node. This usually happens when there is no data-namespace-name name on the node or the DOM content was modified by a third-party tool.

How can I solve this issue?

First check your code why the existing component could be unmounted or made unavailable. If you can't change this behaviour or prevent your application from this use the isComponentMounted() method to check if the component is mounted.

import * as React from 'react';
import { isComponentMounted, getComponentByDomNode } from '@gondel/core';
import { Button } from './Button';

class Form extends React.Component<{}> {
    private ref: HTMLButtonElement;

    doSomethingWithButton() {
        // check the mounting status of the Gondel component
        const isButtonMounted = isComponentMounted(this.ref, Button);
        
        if(isButtonMounted) {
            // only get the component if it's available
            getComponentByDomNode(this.ref, Button)._ctx.style.border = '1px solid red';
        }
    }

    componentDidMount() {
        setTimeout(() => {
            this.ref.remove();
        }, 300);
    }

    render() {
        <button
            data-g-name="Button" {/* this is important! */}
            ref={(ref: HTMLButtonElement) => this.ref = ref}>
        </button>
    }
}

No component for namespace

This error occurs in the GondelDomUtils#getComponentName method

Why does this error occur?

The component which is beeing used does not have a mapping to the dedicated namespace.

How can I solve this issue?

Register the component in all used namespaces.

import { GondelBaseComponent, Component, getComponentByDomNode } from '@gondel/core';

@Component('OnlyScoped', 'scoped')
class OnlyScoped extends GondelBaseComponent {}

@Component('ScopedGlobal)
@Component('ScopedGlobal, 'scoped')
class ScopedGlobal extends GondelBaseComponent {}

// this will throw the error because OnlyScoped does not have
// a mapping for the namespace 'g' (default)!
getComponentByDomNode(someNode, OnlyScoped);

// this will work!
getComponentByDomNode(someNode, ScopedGlobal);
getComponentByDomNode(someNode, ScopedGlobal, 'scoped');
getComponentByDomNode(someNode, OnlyScoped, 'scoped');

Unregistered component has no identifier

This error occurs in the GondelDomUtils#getComponentName method

Why does this error occur?

This issue occurs if the component class is missing the static private value __identification which defines its mapping to different namespaces. The value is set by the @Component decorator and/or by the GondelBaseComponent base class.

How can I solve this issue?

Make sure you use the @Component decorator and extend the GondelBaseComponent. If you're using ordinary JavaScript and not typescript and won't extend the GondelBaseComponent class, provide a static object __identification in your class.

import { registerComponent } from '@gondel/core';

class MyComponent {
    someMethod() {
        return 'Some value!';
    }
}

// provide the identification map
MyComponent.__identification = {}; 

registerComponent('MyComponent', MyComponent, 'myNamespace');

Invalid handler name

This error occurs in the GondelDecorators#EventListener method

Invalid handler name '${handler}' use '_${handler}' instead.

Invalid event name

This error occurs in the GondelEventEmitter#triggerPublicEvent method.

Why does this error occur?

The event you'd like to trigger may not be valid in terms of Gondel's event guidelines.

How can I fix this issue?

Make sure your public event starts with the namespace of the component, followed by the event. The string must be written camelCase.

import { GondelBaseComponent, Component } from '@gondel/core';

@Component('MyComponent', 'myNamespace')
class Something extends GondelBaseComponent {
    _triggerPublicEvent() {
        // wrong, doesn't use the right namespace/convention
        triggerPublicEvent('myEvent'); 
        triggerPublicEvent('myNamespacemyEvent'); 

        // this is the correct way!
        triggerPublicEvent('myNamespaceMyEvent'); 
    }
}

Async plugin listener

This error occurs in the GondelPluginUtils#fireGondelPluginEvent method

Why does this error occur?

How can I solve this issue?

Make sure your plugin does not return a promise or basically work asynchron.

interface IWorksData {
    multiplier: number
}

const works = (val: number, data: IWorksData, done: (result: number) => number) => {
    done(val * data.multiplier);
};

const doesNotWork = (val: number, data: IWorksData, done: (result: number) => number) => {
    setTimeout(done.bind(null, [val * data.multiplier]), 1000);
};

@gondel/plugin-react

Components render method is missing

Why does this error occur?

This means your extended GondelReactComponent does not have a render method which causes the error.

How can I solve this issue?

Add a public method render() to your custom component.

import * as React from 'react';
import { GondelReactComponent } from '@gondel/plugin-react';

// this will fail, because render method is missing
class Fails extends GondelReactComponent<any> {
    doSomething() {}
}

class Works extends GondelReactComponent<any> {
    public render() {
        return <h1>Hello World!</h1>
    }
}

@gondel/plugin-media-queries

Smallest viewport must not be Infinity

Why does this error occur?

The smallest provided viewport must not be set to Infinity. This should only happen if the user did a miss configuration with only a single breakpoint which is set to Infinity.

How can I fix this issue?

Provide a valid configuration with valid breakpoints.

import { initMediaQueriesPlugin } from '@gondel/plugin-media-queries';

// this will cause an error because only breakpoint
// defined is set to Infinity.
initMediaQueriesPlugin({ 
    breakPoints: {
        xxlarge: Infinity,
    }
});

// works!
initMediaQueriesPlugin({ 
    breakPoints: {
        xxsmall: 480,
        xxlarge: Infinity,
    }
});