Bug: React Router v7.x Compatibility Issue with Parcel Bundler

[Murugan2207]

I'm using React Router as a...

library

Reproduction

When using React Router v7.x with the Parcel bundler, the imports in node_modules/react-router-dom/dist/index.mjs are incorrect. This causes the app to fail during compilation, throwing an error related to module resolution.

System Info

node 20 version

Used Package Manager

npm

Expected Behavior

it should work fine with all the versions

Actual Behavior

Now ithe react router V7+ not working with parcel bunder

[timdorr]

Can you share the error you're getting? Can you put together a reproduction of the issue, perhaps on StackBlitz or Codesandbox?

[Murugan2207]

C:\Users\MURUGAN.V\Desktop\React-Webapp\node_modules\react-router-dom\dist\index.mjs:13:48
12 | // index.ts

13 | import { HydratedRouter, RouterProvider } from "react-router/dom";
| ^^^^^^^^^^^^^^^^^^
14 | export * from "react-router";
15 | export {

@parcel/resolver-default: Cannot load file './dom' from module 'react-router'
This is the error while importing BrowserRouter from react-router-dom

[timdorr]

You need to enable package exports: https://parceljs.org/features/dependency-resolution/#package-exports

[atul030702]

Hey, I am getting the same error today. Since i'm a beginner(coding in react since 2weeks). I'm not able to understand, how to solve the issue?

[Murugan2207]

As per latest upgrade to V7 of React Router ( https://reactrouter.com/upgrading/v6#upgrade-to-v7), we no longer need "react-router-dom" as the packages have been simplified. We can import everything from "react-router". Note that we only need "react-router" in our package.json. *Issue:* As explained about react router in NamasteReact series( episode :07), while importing createBrowserRouter from "react-router-dom" was working fine as it was in the previous version of V6. But now from V7 it throws an error. *Fix:* 1. Uninstall react-router-dom and install react-router to latest 2. Replace the following code in *App.js* :- import { createBrowserRouter, RouterProvider, Outlet } from *"react-router-dom*"; with the below code:- import { createBrowserRouter, RouterProvider, Outlet } from *"react-router"* ; (P.S :- please verify the above fix )

…

On Fri, 28 Feb 2025 at 17:49, Atul Kumar ***@***.***> wrote: Hey, I am getting the same error today. Since i'm a beginner(coding in react since 2weeks). I'm not able to understand, how to solve the issue? — Reply to this email directly, view it on GitHub <#13097 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYBRAMSQXFFJO5XIDYQLC532SBH37AVCNFSM6AAAAABXWSODS2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJQGUYDONRSGY> . You are receiving this because you authored the thread.Message ID: ***@***.***> [image: atul030702]*atul030702* left a comment (remix-run/react-router#13097) <#13097 (comment)> Hey, I am getting the same error today. Since i'm a beginner(coding in react since 2weeks). I'm not able to understand, how to solve the issue? — Reply to this email directly, view it on GitHub <#13097 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYBRAMSQXFFJO5XIDYQLC532SBH37AVCNFSM6AAAAABXWSODS2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJQGUYDONRSGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[atul030702]

Got it, Thank You very much

[Murugan2207]

No Worries

[Anjali-Khatik]

I am getting the error in episode 7 only. Below are the errors
Error1: React Router caught the following error during render
Error2: TypeError: Cannot destructure property 'name' of '(intermediate value)' as it is undefined.

Please help me to solve the error. Actually I have check all the solution.
Here is the code:
import { useState,useEffect } from "react";
import { useParams } from "react-router";
import { MENU_API } from "../utils/constant";
import Shimmer from "./Shimmer";

const RestaurantMenu = () => {
const [resInfo,setResInfo] = useState(null);
const {resId} = useParams();
useEffect(() => {
console.log("RestaurantMenu Component Mounted");
fetchMenu();
}, []);

const fetchMenu = async () => {
    const data = await fetch(MENU_API+resId);
    const jsonData = await data.json();
    setResInfo(jsonData?.data);
    // console.log(jsonData);
};

if (resInfo === null) return <Shimmer/>;

const {name,cuisines,costForTwoMessage} = 
    resInfo?.cards[2]?.card?.card?.info;
const {itemCards} = 
    resInfo?.cards[4]?.groupedCard?.cardGroupMap?.REGULAR?.cards[2]?.card?.card;
console.log(itemCards);
return (
    <div className="menu">
        <h1>{name} </h1>
        <h3>{cuisines.join(" , ")} - {costForTwoMessage}</h3>
        <h2>Menu</h2>
        <ul>
            {itemCards.map((item)=> (
                <li key={item?.card?.info?.id}>{item?.card?.info?.name}</li>
            ))}
        </ul>
    </div>
);

};

export default RestaurantMenu;

[atul030702]

@Anjali-Khatik

I think I was having the same issue in that episode too.

The problem was with the api response because the response format has changed. I'm not showing menu data in my code because it is unpredictable meaning the cards array is changing for every restaurant menu list.

[Anjali-Khatik]

Okay. Means I have to remove the menu list?