2

When loading an otherwise correctly working React App in IE 11, with Adobe Analytics in the same page, it gives the error message:

Invariant Violation: You should not use <Switch> outside a <Router>

The error doesn't appear on all other browsers, and ONLY IE 11 is affected. It is also independent of the Router type that I am using.

If I take Adobe Analytics out => it works.

Here is the code that I am using:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Page</title>
        <SCRIPT src="//assets.adobedtm.com/<hash>-staging.js"
        ></SCRIPT>
    </head>
    <body>
        <noscript> You need to enable JavaScript to run this app. </noscript>
        <div id="reactRoot"></div>
    </body>
</html>

Here is the React-Router Section with the polyfills i am Using

require('babel-polyfill');
require('es6-promise').polyfill();

class AppRouter extends Component {
    render() {
        return (
            <Router>
                <ErrorBoundary>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/type/:type/:lang?" component={FormContainer} />
                        <Route path="/success/:type/:lang?" component={SuccessContainer} />
                        <Route path="/error/:code?" component={ErrorContainer} />
                        <Route component={NotFound} />
                    </Switch>
                </ErrorBoundary>
            </Router>
        );
    }
}

My goal is the make it render in IE 11

DerCommodore
  • 88
  • 1
  • 10
  • It might be duplicated with [this thread](https://stackoverflow.com/questions/50584641/invariant-violation-you-should-not-use-switch-outside-a-router), try to wrap the Switch with BrowserRouter or other alternatives like HashRouter, MemoryRouter. This is because BrowserRouter and alternatives are the common low-level interface for all router components and they make use of the HTML 5 history API, and you need this to navigate back and forth between your routes. – Zhi Lv Apr 29 '19 at 05:21
  • Thanks for the comments. Unfortunately is it independent from the Router Type. I'll edit this in the text above. – DerCommodore Apr 29 '19 at 11:30

1 Answers1

0

The problem were the Polyfills.

require('babel-polyfill');
require('es6-promise').polyfill();

We replaced them with

import '@babel/polyfill';
import * as ES6Promises from 'es6-promise';
//other imports here
ES6Promises.polyfill();

and made for certain, that they happen FIRST THING in the entry JS file.

After that it worked in IE 11.

DerCommodore
  • 88
  • 1
  • 10