react-modal: "Warning: React.createElement: type is invalid"

[dragonball9816]

Summary:

I am going to popup a modal.
I am using Visual Studio 2017, typescript 2.8.1 and Google Chrome.
But I have got some errors.

Errors

Warning: React.createElement: 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.

Check the render method of `UserList`.
    in UserList (created by Connect(UserList))
    in Connect(UserList) (created by Route)
    in Route
    in main
    in div
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider
printWarning @ warning.js:33
warning @ warning.js:57
createElementWithValidation @ react.development.js:1296
render @ UserList.tsx:133
finishClassComponent @ react-dom.development.js:8389
updateClassComponent @ react-dom.development.js:8357
beginWork @ react-dom.development.js:8982
performUnitOfWork @ react-dom.development.js:11814
workLoop @ react-dom.development.js:11843
renderRoot @ react-dom.development.js:11874
performWorkOnRoot @ react-dom.development.js:12449
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
interactiveUpdates @ react-dom.development.js:12597
interactiveUpdates @ react-dom.development.js:1958
dispatchInteractiveEvent @ react-dom.development.js:4259

Code:

import * as React from 'react'
import { Link } from 'react-router-dom'
import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
import { Modal } from 'react-modal';
import { ToastContainer, toast } from 'react-toastify';


export interface IUserListProps {
    users: Array<any>
    error: string
    dispatchBlacklistUser: ((userNickname: string) => void)
    dispatchActivateConversation: ((roomGuid: string) => void)
}

export interface IUserListState {
    userNickname: string
    openingAddFriend: boolean
}

export class UserList extends React.Component<IUserListProps, IUserListState> {

    constructor(props) {
        super(props);

        this.state = {
            userNickname: '',
            openingAddFriend: false
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e, data) => {
        if (data.action === 'AddFriend') {
            this.setState({ openingAddFriend: true });
        } else if (data.action === 'SendMessage') {
        } else if (data.action === 'ActivatePrivateMessage') {
            this.props.dispatchActivateConversation("roomGuid");
        } else if (data.action === 'AddBlacklist') {
            if (confirm("blacklist?")) {
                this.props.dispatchBlacklistUser(data.nickname);
            }
        }
    }

    closeAddFriend() {
        this.setState({ openingAddFriend: false });
    }
      
    render() {
        const { openingAddFriend } = this.state;
        return ( 
			<div>
                <div className="chat-userlist-tabcontainer">
                    <Link to="/users">
                        <div className="chat-userlist-tab chat-userlist-all active">
                            <i className="fa fa-users userlist-tab-usericon"></i>
                            <div className="userlist-tab-name">Participants</div>
                        </div>
                    </Link>

                    <Link to="/friends">
                        <div className="chat-userlist-tab chat-userlist-white">
                            <i className="fa fa-user userlist-tab-usericon"></i>
                            <div className="userlist-tab-name">My Friends</div>
                        </div>
                    </Link>
                    <Link to="/blacklist">
                        <div className="chat-userlist-tab chat-userlist-black">
                            <i className="fa fa-ban userlist-tab-usericon"></i>
                            <div className="userlist-tab-name">Blacklist</div>
                        </div>
                    </Link>
                    <div className="clearfix"></div>
                </div>
                <div>
                    {this.props.users.map((item, index) =>
                        <div className="chat-userlist-container" key="{ index }">
                            <ContextMenuTrigger id="userlist-contextmenu">
                                <div>{ item.NickName }</div>
                            </ContextMenuTrigger>

                            <ContextMenu id="userlist-contextmenu">
                                <MenuItem onClick={ this.handleClick } data={{ accountId: item.AccountId, action: 'AddFriend' }}>
                                    <i className='fa fa-user'></i> Add Friend
                                </MenuItem>
                                <MenuItem onClick={ this.handleClick } data={{ accountId: item.AccountId, action: 'SendMessage' }}>
                                    <i className='fa fa-envelope'></i> Send Message
                                </MenuItem>
                                <MenuItem onClick={ this.handleClick } data={{ accountId: item.AccountId, action: 'ActivatePrivateMessage' }}>
                                    <i className='fa fa-comments'></i> Private Message
                                </MenuItem>
                                <MenuItem onClick={ this.handleClick } data={{ accountId: item.AccountId, action: 'AddBlacklist' }}>
                                    <i className='fa fa-ban'></i> Add Blacklist
                                </MenuItem>
                            </ContextMenu>
                        </div>
                    )}
                </div>
                <div>
                    <Modal isOpen="{ this.state.openingAddFriend }" contentLabel="Confirmation" center>
                        <div>Are you sure to add this person to friend list?</div>
                    </Modal>
                </div>
                <ToastContainer />
            </div>
        );
    }
}

Additional notes:

Error occured in <Modal isOpen="{ this.state.openingAddFriend }" contentLabel="Confirmation" center>
If possible, please let me know this bug reason.
Otherwise please let me know the alternative of react-modal.
Thank you.

[diasbruno]

Hi @dragonball9816, you can check if all the imported names are valid (none should be undefined).

If you get a undefined value, you can check if the names exported by a library are exported as default or not. Example:

import { Item }...
// exported like `export class Item {...}`

import Item... 
// exported like `export default class Item {...}` 
// or alias all names through this name `Item.Item`.

[dragonball9816]

My file extension is tsx, not jsx.
These solutions are not working.

import { Item }...
or
import Item... 

But I found other solution.

import ModalCom from 'react-modal/lib/components/Modal.js';
const Modal: any = ModalCom;

Please let me know whether this code is correct.

[diasbruno]

That was just an example of how you could debug it. :)

On your snippet, Modal was probably undefined.

import { Modal } from 'react-modal';

This is a sign that something is wrong when it tries to get the entry point of the module (react-modal/lib/index.js).

On react-modal's package.json, we have the following definitions:

  "main": "./lib/index.js",
  "module": "./lib/index.js",

This solution is ok and you can make a file to avoid duplicate this code until we find a correct fix for this.

What is your pipeline to compile your project?

[wolfcreative]

The solution to the problem is:

import * as Modal from 'react-modal';

[aficiomaquinas]

The solution to the problem is:

import * as Modal from 'react-modal';

That did not work for me, but @dragonball9816 solution worked. I'm using tsx.

import ModalCom from 'react-modal/lib/components/Modal.js';
const Modal: any = ModalCom;