Toaster not importing-CodePudding

In my react app I am trying to import <Toaster> but I'm getting the error:

export 'Toaster' (imported as 'Toaster') was not found in './ui'.

I don't understand why.

Toaster.js

function Toaster(props) {
   return (
      <div>
      </div>
   )
}

export default Toaster;

app.js

import {Toaster} from './ui';
<Toaster toasts={['toast1', 'toast2']} />

Inside ui folder on index.js:

import Toast from './Toaster';

export {
  Toast
}

CodePudding user response：

import Toaster like below:

import Toaster from './ui';

This is beacause Toaster was exported as default.

CodePudding user response：

inside ui folder in index.js page

import Toaster from './Toaster';

CodePudding user response：

In ui.js you've exported something you've named Toast but then try to import something called Toaster which of course doesn't exist. Instead try import { Toast } from './ui'.

Otherwise you can name it as you expect it to be:

import Toaster from './Toaster';

export {
  Toaster
}

This is called a named export and you have to import it exactly as you've written it. Only with default export can you name it what you like, or if you explicitly rename the import with import { Toast as WhateverYouWant } from './ui'