TSX 文件无法呈现导入的 React 组件

Question

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?

Answer 1

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'],
    },
};