acdlite / redux-router

Redux bindings for React Router – keep your router state inside your Redux store
MIT License
2.3k stars 216 forks source link

"Uncaught ReferenceError: _classCallCheck is not defined" when using dynamic react routes #212

Closed sergesemashko closed 8 years ago

sergesemashko commented 8 years ago

Greetings,

I have "Uncaught ReferenceError: _classCallCheck is not defined" when using dynamic routing with react-redux-universal-hot-example. Here is the branch with dynamic react routes, so you can reproduce the issue locally.

Case 1:

  1. Open http://localhost:3000
  2. Go to page that is defined via dynamic route (/about, /widgets or /survey)
  3. Everything works as expected when initial page is not coming from dynamic route, no errors

Case 2:

  1. Open page that is defined via dynamic route (/about, /widgets or /survey)
  2. Reload the page in browser
  3. Notice "Uncaught ReferenceError: _classCallCheck is not defined" in console
  4. As a result any click on <Link /> element does full page refresh instead of pushing state to History API

Error occurs in hydrated state on client:

// hydrated state passed from server
window.__data={"router":{"routes":[{"path":"\u002F","component":function ConnectData() {
        _classCallCheck(this, _ConnectData);

        _Component.apply(this, arguments);
      },"indexRoute":{"component":function Home() {
    _classCallCheck(this, _Home);

    _Component.apply(this, arguments);
  }},"getChildRoutes":function getChildRoutes(location, cb) {
      require.ensure([], function (require) {
        cb(null, [{
          onEnter: requireLogin,
          childRoutes: [{
            path: 'chat',
            component: _containers.Chat
          }, {
            path: 'loginSuccess',
            component: _containers.LoginSuccess
          }]
        }, require('./AboutRoute'), require('./LoginRoute'), require('./SurveyRoute'), require('./WidgetsRoute'), {
          path: '*',
          component: _containers.NotFound,
          status: 404
        }]);
      });
    }},{"path":"survey","component":function Connect(props, context) {
        _classCallCheck(this, Connect);

        _Component.call(this, props, context);
        this.version = version;
        this.store = props.store || context.store;

        _invariant2['default'](this.store, 'Could not find "store" in either the context or ' + ('props of "' + this.constructor.displayName + '". ') + 'Either wrap the root component in a <Provider>, ' + ('or explicitly pass "store" as a prop to "' + this.constructor.displayName + '".'));

        this.stateProps = computeStateProps(this.store, props);
        this.dispatchProps = computeDispatchProps(this.store, props);
        this.state = { storeState: null };
        this.updateState();
      }}],"params":{},"location":{"pathname":"\u002Fsurvey","search":"","hash":"","state":null,"action":"POP","key":"rujfcr","query":{}},"components":[function ConnectData() {
        _classCallCheck(this, _ConnectData); // !!! error is thrown here

        _Component.apply(this, arguments);
      },function Connect(props, context) {
        _classCallCheck(this, Connect);

        _Component.call(this, props, context);
        this.version = version;
        this.store = props.store || context.store;

        _invariant2['default'](this.store, 'Could not find "store" in either the context or ' + ('props of "' + this.constructor.displayName + '". ') + 'Either wrap the root component in a <Provider>, ' + ('or explicitly pass "store" as a prop to "' + this.constructor.displayName + '".'));

        this.stateProps = computeStateProps(this.store, props);
        this.dispatchProps = computeDispatchProps(this.store, props);
        this.state = { storeState: null };
        this.updateState();
      }]},"auth":{"loaded":true,"loading":false,"user":null},"form":{},"multireducer":{"counter1":{"count":0},"counter2":{"count":0},"counter3":{"count":0}},"info":{"loaded":true,"loading":false,"data":{"message":"This came from the api server","time":1449774138363}},"widgets":{"loaded":false,"editing":{},"saveError":{}}};

This issue might be related to https://github.com/rackt/redux-router/issues/57, but not 100% sure.

Are there any possible workarounds to make dynamic routing working?

Thanks

Scarysize commented 8 years ago

Might this fix your problem: 3a0bce45d8ab82457ce966307c68a30994fe1445 ? I can pull from master, we still have some work to do before the next publish to npmjs

Scarysize commented 8 years ago

let me know if this is still a issues.