Do anyone external react-router-dom-v5-compat

[Mikawawawa]

Hi teams,

I've been using [email protected] in an online project. However, I recently encountered a requirement that relies on router guards. Since useBlocker after version 6.4 is currently unstable, I've decided to transition to react-router-dom-v5-compat and utilize react-router@5's Prompt feature.

I'm facing challenges in achieving this goal. I've set up React Router as an external dependency because my project is composed of several parts, and the basic dependencies are shared from a 'vendor.js' file. This 'vendor.js' is created using MergeIntoSingleFilePlugin. The issue arises because react-router-dom-v5-compat depends on react-router@6, but the v5 version is included in the vendor file. I'm unsure about how react-router-dom-v5-compat operates, it seems to share the same history from react-router-dom@5 and inject it into its dependencies from react-router@v6. So, if I do not externalize them, there may be two standalone react-router instances with different versions inside the package. The only communication between them is that they share the same history instance?

I guess I should package the vendor.js in another way. Should I bundle react-router@5, react-router@6, react-router-dom-v5-compat@6, react-router-dom@5 together? But I don't know which solution I should use to make it happen.

Here's my code snippet of my MergeIntoSingleFilePlugin and external config

new MergeIntoSingleFilePlugin({
  files: {
    'js/vendor.js': isDev
      ? [
          '../../node_modules/react/umd/react.development.js',
          '../../node_modules/react-dom/umd/react-dom.development.js',
          './node_modules/history/umd/history.development.js',
          './node_modules/react-router/umd/react-router.js',
          './node_modules/react-router-dom/umd/react-router-dom.js',
          './node_modules/react-redux/dist/react-redux.js',
          './node_modules/resize-observer-polyfill/dist/ResizeObserver.global.js',
          './node_modules/react-router-dom-v5-compat/dist/umd/react-router-dom-v5-compat.development.js',
        ]
      : [
          '../../node_modules/react/umd/react.production.min.js',
          '../../node_modules/react-dom/umd/react-dom.production.min.js',
          './node_modules/history/umd/history.production.min.js',
          './node_modules/react-router/umd/react-router.min.js',
          './node_modules/react-router-dom/umd/react-router-dom.min.js',
          './node_modules/react-redux/dist/react-redux.min.js',
          './node_modules/resize-observer-polyfill/dist/ResizeObserver.global.js',
          './node_modules/react-router-dom-v5-compat/dist/umd/react-router-dom-v5-compat.production.min.js',
        ],
  },
});

// webpack config
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    'react-router-dom': 'ReactRouterDOM',
    'react-router-dom-v5-compat': 'ReactRouterDOMv5Compat',
    'react-redux': 'ReactRedux',
  },

[Mikawawawa]

For example, I will get this error as the compatibility package import v5 version of react-router, but the v6 version is actually required

[Mikawawawa]

Will, I find a solution just now, though it may be a bit hack. I patches the react-router-v5-dom-compat with this changes by pnpm

1. Copy React-Router@6's UMD dist into react-router-v5-dom-compat's umd dist
2. Changes React-Router's definition name from ReactRouter to ReactRouterV6

Add files

Rename import defination

Rename