DZHAMBULAT-SAMOUCHKA
@DZHAMBULAT-SAMOUCHKA
Frontend разработчик

Как решить проблему импортов компонентов из своего ui кита?

Я решил попробовать создать свой небольшой ui кит на react с помощью webpack. В каталоге с ui китом у меня вот такая структура:

build
node_modules
src
---- ui
----|---- button
----|----|---- MyButton
----|----|----|---- MyButton.tsx
---- index.ts
package.json
package-lock.json
tsconfig.json
webpack.config.json


В файл src/index.ts я импортирую все свои созданные компоненты. Затем пишу npm run build и создаю сборку.

index.ts
import MyButton from './ui/button/MyButton/MyButton'

export { MyButton }


package.json
{
	"name": "grame-ui",
	"version": "1.0.0",
	"description": "My first and test ui kit made in React",
	"main": "./build/index.js",
	"scripts": {
		"build": "webpack",
	},
	"keywords": [],
	"author": "Dzhambulat",
	"license": "ISC",
	"devDependencies": {
		"@types/react": "^18.3.2",
		"@types/react-dom": "^18.3.0",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"ts-loader": "^9.5.1",
		"typescript": "^5.4.5",
		"webpack": "^5.91.0",
		"webpack-cli": "^5.1.4"
	},
	"peerDependencies": {
		"react": "*",
		"react-dom": "*"
	},
	"files": [
		"build"
	]
}


webpack.config.json
const path = require('path')

module.exports = {
	mode: 'development',
	entry: './src/index.ts',
	output: {
		filename: 'index.js',
		path: path.resolve(__dirname, 'build'),
		libraryTarget: 'umd',
		clean: true,
	},
	resolve: {
		extensions: ['.ts', '.tsx'],
	},
	externals: {
		react: 'react',
	},
	module: {
		rules: [
			{ test: /\.(ts|tsx)$/, use: ['ts-loader'], exclude: '/node_modules/' },
		],
	},
}


После сборки я пишу команду npm link чтобы была возможность пользоваться ui китом локально.
Затем перехожу в папку с рабочим проектом и пишу в консоли npm link grame-ui и пытаюсь импортировать компонент MyButton из grame-ui в файле App.tsx рабочего проекта.

App.tsx
import { MyButton } from 'grame-ui'

function App() {
	return <MyButton>1</MyButton>
}

export default App


В редакторе кода никаких красных полосок и ошибок не видно. Но при запуске dev сервера рабочего проекта в консоли выползает ошибка:
SyntaxError: The requested module '/grame-ui/build/index.js?t=1716632618529' does not provide an export named 'MyButton' (at App.tsx:1:10)


День потратил на решение проблемы, но ничего не понял.
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы