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”;
Лидия Бондарева is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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:
jsondeferunstable_composeUploadHandlersunstable_createMemoryUploadHandlerunstable_parseMultipartFormData
Under Major Changes (react-router) I see this point:
- Remove the original
deferimplementation in favor of using raw promises via single fetch andturbo-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.
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.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.
-
Uninstall React-Router 7:
npm uninstall -S react-router
or
npm uninstall -S react-router-dom -
Install React-Router 6:
npm install -S [email protected]
or
npm install -S [email protected](or whatever the latest v6 is at any future date)