Stenciljs: Cannot find another component

Question

I have created a new project in Stenciljs, but I have a problem using the components created in that project.

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

@Component({
    tag: 'fd-story',
    styleUrl: './story.css',
    shadow: true
})
export class Story {

    @Prop() name = '';

    render() {
        return (
            <div class="label">
                <span>{this.name}</span>
            </div>
        );
    }
}

I need to use this component in another container component (Carousel), but I have the following problem:

As a solution to this problem, VSCode tells me that I can import that component, but when I do, I get the following error:

TypeError: Class constructor Story cannot be invoked without 'new'

I am working on Windows 10. Has anyone happened? I appreciate your comments.

score 3 · Answer 1 · answered Feb 05 '20 at 19:02

I had a beginner's mistake. I wasn't calling the component the right way:

 <Story
    visited={true}
    name='Comida 1'
    image='https://i.pinimg.com/originals/2a/45/af/2a45af7fa0c4347526f90ecc56e5764e.jpg'
 />

I should have called it that.

 <fd-story
    visited={true}
    name='Comida 1'
    image='https://i.pinimg.com/originals/2a/45/af/2a45af7fa0c4347526f90ecc56e5764e.jpg'
 />

I was invoking the Class of the component, but I needed to call the tag name (fd-story). I hope someone else serves it.

score 0 · Answer 2 · answered Feb 06 '20 at 18:49

0

You need to use 'tag' from below code as your tag name.

@Component({
    tag: 'fd-story',
    styleUrl: './story.css',
    shadow: true })

so here you should use 'fd-story' instead of 'story'

answered Feb 06 '20 at 18:49

Siddharth Thakor

156
3
17

Stenciljs: Cannot find another component

2 Answers2