React.Suspense expected string after update

A recent update caused my React.Suspense fallback to throw this error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This exact code used to work and I'm wondering if anyone has any thoughts on which package to roll back(?)

// App.jsx

<Suspense fallback={<Fallback/>}>...</Suspense>

Here's my Fallback component:

import Loader from 'react-loader-spinner';
import React from 'react';

export const MediaUploading = ({
  t = 'Grid',
  c = '#121d66',
  h = '60',
  w = '60',
}) => {
  return (
    <div className="media-uploading">
      <Loader type={t} color={c} height={h} width={w} timeout={0} />
    </div>
  );
};

// fallback
export const Fallback = ({
  t = 'Grid',
  c = '#121d66',
  h = '100',
  w = '100',
}) => {
  return (
    <div className="loading">
      <Loader type={t} color={c} height={h} width={w} timeout={0} />
    </div>
  );
};

Solution 1:

Looks like when react-loader-spinner moved to v5, they dropped their Loader component and removed the default export. So if you want to keep using the Loader, then stick to react-spinner-loader@4.

v4 - only has a default export (no named exports)

import Loader from "react-loader-spinner";

v5 - only has named exports (no default export)

import { Grid } from "react-loader-spinner";