Uncaught Invariant Violation: 4.3.1 -> 5.0.1 w/ monorepo use of shared components

[crobinson42]

New bug when upgrading from 4.3.1 -> 5.0.1

Version

5.0.1

Steps to reproduce

Using a monorepo or npm link for local development with a shared components package that contains a component which imports react-router-dom and contains a NavLink the application breaks with Error: Invariant failed: You should not use <NavLink> outside a <Router>.

I've proved this by moving the shared components package into the node_modules of the project using the shared components and all works fine.

Expected Behavior

I should be able to npm link a local package that contains components that import their own react-router-dom to use NavLink without any issues.

Actual Behavior

Error: Invariant failed: You should not use <NavLink> outside a <Router>

Note: rolling back to 4.3.1 resolves this issue.

[timdorr]

This is a symptom of what I want to solve with #6755.

Unfortunately, this isn't actually a bug with this library. You have two copies of react-router, one from the host project and one from the guest project. AFAIK, there isn't a way to resolve this when using a link. This is a "bug" of npm, essentially.

[crobinson42]

Isn’t this related to not having the same context due to importing from different packages?

[timdorr]

Yes, the context pair has to be the exact same instance.

[Richacinas]

I solved this issue using a Webpack alias in your client App. That way, when your shared packages library imports anything from react-router-dom, it will get the same instance as your client App.

Like this:

const config = {
  ...
  ...
  resolve: {
    modules: ['src', 'node_modules'],
    extensions: ['.json', '.js', '.jsx'],
    alias: {
      'react-router-dom': path.join(PROJECT_ROOT_DIR_CONST, 'node_modules/react-router-dom/')
    },
  }
  ...

[SampsonCrowley]

You're basically saying no one can create a library that includes the Link component from react-router-dom without a lot of extra effort and aliases.

I thought 5.x was supposed to be fully 4.x compatible, and the only reason for the major version bump was so you could start pinning versions

[SampsonCrowley]

Webpack Externals is probably the correct answer here for library creators. I will report back with my results

webpack.config.js:

module.exports = {
  ...
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
    'react-router-dom': 'react-router-dom',
    'react-router': 'react-router',
  },
  ...
}

[SampsonCrowley]

^ it worked. If you are publishing a library with rrd involved, make sure it is exported as an external in webpack