Building React Router part of Dave Gray tutorial
Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .
For react router part of the tutorial (Dave Gray), I am first tried to use the old source code (Chapters 16, 17 & 18) with its package.json files (from github)(folder name: learn_react_router-main). I invoked:
npm i react-router-dom -S
to install react-router-dom (takes a long time).
Then ran npm start
I got the following error:
“Error: error:0308010C:digital envelope routines::unsupported”…
npm i react-router-dom -S
to install react-router-dom (takes a long time).
Then ran npm start
I got the following error:
“Error: error:0308010C:digital envelope routines::unsupported”…
I tried out the refactored to react router v6 source code (Chapters 16 & 17 Part 2 – Source Code) (folder name: react_router_v6-main). I copied all its folders and files into ChapXMod after deleting all its folders & files except node_modules.
Then I am trying out: npm start.
I got the same error:
“Error: error:0308010C:digital envelope routines::unsupported”…
Then I am trying out: npm start.
I got the same error:
“Error: error:0308010C:digital envelope routines::unsupported”…
I think I should try both the above without using its package.json files (leaving package.json generated by create-react-app as is). I could not get back the earlier package.json (of React 18). So I will run create-react-app again for new folder ChapX (and delete ChapXMod to avoid confusion).
Used the command:
npx create-react-app chapx
Then I ran (after cd chapx):
npm i react-router-dom -S
It got over fast. Relevant package.json entries are given below:
Used the command:
npx create-react-app chapx
Then I ran (after cd chapx):
npm i react-router-dom -S
It got over fast. Relevant package.json entries are given below:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
So this folder now has React18 and React Router v6.
Then I first tried using learn_react_router-main (old) source files alone (leaving package.json and other files of src unchanged from what create-react-app has created).
On running npm start I got the following errors:
Failed to compile.
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
ERROR in ./src/App.js 15:0-34
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
ERROR in ./src/App.js 15:0-34
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
ERROR in ./src/App.js 44:18-28
export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError,
useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError,
useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
ERROR in ./src/App.js 85:35-41
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext,
UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext,
UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
ERROR in ./src/App.js 163:10-20
export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError,
useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError,
useRouteLoaderData, useRoutes, useSearchParams, useSubmit)
webpack compiled with 4 errors
----
Then I tried using react_router_v6-main source files alone (replacing src directory).
It gave only one error as follows:
Failed to compile.
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
ERROR in ./src/App.js 13:0-34
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
ERROR in ./src/App.js 13:0-34
Module not found: Error: Can't resolve 'date-fns' in 'D:\Users\Ravi-user\vsc-source\ReactProg\DaveGrayTut\chapx\src'
webpack compiled with 1 error
---
---
As per Module not found: Can’t resolve ‘date-fns’ #1948, https://github.com/date-fns/date-fns/issues/1948, the solution is as follows:
npm install –save date-fns
npm install –save date-fns
Executed the above command which successfully completed.
The error got fixed! (On running npm start) Got the message:
Compiled successfully!
Compiled successfully!
Later, I saw that at around 5 hrs, 38 mins into the video, Dave Gray explains that the command, “npm i date-fns S” has to be executed to install the package!
The app. also was shown and initial operations I tried show that it seems to work!
Upgrade to React Router v6, https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v6 ,
Upgrade all <Switch> elements to <Routes>, https://reactrouter.com/en/main/upgrading/v5#upgrade-all-switch-elements-to-routes
React Router v6 in 20 Minutes | RRv6 Upgrade & Refactor Tutorial, https://www.youtube.com/watch?v=XBRLVRjZ3CQ , 21 min. 31 secs., published on Dec 7, 2021 by Dave Gray. This video explains the changes made to earlier version of router tutorial code to migrate it to router v6.
Comments
Post a Comment