reactjs
react-modal: "Warning: React.createElement: type is invalid"
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.
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`.
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.
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?
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;
