CODEWITHSUNDEEP
reactjsimportexport
Adarsh Mamgain
Adarsh Mamgain

Reputation: 323

React is giving error: export 'useId' (imported as 'React') was not found in 'react'

I've created a new react app using webpack. It is showing me this error I've written minimum code as of now. The code giving error is:

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

export default function Navigation() {
  return (
    <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
            <Toolbar variant="dense">
                <Typography variant="h6" color="inherit" component="div">
                Photos
                </Typography>
            </Toolbar>
        </AppBar>
    </Box>
  );
}

enter image description here

Upvotes: 18

Views: 13471

Answers (5)

Max Eisenhardt
Max Eisenhardt

Reputation: 596

With a little more information, we can narrow down what's going on here. Are you able to share the contents of your package.json dependencies?

useId was released in React 18, I wonder if you are using an earlier version of React that @mui is trying to use, but the React version does not match.

Upvotes: 0

Krusty the Clown
Krusty the Clown

Reputation: 733

useId was added in React 18, so another reason this issue can arise is if you're on an earlier React version.

Also, DON'T POST SCREENSHOTS OF CODE / ERRORS! Use backticks (`) to format them.

Upvotes: 1

Er. Bharat Jograna
Er. Bharat Jograna

Reputation: 19

there is not mistake in react import. you can't export default at the time of initialization so if you want to export default write export default after initialization. at the time of initialization you can just export that component and that's why import gives an error.

  1. export at initialization

export function Navigation(){...}

  1. export after all initialization.

function Navigation(){...}

export default Navigation;

Note :- there is one bad practice component name Navigation with file name userId.js, try to use same name of export default component and filename. with first capital latter.

Upvotes: 0

Gabriele Callegari
Gabriele Callegari

Reputation: 24

Try to change the first import in this

import * from React

That can maybe work

Upvotes: -1

Vipin N
Vipin N

Reputation: 43

use id is a build in hook that provided by react it self, it's for generating unique IDs that can be passed to accessibility attributes.

import { useId } from 'react';

const passwordHintId = useId();

You can check react official website for the reference

https://react.dev/reference/react/useId

Upvotes: 0

Related Questions