Rollup build empty index.js

Question

I'm creating a simple component to publish on npm and using rollup to build. The issue is index.js has nothing but import 'react'

Here's rollup config

import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'es',
    name: 'beyonderui',
  },
  external: ['react', 'react-dom'],
  plugins: [
    postcss({ include: '**/*.css', extract: true, minimize: true }),
    typescript({ tsconfig: 'tsconfig.json' }),
  ],
});

Here's typescript config

{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "target": "ES2020",
    "module": "Es6",
    "declaration": true,
    "declarationDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": false
  }
}

and the entry file index.ts code

export * from './components/modals/reactModal/Modal'

modal component code

import * as React from 'react';
import {
  CSSProperties,
  ComponentType,
  Dispatch,
  ReactNode,
  SetStateAction,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import styles from './css/Modal.module.css';
import animations from './css/ModalAnimations.module.css';

type PropsType = {
  children?: ReactNode;
  show: boolean;
  setShow: Dispatch<SetStateAction<boolean>>;
  modalStyles?: CSSProperties;
  overlayStyles?: CSSProperties;
  overlayOpacity?: number;
  closeButtonStyles?: CSSProperties;
  closeButtonVariant?: number;
  CustomCloseButton?: ComponentType<any> | null;
  animateIn?: string;
  animateOut?: string;
  animateDuration?: number;
  onOpen?: () => void;
  onOpenStart?: () => void;
  onOpenEnd?: () => void;
  onClose?: () => void;
  onCloseStart?: () => void;
  onCloseEnd?: () => void;
};

type AnimationObject = {
  in: string[];
  out: string[];
  init: string[];
};

export default function Modal({
  children,
  show = false,
  setShow = () => {},
  modalStyles = {},
  overlayStyles = {},
  overlayOpacity = 0.3,
  closeButtonStyles = {},
  closeButtonVariant = 1,
  CustomCloseButton = null,
  animateIn = 'fadeIn-down',
  animateOut = 'fadeOut-down',
  animateDuration = 300,
  onOpen = () => {
    console.log('opening');
  },
  onOpenStart = () => {
    console.log('open start');
  },
  onOpenEnd = () => {
    console.log('open end');
  },
  onClose = () => {
    console.log('closing');
  },
  onCloseStart = () => {
    console.log('closing start');
  },
  onCloseEnd = () => {
    console.log('closing end');
  },
}: PropsType) {
...

return (
 ...
 )
}

I dont usually deep dive into libraries so I don't know what wrong I'm doing here. I can't find the solution by searching anywhere.

Another problem I encountered is final bundled index.js does not have an import to css file index.css Its code is

import * as React from 'react';
import { useRef, useState, useMemo, useEffect } from 'react';

var styles = {
  modal: 'Modal-module_modal__IfFoo',
  closeButton: 'Modal-module_closeButton__jZuqK',
  closeButtonVariant1: 'Modal-module_closeButtonVariant1__BV5Hk',
  closeButtonVariant2: 'Modal-module_closeButtonVariant2__xVtJs',
  overlay: 'Modal-module_overlay__721Fw',
};

var animations = {
  fadeIn: 'ModalAnimations-module_fadeIn__mqkPF',
  fadeOut: 'ModalAnimations-module_fadeOut__8Pnhq',
  left: 'ModalAnimations-module_left__RvQS0',
  right: 'ModalAnimations-module_right__8kLcG',
  up: 'ModalAnimations-module_up__4dHbH',
  down: 'ModalAnimations-module_down__Wbvrq',
  zoomIn: 'ModalAnimations-module_zoomIn__yRVif',
  zoomOut: 'ModalAnimations-module_zoomOut__bQifz',
  slideIn: 'ModalAnimations-module_slideIn__ePxNr',
  slideOut: 'ModalAnimations-module_slideOut__qY2YX',
};
...

It should have a line import './index.css' when I add this manually it apply all the styles but rollup clear this line on every build.

Answer 1

export * as Modal from "./components/modals/reactModal/Modal";