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

Question

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>
  );
}

Casemaker

This is an issue with version 5.2.0 . There's already a GitHub issue: github.com/mui-org/material-ui/issues/29860 – Substantialism

Okay got it, thank you. @BenjaminM – Casemaker

anyone else curious about what these "__SECRET_INTERNALS_DO_NOT_USE_OR__YOU_WILL_BE_FIRED" is about? – Resistless

Answer 1

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

Frostbite

Answer 2

Try to change the first import in this

import * from React

That can maybe work

Cogitate

This isn't even a valid js code... – Dislimn

Answer 3

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(){...}

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

Dispossess