MDB on version >4.18 crashes when a second Router is present

Topic: MDB on version >4.18 crashes when a second Router is present

Uriel Chami asked 5 years ago

Expected behavior Having two separate Routers from react-router, I'm expecting them to work perfectly as it did so far until 4.19.0 arrived.

Actual behavior I get "Uncaught Error: Invariant failed: You should not use outside a " When I'm clearly using NavLinks inside the Router (code sample below).

Resources (screenshots, code snippets etc.)

<BrowserRouter>
    <MDBNavbar color="indigo" dark expand="md" fixed="top" className="py-1" scrolling>
        <MDBNavbarBrand href="/">
                            <div className="d-flex justify-content-start">
                                icon
                                </div>
                        </div>
        </MDBNavbarBrand>
        <MDBCollapse
            id="mainNavbarCollapse"
            isOpen={this.state.collapseID}
            navbar>
                <MDBNavbarNav right>
                            <MDBNavItem>
                                <MDBNavLink
                                    onClick={this.closeCollapse("mainNavbarCollapse")}
                                    to={Views.DASHBOARD_VIEW}>
                                    Dashboard
                                </MDBNavLink>
                            </MDBNavItem>
                        </MDBNavbarNav>
                    </MDBCollapse>
                </MDBNavbar>
                {/* {collapseID && overlay} */}
                <main style={{ marginTop: "4rem" }}>
                    {!this.state.initializing &&
                        <Switch>
                            <Route path={Views.DASHBOARD_VIEW} component={DashboardContainer} />
                            .....
                        </Switch>
                    }
                </main>
                <MDBFooter color="indigo">
                    <p className="footer-copyright mb-0 py-3 text-center">
                        &copy; {new Date().getFullYear()} Copyright: <a href="https://www.botbit.io"> BotBit </a>
                    </p>
                </MDBFooter>
            </div>
        </BrowserRouter>

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi,

Thank you for the founded bug!

We know about the problem and We need to test the solution.

The problem is from our dependencies. In version 4.18.0 we didn't import react-router-dom on our dependencies. And in the next version we added react-router-dom from peerDependencies and devDependencies.

The similar problem you can find here.

Best regards.

Uriel Chami commented 5 years ago

Thanks for the fast answer Konrad. Please keep me updated on the issue, we would really like to keep updated our version of MDB.

Uriel Chami commented 5 years ago

Hi Konrad, could you please give me an update on this issue? Was it fixed in recent updates?

Konrad Stępień staff commented 5 years ago

Hi @Uriel Chami,

We need to wait for planned 5.0.0 verion of MDBreact.

Because this update can be problematic for the minor update.

This will probably return to state from version 4.18.0.

This solution is good for you?

Uriel Chami commented 5 years ago

@Konrad StępieńIt depends in how long we should wait for 5.0.0 .You fixed an issue with MDBSelect in mobile (in this post https://mdbootstrap.com/support/react/mdbselect-click-triggering-keyboard-on-mobile/ ) in version 4.19.0 which I cannot update to because of this issue. Can you tell me when is it planned to publish 5.0.0?

Konrad Stępień staff commented 5 years ago

@Uriel Chami, we don't want to wait too long with the update. The main change in 5.0.0 is refactoring MDBSelect and this is planned for the beginning of the next month.

Uriel Chami commented 5 years ago

Hey @Konrad Stępień , can you please update me on this issue? Does 4.23.0 fixes this? If not, when is 5.0.0 coming out?

Konrad Stępień staff commented 5 years ago

5.0.0 will come out at the end of January / beginning of February. This is a very big change and we have to be prepared for as few problems as possible

But for this time you can still use 4.18.0 version. use this link if you want.

"mdbreact": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git#4.18.0",

Add comment

Uriel Chami answered 5 years ago

0 0 Best answer

I'll write a new comment just to sum up this.

In version 4.19.0, you decided to add a dependency that collided with our dependencies for our project. This was called a "minor" change, and not a major, yet, you broke backward compatibility.

MDB React have released 4.19.0, 4.19.1, 4.19.2, 4.20.0, 4.21.0, 4.21.1, 4.22.0, 4.22.1, 4.23.0 since this. That's 9 rounds of updates with fixes for issues that I've reported and we need fixed for our site.

The official answer is to not update, because removing this dependency "can be problematic for a minor update" yet to add the dependency you did it on a minor update.

So now, until February, I'm stuck with bugs that you've already fixed and I have to fix manually (in not ideal ways).

Can you upload an auxiliary version to remedy this? (Like, branching from 4.23.0 and removing the dependency, uploading it as a special version) Why was this dependency added?

Konrad Stępień staff commented 5 years ago

Not quite that way.

We try to fix it. And we know that this "little bug" is not a "little".

We are simply afraid that after subsequent changes, there will be problems on the other hand, from people who have opposite properties to yours. I mark your problem as a priority and we will try to offer you a solution soon.

Can you upload an auxiliary version to remedy this? (Like, branching from 4.23.0 and removing the dependency, uploading it as a special version) Why was this dependency added?

Probably yes, I will pass this solution to my team and we will determine if it can be solved in a similar way.

I do not want to prolong it, so I think that in this release we will propose a solution or fix this error.

Of course, we are sorry about the situation that has arisen.

Uriel Chami commented 5 years ago

Thanks for the honest answer @Konrad Stępień . Any updates on this matters?

Konrad Stępień staff commented 5 years ago

Hi @Uriel Chami,

Work on 5.0 is still ongoing, but I have another solution for you.

We can make for you new package from GitHub.

Can you download this repo: https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design

And then:

Edit package.json file,
Delete package-lock.json file
Edit package.json file for like this: MDBreact package.json file from v.4.18.0 (I mean, move router dom for peerDependencies)
Save file
Run npm i
Run npm run build
Run npm pack
Copy zip file
Paste to your project
Import file
And then you can install modules.

Please try this way and tell me if you have still problem

Uriel Chami commented 5 years ago

Hey Konrad, I have MDB Pro, this is not the Pro version of the Repo, right?

Konrad Stępień staff commented 5 years ago

Hey. Sure, but if you can download the repo from GitLab you can also make the mase process.

Or you can wait for version 5.0 (probably in next release).

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: 4.19.0
Device: All
Browser: Chrome, Firefox, all.
OS: Ubuntu
Provided sample code: No
Provided link: No

Uriel Chami

69Support score
7Questions 3Answers

0Snippets likes 0Snippets