CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
B4BIPIN
B4BIPIN

Reputation: 353

Material Ui code is working perfectly in codepen but not in VSCODE?

I am using Material-UI to create "Material Tabs" in my ReactJS project, this code is working properly in SANDBOX, but not in my VS CODE. What should I do?

I checked Node to be installed, checked and install all dependencies versions from NPM. I also checked it out. check it, but I couldn't understand it.

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { makeStyles } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
function TabContainer({ children, dir }) {
  return (
    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
      {children}
    </Typography>
  );
}
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

class Feature extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  handleChange() {
    this.state.value === 0
      ? this.setState({ value: 1 })
      : this.setState({ value: 0 });
  }
  render() {
    const classes = this.props;
    const theme = this.props;
    return (
      <div className={classes.root}>
        <Tabs
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
          indicatorColor="primary"
          textColor="primary"
        >
          <Tab label="A" />
          <Tab label="B" />
        </Tabs>
        <SwipeableViews
          axis={theme.direction === "rtl" ? "x-reverse" : "x"}
          index={this.state.value}
        >
          <TabContainer dir={theme.direction}>Item One</TabContainer>
          <TabContainer dir={theme.direction}>Item Two</TabContainer>
        </SwipeableViews>
      </div>
    );
  }
}
Feature.propTypes = {
  classes: PropTypes.object.isRequired
};
export default withStyles(useStyles)(Feature);

And my package.json looks like

  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/styles": "^4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-slick": "^0.23.2",
    "react-swipeable-views": "^0.13.3",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  }

I expect the output as given by SANDBOX, but got this error instead

TypeError: Object(...) is not a function
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

in above code.

Upvotes: 0

Views: 712

Answers (1)

HRK44
HRK44

Reputation: 2782

In your sandbox you are using @material-ui/core latest version (which currently is 4.0.1) and in your VS Code package.json it's version 3.9.2. I'm pretty sure that's the issue, try both with the exact same version instead of using latest.

See here : https://codesandbox.io/embed/material-demo-1j37n

Upvotes: 1

Related Questions