TypeError: Cannot call a class as a function in stenciljs

Question

I trying to use multiselect-react-dropdown package inside my stencil project, but while rendering I'm getting this error, I found many solution for react but nothing really worked, Can anyone help do same in stenciljs.

import { Component, h, State } from '@stencil/core';
import { Multiselect } from 'multiselect-react-dropdown';


@Component({
    tag: 'ui-card',
    styleUrl: 'style.scss',
    shadow: true
})

export class UiCard {
    @State() state: any;

    constructor() {
        this.state = {
            options: [{ name: 'Srigar', id: 1 }, { name: 'Sam', id: 2 }]
        };
    }

    onSelect(selectedList, selectedItem) {
        console.log(selectedItem)
        console.log(selectedList)
    }

    onRemove(selectedList, removedItem) {
        console.log(selectedList)
        console.log(removedItem)
    }
    render() {
        return (<div>
            <Multiselect
                options={this.state.options}
                selectedValues={this.state.selectedValue}
                onSelect={this.onSelect}
                onRemove={this.onRemove}
            />
        </div>)
    }
}

score 1 · Answer 1 · answered Jul 27 '20 at 10:12

1

StencilJS is not related to React.
Indeed they both are using JSX/TSX as a markup language, but React uses it's own React implementation of it, while StencilJS uses h jsxFactory.
As you may know, JSX is transpired to the regular function calls like createElement which return a Virtual DOM object to render.
So, to render react Virtual DOM object to the page you need to call ReactDOM.render(), meanwhile Stencil compiles it to the web-components.
Despite a lot of common things like JSX, props/state and other - React and StencilJS are completely different tools.

You can use <slot> as a workaround, but I think there might be some performance issues.

answered Jul 27 '20 at 10:12

Ivan Burnaev

2,690
18
27

I'm completely new to this stencil, what i'm working on is that I have to build web component in stencil which has an npm dropdown (can use any dropdown but it should have multi-select option) and integrating it with angular project. Can u suggest me a solution for this – Vishnu Shenoy Jul 28 '20 at 04:14
Well, you can use any library that works with vanilla js, for example: https://github.com/jshjohnson/Choices. – Ivan Burnaev Jul 28 '20 at 08:57

score 1 · Answer 2 · answered Jul 27 '20 at 12:50

Though I wouldn't recommend it, it's possible to use react components inside Stencil, by including the react runtime in your component (yeah sounds pretty ineffective).

See my answer here: https://stackoverflow.com/a/62046928/2897426. It's for using a react-bootstrap component which is fairly similar. Note that Stencil's JSX (or really TSX) is not compatible with React's JSX, thus you can't use JSX to pass the properties. It'll be something like

import { Component, h, State } from '@stencil/core';
import { Multiselect } from 'multiselect-react-dropdown';
import ReactDOM from 'react-dom';
import React from 'react';

@Component({
    tag: 'ui-card',
    styleUrl: 'style.scss',
    shadow: true
})
export class UiCard {
  @Element() host: HTMLUiCardElement;

  @State() state: any;

  @Watch('state')
  onStateChange() {
    const props = {
      options: this.state.options,
      // ...
    };

    ReactDOM.render(React.createElement(Multiselect, props), this.host);
  }

  componentWillLoad() {
    this.onStateChange();
  }

  render() {
    return <Host />;
  }
}

Again, I don't recommend doing this, it'll completely bloat your component with the whole react runtime. Just saying it's possible.

Actually I have an stencil project with many components which has a multiple select dropdown too, I have to create this web component and integrate it with Angular project. Is there any reference for that or will this work angular also — Vishnu Shenoy, Jul 27 '20 at 13:22
Integrating Stencil web components into Angular is pretty straight-forward, there's also pretty extensive docs for it: https://stenciljs.com/docs/angular (plus the Ionic source code). Please don't ask me about interoperability issues when wrapping a react component in a stencil component that you then use in an angular project. It sounds like a stupid plan, rather just pick a framework — Simon Hänisch, Jul 27 '20 at 14:19
Yh. I understand it sounds weird but, is there any way I can add an npm package or ngx package to stencil project which can be integrated to Angular. Because I am starting with project for which we create web components and integrate to angular, So I want to know whether npm or npx package is supported in stencil for dropdowns and all or will I have to write a custom code for it — Vishnu Shenoy, Jul 28 '20 at 04:02

TypeError: Cannot call a class as a function in stenciljs

2 Answers2