Invariant Violation: Minified React error #200;

Question

We have implemented a new logic for sidebar items' routing, earlier all items were at the same level and now we are implementing hierarchical display, pages can be grouped together into one module and when the user expands the module, he will see the related pages.

For that our JSON structure got changed too and now our routing logic is implemented as below -

 <Switch>
                {
                    loginData.sideBarModules.map((route, index) =>

                        <Route key={index} path={route.redirectUrl} component={() =>
                            <FrontEnd host={route.host} name={route.moduleName} />} />
                    )
                }

Above code is for giving the routing for pages which do not have subpages.

{
                    loginData.moduleList.map((route, index) => (
                        route.innerPages != undefined &&
                        route.innerPages.map((innerRoute, innerIndex) => (

                            <Route key={innerIndex} path={innerRoute.redirectUrl} component={() =>
                                <MicroFrontend host={innerRoute.host} name={innerRoute.moduleName} />} />
                        )
                        )))
                }

Above code is for the routing of modules containing subpages

Below code is irrelevant to the issue

                <Route exact path='/' component={() =>
                    <FrontEnd host='http://localhost:3001' name='Browse' />}
                />
                <Route path='/profile' component={() =>
                    <UserProfile />}
                />
                <Route path='/userpreference' component={() =>
                    <UserPreference getColor={props.getColor} />} />

                <Route component={ErrorPage} />
            </Switch>

After making these changes my application works as expected sometimes but at times, I receive below error -

react-dom.prod-16.8.6.min.js:12 Uncaught Invariant Violation: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I am wondering if the problem is in code why does it work sometimes? But if I remove everything from Switch, my application stop breaking and works completely fine.

this link might help.. github.com/Automattic/liveblog/issues/353 — PALLAMOLLA SAI
@PALLAMOLLASAI - I checked the discussion, it is not helping me out. — Pushpendra Yadav
@PALLAMOLLASAI - Will it be okay for you if I add JSON, file where navigation logic is written, and where routing component will render. — Pushpendra Yadav
Try to remove or comment each route inside switch and after that uncomment or add line by line & check for which route you are getting that error — PALLAMOLLA SAI

Pushpendra Yadav Pushpendra Yadav · Accepted Answer · 2020-05-20T05:11:08

I was able to find the root cause of the problem it was occurring because of several issues. When you get minified errors, best is to use dev env build of React to get a full error stack trace.

Use -

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Invariant Violation: Minified React error #200;

1 Answers