Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #5608

p4535992 · 2019-09-15T08:27:26Z

Information

OS: CentoOS 7
Browser: chrome, firefox
Version:
Method of installation: dist
Swagger-UI version: 3.23.5 and 3.23.8
Swagger/OpenAPI version: Swagger 2.0

Content & configuration

Swagger-UI configuration options:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    
	<script src="./jquery-external/requirejs/require.js"></script>	
    <script src="./jquery-dist/jquery.js" type="text/javascript"></script>  
    <link rel="stylesheet" type="text/css" href="./swagger-ui-dist/swagger-ui.css" >
    <link rel="icon" type="image/png" href="./swagger-ui-dist/favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./swagger-ui-dist/favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
    
</head>

<body class="swagger-section">
	<div id="header">
	    <div class="swagger-ui-wrap">
	        <a id="logo" href="http://swagger.io">swagger</a>
	        <form id="api_selector">
	            <div class="input"><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
	            <div class="input"><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
	            <div class="input"><a id="explore" href="#" data-sw-translate>Explore</a></div>
	        </form>
	    </div>
	</div>

	<div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
	<div id="swagger-ui-container" class="swagger-ui-wrap"></div>

    <script src="./swagger-ui-dist/swagger-ui-bundle.js"> </script>
    <script src="./swagger-ui-dist/swagger-ui-standalone-preset.js"> </script>

    <script type="text/javascript">

    	window.onload = function() {
            var url = window.location.search.match(/url=([^&]+)/);
            if (url && url.length > 1) {
                url = decodeURIComponent(url[1]);
            } else {
                url = "/cxf/swagger/swagger.json";
            }

            // Pre load translate...
            if(window.SwaggerTranslator) {
                window.SwaggerTranslator.translate();
            }

            window.swaggerUi = new SwaggerUIBundle({
                url: url,
                dom_id: "swagger-ui-container",
                deepLinking: true,                
                presets: [
                  SwaggerUIBundle.presets.apis,
                  SwaggerUIStandalonePreset
                ],
                plugins: [
                  SwaggerUIBundle.plugins.DownloadUrl
                ],
                layout: "StandaloneLayout",
                supportedSubmitMethods: ["get", "post", "put", "delete", "patch"],
                onComplete: function(swaggerApi, swaggerUi){
                    if(typeof initOAuth == "function") {
                        initOAuth({
                            clientId: "your-client-id",
                            clientSecret: "your-client-secret",
                            realm: "your-realms",
                            appName: "your-app-name",
                            scopeSeparator: ","
                        });
                    }

                    if(window.SwaggerTranslator) {
                        window.SwaggerTranslator.translate();
                    }

                    $("pre code").each(function(i, e) {
                        hljs.highlightBlock(e)
                    });

                    addApiKeyAuthorization();
                },
                onFailure: function(data) {
                    log("Unable to Load SwaggerUI");
                },
                docExpansion: "none",
                apisSorter: "alpha",
                showRequestHeaders: false
                
            });

            function addApiKeyAuthorization(){
                var key = encodeURIComponent($("#input_apiKey")[0].value);
                if(key && key.trim() != "") {
                    var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
                    window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
                    log("added key " + key);
                }
            }

            $("#input_apiKey").change(addApiKeyAuthorization);
            window.swaggerUi.load();

            function log() {
                if ("console" in window) {
                    console.log.apply(console, arguments);
                }
            }
        }
    </script>
</body>
</html>

Screenshots

How can we help?

Hi this ticket is related to the ticket
#3955

I'm trying to use this project:
https://github.com/Code-House/karaf-swagger

on a osgi framework, but i can't load with success a SwaggerUI/SwaggerUIBunlde javascript object .

I obviously have forced the html to use the original reosurces of SwaggerUI under the "dist" folder instead (but the are the same) resources under the "webjars" library for maven.

The error i get on the client console i sthe following:

Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37

Any idea way i get this error or a workaround for it?

The text was updated successfully, but these errors were encountered:

shockey · 2019-09-28T05:52:47Z

@p4535992, you're mixing a lot of Swagger UI 2.0 and 30 syntax — for example, SwaggerTranslator is not in 3.0, SwaggerClient.ApiKeyAuthorization is not in 3.0, window.swaggerUi.api.clientAuthorizations.add will no longer work, and window.swaggerUi.load() no longer exists.

I'm not sure what's causing the Invariant Violation, but as a first move I'd recommend making a fresh go at your HTML based on ours in dist/index.html.

josemigallas · 2020-01-13T11:44:17Z

I am getting the exact error, using the bundle version but using the example:

<div id="swagger-ui-container" class="swagger-ui-wrap"></div>

<script type="text/javascript">
  (function () {
    SwaggerUIBundle({
      url: "https://petstore.swagger.io/v2/swagger.json",
      dom_id: 'swagger-ui-container',
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
      ],
      layout: "StandaloneLayout"
    })
  }());
</script>

The error page says the full message is:

_registerComponent(...): Target container is not a DOM element.

But I don't know what DOM element is referring to, since the one I use swagger-ui-container does exist.

josemigallas · 2020-01-14T15:31:20Z

FWIW I found the solution:

- dom_id: "swagger-ui-container",
+ dom_id: "#swagger-ui-container",

OnkelTem · 2022-02-03T14:42:03Z

Thank you @josemigallas. Can't think of a reason which made (CRA?) developers to build their contraptions a way which rendered such a simple mistake so difficult to investigate.

shockey added the type: support label Sep 28, 2019

p4535992 closed this as completed Jan 24, 2020

yeehenchen mentioned this issue May 3, 2022

Got error: Uncaught Invariant Violation: Minified React error #37, possible fix is provided. swaggo/http-swagger#69

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #5608

Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #5608

p4535992 commented Sep 15, 2019 •

edited

Loading

shockey commented Sep 28, 2019

josemigallas commented Jan 13, 2020

josemigallas commented Jan 14, 2020

OnkelTem commented Feb 3, 2022 •

edited

Loading

Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #5608

Swagger UI: Invariant Violation: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 #5608

Comments

p4535992 commented Sep 15, 2019 • edited Loading

Information

Content & configuration

Screenshots

How can we help?

shockey commented Sep 28, 2019

josemigallas commented Jan 13, 2020

josemigallas commented Jan 14, 2020

OnkelTem commented Feb 3, 2022 • edited Loading

p4535992 commented Sep 15, 2019 •

edited

Loading

OnkelTem commented Feb 3, 2022 •

edited

Loading