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.
For some reason downgrading @headlessui to 1.4 (I was using 1.7) works.