support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by StarDiscoverer453

How do I fix export/import issues for my React TypeScript Material UI component?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I’m developing a React application with TypeScript and Material UI, but I’m running into several compilation errors in App.tsx, such as:

PLAINTEXT
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'.

I’ve defined a custom component in tempSelector.tsx as shown here:

TYPESCRIPT
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 file is imported in App.tsx using the following code:

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

function App() {

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

export default App

The errors make it seem as if my component isn’t being recognized correctly. I suspect this may be due to how I’m exporting and using the component (also, it’s not capitalized, which might cause JSX to treat it as a built-in HTML element).

What am I doing wrong and how can I fix this issue?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The issue is with how you're exporting and then using your component. In your tempSelector.tsx file, you’re exporting an object with a key named tempSelector instead of exporting the component function itself. When you import it in App.tsx, you're getting that object rather than a React component function (or class). This is why TS/ESLint complains that tempSelector is declared but its value is never read and why TS2339 complains that property tempSelector does not exist on JSX.IntrinsicElements.

Additionally, React components should be named with a capital letter (PascalCase) so that JSX treats them as components rather than built-in HTML elements.

How to Fix It

Rename the component (optional but recommended):

Change the name from tempSelector to something like TempSelector.
Export the component directly instead of wrapping it in an object.

Below are the corrected files:

TempSelector.tsx

TYPESCRIPT
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;

App.tsx

TYPESCRIPT
import './App.css';
import TempSelector from "./TempSelector";

function App() {
  return (
    <>
      <TempSelector />
    </>
  );
}

export default App;

What Changed

Naming: Renamed the component to TempSelector to follow the PascalCase convention.
Export: Changed the export from export default { tempSelector } to export default TempSelector so that the imported value is a component function.
Import: Updated the import in App.tsx accordingly and used <TempSelector /> in JSX.

These changes should resolve the compilation errors and have your component render correctly.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by StarlitTracker609 • 1 month ago

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:

TYPESCRIPT
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:

TYPESCRIPT
import TempSelector from "./tempSelector";

//...other codes

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

tempSelector.tsx:

TYPESCRIPT
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:

TYPESCRIPT
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：

TYPESCRIPT
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.

No comments yet.

Discussion

No comments yet.

How do I fix export/import issues for my React TypeScript Material UI component?

2 Answers

How to Fix It

What Changed

Discussion

Similar Posts

Why Does My Next.js 14 App Occasionally Log a 404 for favicon.ico?