Module not found: Error: Can't resolve '@mui/styles'

[kevintruo1]

Hi all,
I am new to using Mui-datatables and I am currently running into this issue. Any idea if I've done anything wrong or is it a bug?

Current Behavior

Module not found: Error: Can't resolve '@mui/styles'

Steps to Reproduce (for bugs)

1. npx create-react-app test
2. cd test
3. npm install @mui/material @emotion/react @emotion/styled @mui/icons-material --save
4. npm install mui-datatables --save
5. npm start

My App.js:

import React from "react";
import MUIDataTable from "mui-datatables";

function App() {
  const columns = ["Name", "Company", "City", "State"];

  const data = [
    ["Joe James", "Test Corp", "Yonkers", "NY"],
    ["John Walsh", "Test Corp", "Hartford", "CT"],
    ["Bob Herm", "Test Corp", "Tampa", "FL"],
    ["James Houston", "Test Corp", "Dallas", "TX"],
  ];

  const options = {
    filterType: "checkbox",
  };

  return (
    <MUIDataTable
      title={"Employee List"}
      data={data}
      columns={columns}
      options={options}
    />
  );
}

export default App;

Any help would be greatly appreciated!

Your Environment

Tech	Version
Material-UI	5.4.1
MUI-datatables	4.0.0
React	17.0.2
browser	Chrome
etc

[mav2287]

I am having the same issue. Installing "@mui/styles" will get the app to compile, but if you view a data-table it will crash the entire application.

This is what I have for dependencies:

    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "^4.11.2",
    "@mui/material": "^5.4.1",
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.25.0",
    "base-shell": "^2.4.14",
    "fontsource-cinzel": "^4.0.0",
    "fontsource-montserrat": "^4.0.0",
    "mui-datatables": "^4.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.24.6",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.0",
    "redux-thunk": "^2.4.1",
    "typescript": "^4.5.5"

Is there any fix?

[rafa-perroni00]

Try use the same version as the SandBox, https://codesandbox.io/s/muidatatables-custom-toolbar-rvmcj?file=/index.js, 3.4.1, for now to solve the problem

[TracesOfNuts]

I am having the same issue. Installing "@mui/styles" will get the app to compile, but if you view a data-table it will crash the entire application.

This is what I have for dependencies:

    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "^4.11.2",
    "@mui/material": "^5.4.1",
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.25.0",
    "base-shell": "^2.4.14",
    "fontsource-cinzel": "^4.0.0",
    "fontsource-montserrat": "^4.0.0",
    "mui-datatables": "^4.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.24.6",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.0",
    "redux-thunk": "^2.4.1",
    "typescript": "^4.5.5"

Is there any fix?

Having the same problem. Tried installing @mui/styles but the table will not show

[MichaelC753]

Hello, I'm having the same issue I can't compile with webpack.

"dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fontsource/roboto": "^4.5.3",
    "@mui/icons-material": "^5.4.1",
    "@mui/lab": "^5.0.0-alpha.68",
    "@mui/material": "^5.4.1",
    "@mui/x-data-grid": "^5.5.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "convert-svg-react": "^1.0.0-beta.8",
    "history": "^5.2.0",
    "mui-datatables": "^4.0.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-json-view": "^1.21.3",
    "react-router-dom": "6.2.1",
    "react-scripts": "^5.0.0",
    "react-svgmt": "^1.2.0",
    "react-validation": "^3.0.7",
    "validator": "^13.7.0",
    "web-vitals": "^2.1.4"
  },

[mav2287]

Try use the same version as the SandBox, https://codesandbox.io/s/muidatatables-custom-toolbar-rvmcj?file=/index.js, 3.4.1, for now to solve the problem

I tried 3.4.1 and it is working so the bug must have been introduced after that.

[kevintruo1]

Can someone mark it as bug?

[Fullbusters]

it`s bug because of this #1826

you must install also "@mui/styles" when used mui-datatables 4.0.0

[Fullbusters]

@kevintruo hope that this PR will help with your issue #1862

[kevinntruo]

@Fullbusters thank you! Waiting for the PR approval :)

[Fullbusters]

@kevinntruo @mav2287 @MichaelC753 please update mui-datatables to 4.1,0, this error should be resolved

[mav2287]

Just installed 4.1.2 and I can confirm it has fixed my issue.

[kevinntruo]

Same here, 4.1.2 fixed my issue! Thank you @Fullbusters

[Mouma22]

how to install mui styles?
please help as I'm just a Beginner :)

[quyle92]

how to install mui styles? please help as I'm just a Beginner :)

$ npm install @emotion/styled

[Jijo-John]

use npm install @mui/styles --save
adding --save will help you

[sobhansharafi]

use‌‌‌‌ --force at the and:)

use npm install @mui/styles --save adding --save will help you

[slimmwillis]

potattoooo

[kemisstep]

same error