react-swipable-views shows error when used

Question

I'm trying to use react-swipable-views in my react application. I'm getting the following error :- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I've imported it as follows:

import SwipeableViews from "react-swipeable-views";

Usage:


import React, { Component } from 'react';
import './../index.css';
import { 
    Tabs, 
    Tab, 
    Grid, 
    Paper, 
    Typography,
    Box,
    Icon
} from '@material-ui/core';
import PropTypes from 'prop-types';


import A from './components/A/A';
import B from './components/B/B';
import C from './components/C/C';
import D from './components/D/D';
import E from './components/E/E';


import SwipeableViews from "react-swipeable-views";

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
      <Typography
        component="div"
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && <Box p={3}>{children}</Box>}
      </Typography>
    );
  }

  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };

  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

export default class Entities extends Component {

    state = {
        value: 0
    }

    handleChange = (event, newValue) => {
        this.setState({value: newValue});
    }

    handleChangeIndex = index => {
        this.setState({value: index});
    }

    render() {
        const {value} = this.state;

        return(
            <div className="container-info">
                <Grid container>
                    <div className="padding-top-4 padding-left-0">
                        <Paper>
                            <Tabs value={value} onChange={this.handleChange}>
                                <Tab label={<span className="font-bold">A</span>}/>
                                <Tab label={<span className="font-bold">B</span>}/>
                                <Tab label={<span className="font-bold">C</span>}/>
                                <Tab label={<span className="font-bold">D</span>}/>
                                <Tab label={<span className="font-bold">E Types</span>}/>
                            </Tabs>
                        </Paper>
            <SwipeableViews>
                            <TabPanel value={value} index={0}>
                                <A />
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                <B />
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                <C />
                            </TabPanel>
                            <TabPanel value={value} index={3}>
                                <D />
                            </TabPanel>
                            <TabPanel value={value} index={4}>
                                <E />
                            </TabPanel>
            </SwipeableViews>
                    </div>
                </Grid>
            </div>
        );
    }
}

 }

How do I resolve this error?

@DarrenSweeney I'm getting this error when I use Swipeable Views — cyberman123, Jan 22 '20 at 09:15
add your full page code with import export and all code ..... — Prakash Karena, Jan 22 '20 at 09:41

score 4 · Accepted Answer · answered Jan 22 '20 at 10:59

4

Downgrade react-swipeable-views to 0.13.3,using 0.13.3 until 0.13.6 fixes all recent issues.issues

answered Jan 22 '20 at 10:59

Alex

3,941
1
17
24

Please let me know if the solution works, we should report it as an issue – Alex Jan 22 '20 at 12:27
This works. I've accepted your answer. We should report it as an issue. – cyberman123 Jan 24 '20 at 04:00
did not work for me for a express + next + react + material ui stack – kakabali Jan 24 '20 at 16:53

score 0 · Answer 2 · answered Aug 19 '23 at 16:05

0

If you're facing a version issue with React, you can uninstall the original package and can install this one:

react-swipeable-views-react-18-fix (Link below)

https://www.npmjs.com/package/react-swipeable-views-react-18-fix

It will work!

answered Aug 19 '23 at 16:05

aliezaheer

59
1
9

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 21 '23 at 14:04

score -2 · Answer 3 · answered Jan 22 '20 at 09:13

-2

Wrap your elements in the SwipeableViews tag.

<SwipeableViews>

 <TabPanel value={value} index={0}>
    <A />
 </TabPanel>
 <TabPanel value={value} index={1}>
    <B />
 </TabPanel>
</SwipeableViews>

answered Jan 22 '20 at 09:13

Mehrnoosh

879
2
12
27

I'm getting that error when I wrap the elements in the SwipeableViews tag – cyberman123 Jan 22 '20 at 09:14
I've already mentioned the error that I'm getting. I've added the component. Check now. – cyberman123 Jan 22 '20 at 09:22
You're exporting a React element, not a component. Might be... – Mehrnoosh Jan 22 '20 at 09:39

react-swipable-views shows error when used

3 Answers3