Element type is invalid

[alexarsh]

Trying to use the latest react-notifications-component version (3.2.6), but getting the following error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

My index.js:

import React from "react";
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import ReactNotification from 'react-notifications-component'
import { ConnectedRouter } from 'connected-react-router'
import { PersistGate } from 'redux-persist/lib/integration/react'
import configureStore, { history } from './src/app/store'
import { Login } from '/src/routes/Login'
import { SizerAdmin } from '/src/routes/SizerAdmin'
import { SizerCalculator } from '/src/routes/SizerCalculator'
import './src/index.scss'

const { store, persistor } = configureStore(/* provide initial state if any */)

const App = () => (
  <Provider store={store}>
    <ReactNotification />
    <PersistGate persistor={persistor}>
      <ConnectedRouter history={history}>
        <>
          <Switch>
            ...
          </Switch>
        </>
      </ConnectedRouter>
    </PersistGate>
  </Provider>
)

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Removing "<ReactNotification />" solves the issue. Any idea?

[VettvangurEgill]

We are having similar issues with the type not being assignable to Type_Notification

"react": "^16.13.1", "react-notifications-component": "^3.2.6",

import ReactNotification, {store} from 'react-notifications-component';
import { useSubscribe } from "jstates-react";
import notificationState from "components/store/notificationState";
import NotificationItemDTO from "src/models/notification";

const CartNotification = ({
  title,
  message,
  type
}) => {

  const { notificationItem }: { notificationItem: NotificationItemDTO } = useSubscribe(notificationState);

  //* Success(success), Error(danger), Info(default), Modified(warning), Shortage(shortage)

  const notification = () => {
    return (
      <>
        {notificationItem ? (
          <>
            {notificationItem.Type == "shortage" ? (
              store.addNotification({
                title: notificationItem.Title,
                message: notificationItem.Message,
                type: notificationItem.Type,
                insert: "top",
                container: "top-right",
                animationIn: ["animate__animated", "animate__fadeIn"],
                animationOut: ["animate__animated", "animate__fadeOut"],
                dismiss: {
                  duration: 0,
                  showIcon: true
                },
                content: (
                  <div className={`notification__custom--${notificationItem.Type}`}>
                    {/* <div className="notification__custom-icon">
                      <i className="general-icon-info" />
                    </div> */}
                    <div className="notification__content">
                      <div className="notification__close"></div>
                      <div className="notification__title">{notificationItem.Title}</div>
                      <div className="notification__message">{notificationItem.Message}</div>
                    </div>
                  </div>
                )
              })
            ) : (
              store.addNotification({
                title: notificationItem.Title,
                message: notificationItem.Message,
                type: notificationItem.Type,
                insert: "top",
                container: "top-right",
                animationIn: ["animate__animated", "animate__fadeIn"],
                animationOut: ["animate__animated", "animate__fadeOut"],
                dismiss: {
                  duration: notificationItem.Type == "success" ? 3000 : 0,
                  showIcon: true
                }
              })
            )}
          </>
        ) : undefined }
      </>
    )
  }

  useEffect(() => {
    notification();
  });

  return (
    <ReactNotification />
  )

};

export default CartNotification;```

```ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:28:17 
    TS2322: Type '"top"' is not assignable to type 'NOTIFICATION_INSERTION'.

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:29:17 
    TS2322: Type '"top-right"' is not assignable to type 'NOTIFICATION_CONTAINER'.

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:32:17 
    TS2739: Type '{ duration: number; showIcon: true; }' is missing the following properties from type 'iNotificationDismiss': onScreen, pauseOnHover, waitForAnimation, click, touch

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:53:17 
    TS2322: Type 'string' is not assignable to type 'NOTIFICATION_TYPE'.

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:54:17
    TS2322: Type '"top"' is not assignable to type 'NOTIFICATION_INSERTION'.

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:55:17
    TS2322: Type '"top-right"' is not assignable to type 'NOTIFICATION_CONTAINER'.

ERROR in [at-loader] ./src/components/CartNotification/CartNotification.tsx:58:17
    TS2739: Type '{ duration: number; showIcon: true; }' is missing the following properties from type 'iNotificationDismiss': onScreen, pauseOnHover, waitForAnimation, click, touch```

[teodosii]

Try downgrading (3.1.0 probably with types package) while I fix it these days, the issue is just for typescript usage, typings related. For some reason the typings/exports are not correctly set.

[teodosii]

3.2.9 should have this fixed, but the types still don't show properly when imported in a TS project. I don't know why T_T

@VettvangurEgill @alexarsh

Use new import syntax instead of default import import { ReactNotifications, Store } from 'react-notifications-component'

[masbaehr]

Note that not only the default import has change but also an s has been added! I was searching for an hour for why i was getting the error:

Before it was:

import ReactNotification

now:

import { ReactNotifications

And also <ReactNotification/> must be changed to <ReactNotifications />

[WillyRamirez]

Issue still persists using version 3.4.1

[kulbon]

+1

[giagara]

any news about this issue?

[masbaehr]

The issue does not persist, but you need to do what was explained Change <ReactNotification/> to <ReactNotifications /> and check your imports!

[giagara]

@masbaehr i just figured out, thanks!

Just side note: on windows machine, the "old" import without the "s" is working.