When exporting an enum in StencilJS with TypeScript, the error "Cannot find name..." may occur

Question

When exporting an enum in StencilJS with TypeScript, the error "Cannot find name..." may occur

Looking for a solution:

https://github.com/napolev/stencil-cannot-find-name

In this project, there are two main files to consider:

custom-container.tsx

import { Component, Element, State } from '@stencil/core';

@Component({
    tag: 'custom-container',
    styleUrl: 'custom-container.scss',
})
export class WebComponent {
    @Element() el!: HTMLStencilElement;
    @State() label: String = '<empty>';
    componentDidLoad() {
        document.querySelector('.button_get_anchor').addEventListener('click', () => {
            let position = '<unset>';
            position = this.el.querySelector('custom-details').getDefaultKnobEPosition();
            this.label = position;
        });
    }
    render() {
        return [
            <div class="label">{this.label}</div>,
            <custom-details></custom-details>,
            <div>
                <button class="button_get_anchor">Get Anchor</button>
            </div>
        ];
    }
}

custom-details.tsx

import { Component, Method } from '@stencil/core';

@Component({
    tag: 'custom-details',
    styleUrl: 'custom-details.scss',
})
export class WebComponent {
    render() {
        return [
            <div class="details">This is the "custom-details"</div>
        ];
    }
    @Method()
    sayHelloWorldOnConsole() {
        console.log('Hello World!');
    }
    
    @Method()
    getDefaultKnobEPosition(): Anchor {
        return Anchor.Left;
    }
    
}
export enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right',
}

The Issue: After running $ npm start --es5, an error occurs regarding the 'Anchor' name not being found.

[ ERROR ]  TypeScript: ./stencil-cannot-find-name/src/components.d.ts:66:39
           Cannot find name 'Anchor'.
...

You can see the error in this image:

https://i.stack.imgur.com/2iWZN.png

Moreover, Visual Studio Code also highlights this issue as shown here:

https://i.stack.imgur.com/Wer7m.png

The problematic line can be viewed at:

https://github.com/napolev/stencil-cannot-find-name/blob/master/src/components.d.ts#L66

This file is auto-generated and cannot be modified directly. Any suggestions on resolving this?

Thanks!

javascript typescript npm jsx stenciljs

Answer 1

Answer №1

Separating the Anchor enum into its own file successfully resolves the building issue:

/src/components/custom-elements/Anchor.ts

export enum Anchor {
    Start = 'start',
    Middle = 'middle',
    End = 'end',
}

/src/components/custom-elements/custom-elements.tsx

import { Component, Method } from '@stencil/core';
import { Anchor } from './Anchor';

@Component({
    tag: 'custom-elements',
    styleUrl: 'custom-elements.scss',
})
export class WebComponent {
    render() {
        return [
            <div class="elements">This is the "custom-elements"</div>
        ];
    }
    @Method()
    sayHelloWorldOnConsole() {
        console.log('Greetings Earthlings!');
    }
    //*
    @Method()
    getDefaultPosition(): Anchor {
        return Anchor.Start;
    }
    //*/
}

Answer 2

Separating the Anchor enum into its own file successfully resolves the building issue:

/src/components/custom-elements/Anchor.ts

export enum Anchor {
    Start = 'start',
    Middle = 'middle',
    End = 'end',
}

/src/components/custom-elements/custom-elements.tsx

import { Component, Method } from '@stencil/core';
import { Anchor } from './Anchor';

@Component({
    tag: 'custom-elements',
    styleUrl: 'custom-elements.scss',
})
export class WebComponent {
    render() {
        return [
            <div class="elements">This is the "custom-elements"</div>
        ];
    }
    @Method()
    sayHelloWorldOnConsole() {
        console.log('Greetings Earthlings!');
    }
    //*
    @Method()
    getDefaultPosition(): Anchor {
        return Anchor.Start;
    }
    //*/
}

Answer 3

Answer №2

When dealing with an automatically generated file, your options may be limited. The components.d.ts file can only be properly typechecked if it has access to the Anchor type through importation.

import {Anchor} from './custom-details';

If necessary, you can inject the Anchor type into the global scope to ensure visibility for all files in your compilation context.

custom-details.tsx

export class WebComponent {
   // ....
}

declare global {
  enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right'
  }
}

(<{Anchor: typeof Anchor}>window.Stencil).Anchor = {
  Left = 'left',
  Center = 'center',
  Right = 'right'
};

However, resorting to this method is strongly advised against.

This approach introduces a type and, even worse, a value into the global namespace!

If facing this issue, it is recommended to report it as a bug.

Answer 4

When dealing with an automatically generated file, your options may be limited. The components.d.ts file can only be properly typechecked if it has access to the Anchor type through importation.

import {Anchor} from './custom-details';

If necessary, you can inject the Anchor type into the global scope to ensure visibility for all files in your compilation context.

custom-details.tsx

export class WebComponent {
   // ....
}

declare global {
  enum Anchor {
    Left = 'left',
    Center = 'center',
    Right = 'right'
  }
}

(<{Anchor: typeof Anchor}>window.Stencil).Anchor = {
  Left = 'left',
  Center = 'center',
  Right = 'right'
};

However, resorting to this method is strongly advised against.

This approach introduces a type and, even worse, a value into the global namespace!

If facing this issue, it is recommended to report it as a bug.

When exporting an enum in StencilJS with TypeScript, the error "Cannot find name..." may occur

Answer №1

Answer №2

Similar questions

The onchange functionality is not functioning as expected

Tips for stopping execution in Discord.js if the user no longer exists?

Exploring JSON and jQuery to Address Filtering Challenges

Using Typescript literal types as keys in an indexer is a common practice

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

Discovering the smallest, largest, and average values across all properties in an array of objects

Leveraging TypeScript to sort and extract specific elements from two arrays

The most recent npm version is experiencing functionality issues on Linux systems

Having trouble downloading the Chip component in Material-UI? Learn how to fix the download issue

Using React with Typescript and ie18next to fetch translations from an external API

What is the proper way to employ if and else if statements within Angular2?

Locate Vue Components That Are Persisting

Error: Attempting to access the 'clipboard' property on an undefined object results in a TypeError when invoking this.$q.electron.clipboard

Tips on avoiding scrolling when toggling the mobile navigation bar:

Configuring Google Chart LineChart settings by utilizing the series attribute

Utilizing TypedPropertyDescriptor to limit decorators in Typescript when using decorator factories

Is it possible for prettier to substitute var with let?

Utilizing React JS to Embed PDF Page Numbers in an Iframe: A Step-by-Step

Loading a gallery dynamically using AJAX in a CakePHP application

What is the best way to recycle Vue and Vuetify code?