как импортировать компоненты из библиотеки Stencil в приложение React?

Question

Я только что создал:

• шаблон JS библиотеку компонентов с именем "my-lib" с помощью мастера "npm init stencil" и успешно построил его
• приложение ioni c react с использованием «ioni c start myApp tabs»

Теперь я хотел бы использовать «my-component» по умолчанию, также известный как MyComponent из my-lib, поэтому я

• добавлено "my-lib" : "../my-lib" в пакет приложения. json зависимостей и «npm установить» отредактировали
• попробовали множество комбинаций импорта для достижения MyComponent в пространстве имен Components, "лучший" - это

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

, где завершение кода в Visual Studio Code выполняется успешно, но я получаю:

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.>

Какой правильный способ как решить эту проблему, особенно если вы планируете использовать несколько библиотек внешних компонентов?

Answer 1

Вы можете посмотреть https://stenciljs.com/docs/react.

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

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

Вы также можете использовать @stencil/react-output-target для автоматического создания привязок для всех ваших компонентов ( см. https://stenciljs.com/docs/react#bindings), так что если у вас есть my-component, он сгенерирует для вас оболочку MyComponent, которая является настоящим компонентом React.

---

Что касается вашей ошибки импорта, вы, вероятно, можете импортировать ее как

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