Using NextUI in a library

[ELF-VIGO]

I'm trying to use NextUI components to create some own components to my web applications. I have an issue with Select and Popover. I have this code:

import {
	Button,
	Popover,
	PopoverContent,
	PopoverTrigger,
	Select,
	SelectItem,
} from '@nextui-org/react';

import { ChevronDownIcon, FilterIcon } from '../../main';

export function TestPopover() {
	return (
		<Popover placement="bottom" showArrow offset={0}>
			<PopoverTrigger>
				<Button
					startContent={<FilterIcon size="20"></FilterIcon>}
					endContent={<ChevronDownIcon></ChevronDownIcon>}
					size="sm"
					variant="flat"
				>
					{'OtherFilters'}
				</Button>
			</PopoverTrigger>
			<PopoverContent className="w-[440px] p-2 items-end gap-1">
				<Select>
					<SelectItem key="hi">Hi</SelectItem>
					<SelectItem key="bye">Bye</SelectItem>
				</Select>
			</PopoverContent>
		</Popover>
	);
}

When I use this code inside my app, it works: the Select is shown inside the popover and when I click the select it drops down the items. When I put this component inside a library, with Typescript, React and Vite, it doesn't work: when I click the select the popover closes. I believe I'm doing something wrong but I don't know what.

I'm using this tsconfig.json in my library:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "ESNext",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src",
    "lib"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Can anybody help me? Thanks in advance.

[wingkwong]

which version are you using?

[wingkwong]

please share a stackblitz project for us to investigate. thanks.

[ELF-VIGO]

I'm trying to create this project.

[ELF-VIGO]

I made this project: https://stackblitz.com/edit/vitejs-vite-amcxcj.
I tried to make another project to create the library but I found that popover and combo doesn't works in the project I give you.
Can you review this project?
I'll try to make the library project too, but I have some problems with stackblitz. :-)
Thanks.

[ELF-VIGO]

I tried to make the library project: https://stackblitz.com/edit/vitejs-vite-cbx4ya?file=package.json.
It has the same configuration that I use in my VS Code library. When I build I get this error: "Cannot load native addon because loading addons is disabled". Did you try to make a library in stackblitz?

[ELF-VIGO]

An appointment: the first project works fine with NextUI 2.3.6 but not with 2.4.0.

[ELF-VIGO]

Solved. It was a problem with the vite.config.ts. You must add @nextui-org/react, framer-motion and tailwindcss to externalOptions:

import { fileURLToPath } from 'node:url';

import react from '@vitejs/plugin-react';
import { glob } from 'glob';
import { extname, relative, resolve } from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { libInjectCss } from 'vite-plugin-lib-inject-css';

export default defineConfig({
	plugins: [react(), libInjectCss(), dts({ include: ['lib'] })],
	build: {
		lib: {
			entry: resolve(__dirname, 'lib/main.ts'),
			formats: ['es'],
		},
		copyPublicDir: false,
		rollupOptions: {
			external: [
				'react',
				'react/jsx-runtime',
				'@nextui-org/react',
				'framer-motion',
				'next-themes',
				'tailwindcss',
			],
			input: Object.fromEntries(
				glob.sync('lib/**/*.{ts,tsx}').map((file) => [
					// The name of the entry point
					// lib/nested/foo.ts becomes nested/foo
					relative('lib', file.slice(0, file.length - extname(file).length)),
					// The absolute path to the entry file
					// lib/nested/foo.ts becomes /project/lib/nested/foo.ts
					fileURLToPath(new URL(file, import.meta.url)),
				])
			),
			output: {
				assetFileNames: 'assets/[name][extname]',
				entryFileNames: '[name].js',
			},
		},
	},
});

[ELF-VIGO]

The real problem now is the 2.4.0 version. You have an example (https://stackblitz.com/edit/vitejs-vite-amcxcj). Thank you for your support and your work.

[ELF-VIGO]

It's solved with 2.4.2 version. Thank you.