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

retrieve information using Python in JavaScript

Issue with rendering images retrieved from JSON data

Tips for retrieving user input and displaying it on an HTML page

Guide on serving static HTML files using vanilla JavaScript and incorporating submodules

How can a mock document be utilized in a unit test for an imported TypeScript dependency?

Implementing long polling for private messaging in PHP's chat functionality

The error at events.js:154 was not properly handled and caused an 'error' event to be thrown

Tips for removing a DOM element in Selenium using Java

Utilizing an Office App Ajax that includes an authentication header, the application connects to a secure Web API 2 backend with CORS

Issue: Module failed to self-register. (When trying to use the onoff package)

Unable to adjust the padding of a div while the Bootstrap 4 navbar is in a collapsed state on mobile devices

Problem with extJS portal functionality

What is the method by which the asynchronous function produces the ultimate output?

An unexpected issue occurred while attempting to create a new Angular app using the command ng

Serving HTML from NodeJS instead of JSON

Extract images from dynamically loaded JavaScript website

Is there a way to transform the SmartyStreets' jQuery.LiveAddress plugin into its JavaScript SDK?

Tips for exchanging divs in a mobile view using CSS

Tips for resolving a 422 error on GitHub when attempting to create a repository using an Android device

Activate a module within a Vuex action only upon dispatching