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 ?

I get the same message than import JSONInput from "react-json-editor-ajrm"; — clem
– clem, Commented Dec 7, 2020 at 14:58

Ibrahim Haouari · Accepted Answer · 2020-12-07 16:00:46Z

1

Just try the require(path).default:

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

and for more details

answered Dec 7, 2020 at 16:00

Ibrahim Haouari

2503 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Astoo · Accepted Answer · 2020-12-07 15:52:02Z

1

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

edited Dec 7, 2020 at 15:52

answered Dec 7, 2020 at 14:40

Astoo

111 silver badge2 bronze badges

2 Comments

clem Over a year ago

I have the following message: import * as JSONInput from "react-json-editor-ajrm"; SyntaxError: Unexpected token *. I think that the project is not configured to use syntax import .... (e.g. Webpack). But I would'nt reconfigure the project just to import this comporent and use component. If there is another way...

Astoo Over a year ago

Oh sry, did not see your answer. Try this maybe : const JSONInput = require('react-json-editor-ajrm').default

Collectives™ on Stack Overflow

React: error when integrate component without JSX

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related