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

0
votes

I just created :

  • a stencilJS component library named "my-lib" using the "npm init stencil" wizard, and built it successfully
  • a ionic react app using "ionic start myApp tabs"

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

  • added "my-lib" : "../my-lib" in the app package.json dependencies and "npm install" ed it
  • tried many import combinations to reach the MyComponent in the Components namespace, the "best" being
    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 ?

1
reactjstypescriptionic-frameworkstenciljs

1 Answers

0
votes

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;