hook.js:608 SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=b741cdde' does not provide an export named 'defer'

import {
  Await,
  defer,
  useLoaderData,
  Link
} from "react-router-dom";

There's an error on console, how do I solve it?

Tried to import defer from "react-router-dom";

Issue

defer was removed in React-Router v7.

Using React-Router v7

See specifically Removed APIs:

Removed APIs

The following APIs have been removed in React Router v7:

• json
• defer
• unstable_composeUploadHandlers
• unstable_createMemoryUploadHandler
• unstable_parseMultipartFormData

Under Major Changes (react-router) I see this point:

• Remove the original defer implementation in favor of using raw promises via single fetch and turbo-stream (#11744)

It doesn't appear as though anything replaced defer, but instead they just simplified the API. If you wish to "defer" loaded data then just return the Promise(s) from your loaders instead of await-ing them.

See Streaming with Suspense for details.

1. Return a promise from loader

   React Router awaits route loaders before rendering route components. To unblock the loader for non-critical data, return the promise instead of awaiting it in the loader.

2. Render the fallback and resolved UI

   The promise will be available on loaderData, <Await> will await the promise and trigger <Suspense> to render the fallback UI.

Note

When installing newer major versions of dependencies it is important to review the change log (or CHANGELOG.md) to make yourself aware of any breaking changes.

Alternatively Roll-Back to React-Router v6

You could also install the previous version that does still include defer.

1. Uninstall React-Router 7:

   npm uninstall -S react-router or npm uninstall -S react-router-dom

2. Install React-Router 6:

   npm install -S react-router@6.28.0 or npm install -S react-router-dom@6.28.0

   (or whatever the latest v6 is at any future date)