CODEWITHSUNDEEP
reactjstypescriptionic-frameworkstenciljs
Dr. Goulu
Dr. Goulu

Reputation: 590

how to import components from a Stencil library in a React app?

I just created :

Now I'd like to use the default "my-component" aka MyComponent from my-lib , so I

    import {Components} from 'my-lib'; 
    import MyComponent = Components.MyComponent;

where the code completion in Visual Studio Code is happy, but I get :

SyntaxError: C:\Dev\TypeScript\oacs-react\src\pages\Tab1.tsx: `import =` is not supported by @babel/plugin-transform-typescript Please consider using `import <moduleName> from '<moduleName>';` alongside Typescript's --allowSyntheticDefaultImports option.>

What's the proper way of solving this, especially when you plan to use several external components libraries ?

Upvotes: 0

Views: 2991

Answers (1)

Simon H&#228;nisch
Simon H&#228;nisch

Reputation: 4968

You can have a look at https://stenciljs.com/docs/react.

import { applyPolyfills, defineCustomElements } from 'my-lib/loader';

applyPolyfills().then(() => {
  defineCustomElements();
});

You can also use @stencil/react-output-target to automatically generate bindings for all your components (see https://stenciljs.com/docs/react#bindings), so that if you have my-component, it'll generate a MyComponent wrapper for you that is a real React component.

Regarding your import error, you can probably import it as

import myLib from 'my-lib';
const { MyComponent } = myLib.Components;

Upvotes: 0

Related Questions