When I import the Day component into Week component (both are .tsx files), I get the following error:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of Week
Day.tsx :
import React from 'react';
export default function Day () {
return (
<div>
I am day
</div>
)
}
Week.tsx
import React from 'react';
import Day from './Day'
export default function Week () {
return (
<div>
I am Week
<Day />
</div>
)
}
If I were to remove Day from the Week component, I am able to see the Week component on the screen. If I were to rename the Day.tsx file into Day.jsx, the issue would be fix. It only happens with typescript. I have also tried different import conventions.
Any ideas?
Add this to your tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"jsx": "react-jsx"
},
"include": [
"src",
]
}
If you are using webpack also this would fix the problem
module.exports = {
//Rest of your code
resolve: {
extensions: ['.ts', '.tsx'],
},
};