React-popper: 'react-popper' does not contain an export named 'Target'.

[soroushm]

some things break

"_id": "[email protected]",

import React, {Component} from "react";
import MenuIcon from "material-ui-icons/Menu";
import Language from "material-ui-icons/Language";
import classNames from "classnames";
import PropTypes from "prop-types";
import { Manager, Target, Popper } from 'react-popper';
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import {
    MenuItem,
    MenuList,
    Paper,
    Portal,
    Button,
    IconButton,
    Typography,
    Toolbar,
    AppBar

} from "@material-ui/core";
import Collapse from '@material-ui/core/Collapse';
import Tabs, {Tab} from "@material-ui/core/Tabs";
import {Route} from "react-router-dom";
import i18n from "../../i18n";


class Header extends Component {
    state = {
        langOpen: false,
        selectedTab: 0
    };

    handleLangToggle = () =>{
        this.setState({langOpen: !this.state.langOpen});
    };

    handleClose = () =>{
        this.setState({langOpen: false});
    };
    handleTabChange = (event, selectedTab) =>{
        this.setState({selectedTab});
        console.log(selectedTab)
    };

    // render
    render(){
        const {t, classes, drawer, open, title} = this.props;
        const {langOpen, selectedTab} = this.state;
        const toggleLang = (lang) =>{
            i18n.changeLanguage(lang,
                window.location.reload()
            )
        }

        const titleEl = title ? (
            <Typography variant="title" color="inherit" noWrap>
                {this.props.title}
            </Typography>
        ) : null;

        return (

            <AppBar
                className={classNames(classes.appBar, open && classes.appBarShift)}
                position="sticky"
            >
            <IconButton
                color="contrast"
                className={classes.buttonInline}
                onClick={this.handleLangToggle}
            >
                <Language/>
            </IconButton>
                <Popper
                    placement="bottom"
                    eventsEnabled={langOpen}
                    className={classNames({[classes.popperClose]: !langOpen})}
                >
                    <ClickAwayListener onClickAway={this.handleClose}>
                        <Collapse in={langOpen} id="menu-list-collapse" style={{transformOrigin: '0 0 0'}}>
                            <Paper style={{margin: 3}}>
                                <MenuList role="menu">
                                    <MenuItem onClick={()=>{
                                        this.handleClose();
                                        toggleLang('fa');
                                    }}>
                                        {t('fa')}
                                    </MenuItem>
                                    <MenuItem onClick={()=>{
                                        this.handleClose();
                                        toggleLang('en');
                                    }}>
                                        {t('en')}
                                    </MenuItem>
                                </MenuList>
                            </Paper>
                        </Collapse>
                    </ClickAwayListener>
                </Popper>
            </AppBar>
        )
        return (
            <AppBar
                className={classNames(classes.appBar, open && classes.appBarShift)}
                position="sticky"
            >
                <Toolbar disableGutters>
                    <IconButton
                        color="contrast"
                        aria-label="open drawer"
                        onClick={drawer}
                        className={classNames(classes.buttonInline, open && classes.hide)}
                    >
                        <MenuIcon/>
                    </IconButton>
                    <Manager>
                        <Target>
                            <IconButton
                                color="contrast"
                                className={classes.buttonInline}
                                onClick={this.handleLangToggle}
                            >
                                <Language/>
                            </IconButton>
                        </Target>
                        <Portal>
                            <Popper
                                placement="bottom"
                                eventsEnabled={langOpen}
                                className={classNames({[classes.popperClose]: !langOpen})}
                            >
                                <ClickAwayListener onClickAway={this.handleClose}>

                                        <Paper style={{margin: 3}}>
                                            <MenuList role="menu">
                                                <MenuItem onClick={()=>{
                                                    this.handleClose();
                                                    toggleLang('fa');
                                                }}>
                                                    {t('fa')}
                                                </MenuItem>
                                                <MenuItem onClick={()=>{
                                                    this.handleClose();
                                                    toggleLang('en');
                                                }}>
                                                    {t('en')}
                                                </MenuItem>
                                            </MenuList>
                                        </Paper>

                                </ClickAwayListener>
                            </Popper>
                        </Portal>
                    </Manager>
                    {titleEl}


                    <div className={classes.flexGrow}/>
                    <Button color="contrast">{t('Login')}</Button>
                </Toolbar>
                <Route render={({history}) => (
                    <Tabs
                        value={selectedTab}
                        onChange={this.handleTabChange}
                        indicatorColor="primary"
                        textColor="primary"
                        centered
                      classes={{
                          root: classes.appBarSub
                      }}
                    >
                        <Tab label={t('Service Providers')}
                             classes={{
                                 root: classes.appBarTabs
                             }}
                             onClick={()=>{
                            history.push('/serviceProviders')
                        }}/>
                        <Tab label={t('Projects')}
                             classes={{
                                 root: classes.appBarTabs
                             }}
                             onClick={()=>{
                            history.push('/projects')
                        }}/>
                        <Tab label={t('People')}
                             classes={{
                                 root: classes.appBarTabs
                             }}
                             onClick={()=>{
                            history.push('/people')
                        }}/>
                        <Tab label={t('Questions')}
                             classes={{
                                 root: classes.appBarTabs
                             }}
                             onClick={()=>{
                            history.push('/question')
                        }}/>
                    </Tabs>
                )}/>
            </AppBar>


        )
    }
}

Header.propTypes = {
    classes: PropTypes.object.isRequired,
    t: PropTypes.func.isRequired,
    drawer: PropTypes.func.isRequired,
};


export default Header;

[TrySound]

It exports as I can see. Show your config please.
https://unpkg.com/[email protected]/dist/cjs/react-popper.js

[soroushm]

Please Close Issue
//import Tabs, {Tab} from "@material-ui/core/Tabs";

Tab component was changed in material ui and break the code

[TrySound]

@soroushm There is a close button on your side.

[cyberwombat]

I have same issue and there is nothing named Target anywhere in the 1.0.2 package except in changelog.

[TrySound]

@cyberwombat And what changelog said about it?

[cyberwombat]

Latest entry in changelog says:

Change Target, Popper, and Arrow component's tag prop to component to allow custom components to be passed in.

Not sure what that means and how that means that Target is gone. I don't see a reference to "Target" on the online https://github.com/souporserious/react-popper/releases

[TrySound]

Seems like changelog is not full. Target is renamed to Reference.

[hanzlahabib]

Seems like changelog is not full. Target is renamed to Reference.

Thankyew That Works