React: error when integrate component without JSX

Question

I'm newby in React JS and I trying to integrate the component https://github.com/AndrewRedican/react-json-editor-ajrm/ in my App without using JSX.

The project not use import syntax like import Component from library but use the the syntax like const Component = require(library)`.

There is the snippet where the component is integrated:

  makeMessageElement() {
    const textFieldOptions = {
      width: '100%',
      placeholder: 'Enter message',
      value: this.state.message,
      onChange: (event, value) => {
        this.setState({
          message: value
        })
      }
    }
 
    return React.createElement(JSONInput, textFieldOptions, null)
  }

When I trying const JSONInput = require('react-json-editor-ajrm'), I get the message :

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

When I trying const {JSONInput} = require('react-json-editor-ajrm'), I get the same message.

When I trying import JSONInput from "react-json-editor-ajrm";, I get the message :

Uncaught Component.js:8
import JSONInput from "react-json-editor-ajrm";
SyntaxError: Unexpected identifier

So, what is the right way to import the library please ?

Answer 1

Just try the require(path).default:

const JSONInput = require('react-json-editor-ajrm').default

and for more details

Answer 2

Did you try this :

import * as JSONInput from "react-json-editor-ajrm";

or

import { JSONInput } from "react-json-editor-ajrm";

If it doesn't work, just tell me and we'll look more into this together :)

Edit for the require :

const JSONInput = require('react-json-editor-ajrm').default