I am attempting to run a React application using Typescript and Material UI.

I have created a custom component called tempSelector shown below:

import {Autocomplete, TextField} from "@mui/material";

const theData = [
    {
        info: 'Hello',
        name: 'Info data',
    },
    {
        info: 'World',
        name: 'More data',
    },
    {
        info: 'HowAreYou',
        name: 'Still More Data',
    },
];
const tempSelector = ()  => {
    return(
        <Autocomplete
            disablePortal
            options={theData}
            sx={{ width: 300 }}
            renderInput={(params) => <TextField {...params} label="Movie" />}
        />
    )
}

export default { tempSelector }

This is in the tempSelector.tsx file.

The App.tsx file has the following code:

import './App.css'
import tempSelector from "./tempSelector.tsx";

function App() {

  return (
    <>
        <tempSelector />
    </>
  )
}

export default App

Unfortunately, strangely enough, I am seeing the following compilation errors in App.tsx:

TS6133: 'tempSelector' is declared but its value is never read.
ESLint: 'tempSelector' is defined but never used. (@typescript-eslint/no-unused-vars)
TS2339: Property 'tempSelector' does not exist on type 'JSX.IntrinsicElements'.

These errors make no sense to me. I am including tempSelector into the App component, yet it looks as though the application isn't "seeing" the tempSelector and the tempSelector isn't handling the return type properly.

Does anyone have any idea what is happening here? More importantly: how do I fix this problem?

I am attempting to run a React application using Typescript and Material UI.

I have created a custom component called tempSelector shown below:

import {Autocomplete, TextField} from "@mui/material";

const theData = [
    {
        info: 'Hello',
        name: 'Info data',
    },
    {
        info: 'World',
        name: 'More data',
    },
    {
        info: 'HowAreYou',
        name: 'Still More Data',
    },
];
const tempSelector = ()  => {
    return(
        <Autocomplete
            disablePortal
            options={theData}
            sx={{ width: 300 }}
            renderInput={(params) => <TextField {...params} label="Movie" />}
        />
    )
}

export default { tempSelector }

This is in the tempSelector.tsx file.

The App.tsx file has the following code:

import './App.css'
import tempSelector from "./tempSelector.tsx";

function App() {

  return (
    <>
        <tempSelector />
    </>
  )
}

export default App

Unfortunately, strangely enough, I am seeing the following compilation errors in App.tsx:

TS6133: 'tempSelector' is declared but its value is never read.
ESLint: 'tempSelector' is defined but never used. (@typescript-eslint/no-unused-vars)
TS2339: Property 'tempSelector' does not exist on type 'JSX.IntrinsicElements'.

These errors make no sense to me. I am including tempSelector into the App component, yet it looks as though the application isn't "seeing" the tempSelector and the tempSelector isn't handling the return type properly.

Does anyone have any idea what is happening here? More importantly: how do I fix this problem?

• reactjs
• typescript
• jsx

• 2 You're exporting an object ( { tempSelector } ) as the default. Just remove the curly-braces and it should fix your errors – millhouse Commented Feb 4 at 23:12
• You might want to check this answer: stackoverflow.com/a/33307487/4387278 The question is different than yours, but that answer could be helpful – lmtaq Commented Feb 4 at 23:22
• Definitely answered here: TypeScript export vs. default export. – Phil Commented Feb 4 at 23:30
• 2 React also tends to enforce PascalCased conventions on component names. You should be using TempSelector – Phil Commented Feb 4 at 23:32
• 1 The change of name and the removal of the braces around the export did the trick. Thanks to all. – Factor Three Commented Feb 5 at 3:41

1 Answer 1

As @millhouse and @Phil mentioned with TypeScript export vs. default export, not just the braces from the import but also the export ones. With ES6, usually the default export method is adopted:

tempSelector.tsx:

import { Autocomplete, TextField } from "@mui/material";

const theData = [
  // ...data
];

const TempSelector = () => {
  return(
     {/* ...component */}
  );
}

export default TempSelector;

Which will be the same as export default function tempSelector() {/* ...content */}.

App.tsx:

import TempSelector from "./tempSelector";

//...other codes

You can also use the export method, but the syntax will be:

tempSelector.tsx:

import { Autocomplete, TextField } from "@mui/material";

const theData = [
  // ...data
];

const TempSelector = () => {
  return(
     {/* ...component */}
  );
}

export { TempSelector };

Or export with export const TempSelector = () => {/* ...content */} directly.

App.tsx:

import { TempSelector } from "./tempSelector";

//...other codes

In my own experience, except in rare cases like util files, usually, the ES6 method is used because one major component per file is cleaner and easier to maintain, but there are no strict restrictions on how to structure the project files.

Be careful that the current theData array will not work for the AutoComplete component, at least you have to change one object property to label：

const theData = [
  {
    label: "Hello",
    name: "Info data",
  },
  // ...other objects
];

Or you will see this error:

Objects are not valid as a React child (found: object with keys {info, name}). If you meant to render a collection of children, use an array instead.