React-router: Error: Invariant failed, when react-router v5 export as webpack libraryTarget commonjs

[8427003]

to implement ssr. at server side, i wan't use webpack. so i export react router as library and import it at server side。

Version

v5.0.1

Test Case

Steps to reproduce

// App.js export as webpack libraryTarget commonjs 

const React = require('react');
const { StaticRouter,  Route } = require('react-router')
const ReactDOMServer = require("react-dom/server");

module.exports = function App() {
    return (
        <div>
            <Route path="/" component={() => 'hello456'}/>
            <Route path="/123" component={() => 'hello123'}/>
        </div>
    )
}

//webpack config
  ...
  output: {
        library: 'xxx',
        libraryTarget: 'commonjs',
    },

ssr.js

const React = require('react');
const r = React;
const ReactDOMServer = require("react-dom/server");
const xx =  require('react-router');

const StaticRouter = xx.StaticRouter;

const App =  require('../dist/static/js/main.615930d8.js').xxx;
console.log(App.toString(), 111);

//function App(){
    //return r.createElement("div",null,r.createElement(route,{path:"/",component:function(){return"hello456"}}),r.createElement(route,{path:"/123",component:function(){return"hello123"}}))}

const context = {};
const html = ReactDOMServer.renderToString(
    React.createElement(StaticRouter, {
        location: '/',
        context,
    }, React.createElement(App))
);

console.log(html);

run ssr.js

/Users/lijun/git/ty-h5/node_modules/react-dom/cjs/react-dom-server.node.development.js:3166
            throw err;
            ^

Error: Invariant failed
    at S (/Users/lijun/git/ty-h5/dist/static/js/main.615930d8.js:30:21892)
    at Object.children (/Users/lijun/git/ty-h5/dist/static/js/main.615930d8.js:30:29101)
    at ReactDOMServerRenderer.render (/Users/lijun/git/ty-h5/node_modules/react-dom/cjs/react-dom-server.node.development.js:3412:55)
    at ReactDOMServerRenderer.read (/Users/lijun/git/ty-h5/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at Object.renderToString (/Users/lijun/git/ty-h5/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at Object.<anonymous> (/Users/lijun/git/ty-h5/src/test.js:15:29)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

Expected Behavior

console hello456

Actual Behavior

v4.3.1 work fine, but v5.0.1 not working

[timdorr]

This doesn't have anything to do with React Router.

[8427003]

This doesn't have anything to do with React Router.

two version have diff result, you say nothing with React Router.

[StringEpsilon]

@8427003 You have a repository ready for reproduction, I could take a look. I might be slow to respond though.

@timdorr I agree with 8427003. Given the info we have here, this smells like RR is at fault. It might not be a bug, but I think you close this prematurely.

[timdorr]

This is the problem:

const xx =  require('react-router');
const StaticRouter = xx.StaticRouter;
const App =  require('../dist/static/js/main.615930d8.js').xxx;

You're pulling in react-router directly, but pulling in your App from what appears to be a built asset. That's likely giving you two different instances of React Router's Context. This is a common issue, but not a bug with the library.

You need to point to the exact same copy of react-router. I'm not sure how best to do that in your setup, but that's what you need to do.