4

Basically everything works fine in Chrome and Firefox but on IE after clicking Link element only URL is changing, not the view. I know about Update Blocking issue in react-router, but I think it's not the case - as I sad, it failure only on IE.

This is my stack (MERN Starter) :

"react": "^15.1.0",
"react-bootstrap": "^0.31.0",
"react-dom": "^15.1.0",
"react-helmet": "^3.1.0",
"react-intl": "^2.1.2",
"react-redux": "^4.4.5",
"react-router": "2.8.0",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0",

App.js <- root element (/client/App.js)

export default function App(props) {
  return (
    <Provider store={props.store}>
      <IntlWrapper>
        <Router history={browserHistory}>
          {routes}
        </Router>
      </IntlWrapper>
    </Provider>
  );
}

Routes.js

<Route path="/" component={App}> // <- it's pointing to app.js pasted below
    <IndexRoute
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./modules/Main/pages/Main/Main').default);
        });
      }}
    />
    <Route
      path="posts"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./modules/Post/pages/PostListPage/PostListPage').default);
        });
      }}
    />
    <Route
      path="posts/:slug-:cuid"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./modules/Post/pages/PostDetailPage/PostDetailPage').default);
        });
      }}
    />
    <Route
      path="screenBuilder"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./modules/ScreenBuilder/pages/ScreenBuilderPage/ScreenBuilderPage').default);
        });
      }}
    />
  </Route>

Again App.js (client/modules/App/App.js) but this time it is "contener" element for modules pointed by routes:

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isMounted: false };
  }

  componentDidMount() {
    this.setState({isMounted: true}); // eslint-disable-line
  }

  toggleAddPostSection = () => {
    this.props.dispatch(toggleAddPost());
  };

  render() {
    return (
      <div>
        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
        <div>
          // <Helmet/>
          <Header
            switchLanguage={lang => 
            this.props.dispatch(switchLanguage(lang))}
            intl={this.props.intl}
            toggleAddPost={this.toggleAddPostSection}
          />
          <div className={styles.container}>
            {this.props.children}
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default withRouter(connect(mapStateToProps)(App));

Example of Link element:

<Link to="/posts" >Posts List</Link>

I'm stuck with that since yesterday and at the moment I don't have idea how to fix that. There is no feedback in IE console, also no request is going out... clicking on the link does nothing besides changing URL.

Any help would be appreciated!

Kamil Spisak
  • 163
  • 1
  • 11

1 Answers1

2

Include babel-polyfill.

For Webpack, add it to the entry config:

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

You can also import it at the top of other files: import "babel-polyfill", but make sure it's included first.

Mark Rabey
  • 1,375
  • 9
  • 11