#rollup

Nextjs with tailwind기반 ui라이브러리 질문

프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때 사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다. 아래는 현재 rollup.config.js입니다.

vite에 관하여 질문드립니다.

프로덕션에 vite를 사용하여 개발환경을 구성하려고 공부 중인데, 궁금한 점이 생겼으나 정보가 파편화되어있어 정확한 이해가 어려워 질문 올립니다! 제가 vite 공식 가이드와 구글링하면서 이해한 바로는 “기존 브라우저 환경에서는 모듈화된 코드들을 브라우저가 읽을 수 없어 webpack과 같은 번들러를 이용해 하나의 파일로 합치는 과정을 거쳤고, 이것이 일반적인 번들러의 역할이었으나 브라우저가 ESM을 지원하면서 import, export를 별도의 도구 없이 브라우저 자체에서 해석할 수 있고 처리할 수 있게 되었으며 vite는 이 점을 활용하여 번들링 과정 없이 바로 실행하여 파일이 import되어 필요할 때 불러오는 방식을 사용한다. “ 라고 이해했는데 혹시 맞을까요? 추가로 vite의 공식 가이드에는 “프로덕션에서 번들 되지 않은 ESM을 가져오는 것은 중첩된 import로 인한 추가 네트워크 통신으로 인해 여전히 비효율적입니다” 라고 나와있는것을 보았을때, 위에 적힌 번들링없이 실행하는 것은 개발모드에만 사용되며, 프로덕션에는 여전히 webpack과같이 번들링을 진행하며 webpack대신 Rollup을 사용한다는 점만 다르다고 이해하였는데 이부분에서 틀린내용이 있을까요? 만약 그렇다면 vite가 강조하는 장점이 프로덕션에는 크게 작용하지않는다고 느껴져서요. 질문 자체가 잘못되었거나 ,틀린내용이 있다면 편하게 지적주시고 알려주시면 감사드리겠습니다!

리액트 컴포넌트 라이브러리 구현 시 에러

React 스타일 컴포넌트 라이브러리를 제작중입니다. Ts / rollup / yarn berry를 사용했으며 @emotion/styled를 사용해서 기본적인 스타일링을해서 사용했을 땐 별 문제 없이 의존성 설치도 되고 사용에 이상이 없었으나 React key값 관리와 차트 사용을 위해 차트 "apexcharts": "^3.42.0", "react-apexcharts": "^1.4.1", key 값 "shortid"를 사용하니까 의존성을 받아 사용하던 프로젝트에서 에러가 발생했습니다 "Uncaught SyntaxError: The requested module '/node_modules/react-apexcharts/dist/react-apexcharts.min.js?v=73045f40' does not provide an export named 'default' " 직접 제작한 라이브러리에서 외부 라이브러리를 사용하려면 혹시 다른 방법이 필요한걸까요..??