Integrate swagger editor to react 17.0.2

[yulyasystem]

• OS: macOS
• Browser: Firefox, Chrome
• Version: 100.0.1(firefox), 102.0.5005.61(chrome)
• Method of installation: npm
• Swagger-Editor version: 4.2.9

Content & configuration

I'm struggling to integrate swagger-editor into React application with "react": "17.0.2", "react-dom": "17.0.2"

How can we help?

I try to import SwaggerEditor to integrate it into my React app.

import SwaggerEditor, {plugins} from 'swagger-editor';

Instead I receive issue

Could not find a declaration file for module 'swagger-editor'.

After disabling typescript the issue with ace-editor appears:

Uncaught TypeError: o.default.acequire is not a function

Do you have any plans to make React component for swagger editor or any suggestions/ideas for my problem? How can I connect swagger-editor to react 17.0.2?

[satishbkodali]

We are also facing the issue when we tried to run swagger-editor in react application on 17.0.2

Below is the error we got

[nitikornamexbeer]

Need this tooo.

[nitikornamexbeer]

We are also facing the issue when we tried to run swagger-editor in react application on 17.0.2

Below is the error we got

Hope it helps

this may solved the problem if you really need to integrate swagger-editor in your app. In the swagger editor github index.html use swaggerEditorBundle instead of SwaggerEditor

1. So you just change it to SwaggerEditorBundle with "swagger-editor-dist" instead of normal "swagger-editor"
2. With this import to use

It will look like this.

import React from 'react';
import SwaggerEditorBundle from 'swagger-editor-dist/swagger-editor-bundle';
import SwaggerEditorStandalonePreset from 'swagger-editor-dist/swagger-editor-standalone-preset' 
import 'swagger-editor-dist/swagger-editor.css';

class App extends React.Component {

  componentDidMount(){
    window.onload = function() {
      // Build a system
      const editor = SwaggerEditorBundle({
        dom_id: '#swagger-editor',
        layout: 'StandaloneLayout',
        presets: [
          SwaggerEditorStandalonePreset
        ],
        queryConfigEnabled: false,
      })
      window.editor = editor

    }
  }
  render() {
    return <div id='swagger-editor'></div>

  }
}

export default App;

set data to swagger component

https://github.com/swagger-api/swagger-editor/issues/1236#issuecomment-294678339

get Data with

window.localStorage.getItem('swagger-editor-content') swaggerComponent.specSelectors.specStr()

With angular: https://stackoverflow.com/a/57431950/9442224