Hello Nam , Sorry to distrub you here but I need some help,
I am working on @meroui/react project and its a UI library for react and nextjs. I wrote this same thing on fb but thought it would be very long so better to state that here.
I want help regarding :
1) Bundler -> I was using rollup as bundler for my UI lib. It generated whole project in a single bundle file that i don't want. It also didnot support emotion styling as well as use client hook. After bundling it the project size was too large as well . So I switched to webpack. Webpack basically separates components inside dist like dist/Button but it also creates a single bundle as dist/Button/Button.js file and also doesnot support adding use client hook. I know i can create webpack plugin for that and I will do too.
2) Types and Imports ->this willl be eassy for you. Please tell me why I amnot getting import suggestons ? Have i exported in wrong way or something else. I want import suggestions to come from my lib too just like antd and MUI. Best in case i want to allow import in both ways :
import Button from "@meroui/react/Button" and
import {Button} from "@meroui/react"
3) I see "use context" in build code with both rollup and webpack. I have not used useContext anywhere but still appears in build that givves error when using on other projects. without using "use client" whenever i use my component, I get errors likke:
./node_modules/@meroui/react/dist/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module'
What i want: I want build output like antd where each component has index.js (for now webpack creates index.d.ts, Button.d.ts and Button.js but not exports it in index.js file ) eg: dist/Button/index,js file with commonjs syntax like
"use strict";
"use client";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _Button = _interopRequireDefault(require("./Button"));
var _ErrorBoundary = _interopRequireDefault(require("./ErrorBoundary"));
const Button = _Button.default;
Button.ErrorBoundary = _ErrorBoundary.default;
var _default = exports.default =Button;
and single main dist/index/index.js file that has export statements instead of complete package bundle in it.
Can you please look at my repo and tell what i am missing or doing wrong ? Your 5 minutes can save my whole week 🥇
I have used your zoom package and it works fine on my nextjs 14 project . How did you make that work without errors?
Or can you ssuggesst what approach works for me ? My components work finne when i use them as react component in nnextjs or vite project . But when i use them as package, i get broken pages with tons of errors.
Description of the problem
Hello Nam , Sorry to distrub you here but I need some help, I am working on @meroui/react project and its a UI library for react and nextjs. I wrote this same thing on fb but thought it would be very long so better to state that here. I want help regarding : 1) Bundler -> I was using rollup as bundler for my UI lib. It generated whole project in a single bundle file that i don't want. It also didnot support emotion styling as well as use client hook. After bundling it the project size was too large as well . So I switched to webpack. Webpack basically separates components inside dist like dist/Button but it also creates a single bundle as dist/Button/Button.js file and also doesnot support adding use client hook. I know i can create webpack plugin for that and I will do too.
2) Types and Imports ->this willl be eassy for you. Please tell me why I amnot getting import suggestons ? Have i exported in wrong way or something else. I want import suggestions to come from my lib too just like antd and MUI. Best in case i want to allow import in both ways :
3) I see "use context" in build code with both rollup and webpack. I have not used useContext anywhere but still appears in build that givves error when using on other projects. without using "use client" whenever i use my component, I get errors likke:
What i want: I want build output like antd where each component has index.js (for now webpack creates index.d.ts, Button.d.ts and Button.js but not exports it in index.js file ) eg:
dist/Button/index,js filewith commonjs syntax likeand single main dist/index/index.js file that has export statements instead of complete package bundle in it. Can you please look at my repo and tell what i am missing or doing wrong ? Your 5 minutes can save my whole week 🥇
I have used your zoom package and it works fine on my nextjs 14 project . How did you make that work without errors? Or can you ssuggesst what approach works for me ? My components work finne when i use them as react component in nnextjs or vite project . But when i use them as package, i get broken pages with tons of errors.