1. Для импортирования компонентов из собственного UI-кита, вам следует сначала убедиться, что ваш UI-кит корректно настроен и экспортирует компоненты.
Пример экспорта компонента из UI-кита:
```jsx
// Button.tsx
import React from 'react';
const Button = ({ text, onClick }) => {
return <button onClick={onClick}>{text}</button>;
}
export default Button;
```
Затем вы можете импортировать этот компонент в любой файл вашего приложения:
```jsx
// App.jsx
import React from 'react';
import Button from 'path/to/Button';
const App = () => {
return (
<div>
<Button text="Click me" onClick={() => alert('Button clicked')} />
</div>
);
}
export default App;
```
2. Чтобы настроить сборку Webpack для создания небольшого UI Kit на React с использованием TSX файлов без ошибок в импортах, вам следует убедиться, что ваш webpack.config.js настроен правильно.
Пример настройки webpack.config.js:
```javascript
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
}
};
```
Создайте файл index.tsx в вашем проекте и импортируйте в него все компоненты вашего UI-кита:
```jsx
// index.tsx
export { default as Button } from './Button';
export { default as Input } from './Input';
```
Теперь вы можете компилировать ваш проект с помощью webpack без ошибок в импортах компонентов из вашего UI-кита.