Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Rollup build empty index.js

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

{
  "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.

>Solution :

export Modal as EditCommentModal from "./components/modals/reactModal/Modal";
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading