reactjsnext.jsrollupheadless-uitsdx

Error while importing component from library


I'm working on this component library that uses tsdx, all of the components work fine except for this one. It's a dialog that uses the @headlessui/react lib, and it's Dialog component. It's exported like this:

DialogBase.Content = DialogContent;
DialogBase.Actions = DialogActions;
DialogBase.Description = DialogDescription;

export default DialogBase;

Then, in the index.ts file, where I have to export all my components to expose them, it's exported like this:

export { default as DialogBase } from './DialogBase';

Everything works fine, but when I try to use the component on a different project I get this error:

Uncaught TypeError: can't access property "Overlay", u.Dialog is undefined

And it's weird because the component works fine on other Nextjs projects, but not on this one (this one is CRA).

This is my tsconfig file

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
    "module": "ESNext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noImplicitAny": false,
    "outDir": "./../src",
    "rootDir": "./",
    "sourceMap": true,
    "declaration": true,
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "noEmit": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["node", "jest", "@testing-library/jest-dom", "facebook-js-sdk"],
    "baseUrl": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

and my tsconfig.extend file:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@test/*": ["./__test__/*"],
      "@components/*": ["./components/*"],
      "@domain/*": ["./domain/*"],
      "@hooks/*": ["./hooks/*"],
      "@context/*": ["./context/*"],
      "@pages/*": ["./pages/*"],
      "@services/*": ["./services/*"],
      "@types/*": ["./types/*"],
      "@util/*": ["./util/*"]
    }
  }
}

As sugested by one of the answers I removed the Overlay component, now I'm getting this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I also have to mention that other components exported the same way are working fine on both apps.

Any ideas? Thanks.


Solution

  • For some reason downgrading @headlessui to 1.4 (I was using 1.7) works.