I started building an react app using the new v5 alpha material-ui
According to their documentation 'The data grid components are supporting v5 and v4'.
So I installed the X-grid and when I import the X-grid I get this error:
./node_modules/#material-ui/x-grid/dist/index-esm.js
Module not found: Can't resolve '#material-ui/styles' in 'C:\Users\remusp\Desktop\React\material\node_modules#material-ui\x-grid\dist'
Does anyone know how to make this work together?
so you can install material/styles
npm install #material-ui/styles
sometimes the packages comes splited, so if you will use all material-ui install all lib
Related
I am trying to use Gatsby with MUI and Styled-Components. However I get the following error message: ModuleNotFoundError: Module not found: Error: Can't resolve '#emotion/react' that is unusual because the docs say that styled-components can be used exclusively as the styling solution.
Steps to reproduce:
run gatsby new selecting defaults and styled-components as styling system
run npm install --save #mui/material #mui/styled-engine-sc styled-components from the mui install instructions for styled-components
add import Button from "#mui/material/Button"; to the imports and <Button variant="contained">Hello World</Button> in the main div of the index.js file. From the docs.
try gatsby develop but it will fail with ModuleNotFoundError: Module not found: Error: Can't resolve '#emotion/react' this is the problem.
What I tried:
I tried npm i --save #emotion/react #emotion/styled and the button renders but i'm not sure if it renders with styled-components or emotion, probably emotion.
I tried to alias #mui/styled-engine to #mui/styled-engine-sc the wrapper around styled-components as described here in the mui docs and here in the Gatsby docs but I don't think that's related to my problem because if anything i would need to alias #emotion/styled to some other package.
I looked at Gatsby theme materialui but that mentions SSR and the docs says SSR doesn't work with styled-components and npm here. Do I have to use Yarn?
Related SO Questions:
material-ui-v5-not-working-styled-components-and-typescript
using-material-ui-theming-with-styled-component
Other related links:
this Github example uses gatsby-theme-material-ui but i think that uses SSR which is broken with npm and styled-components.
Best solution I found so far is to not use styled-components and rather use emotion and the styled() option from #mui/styled as described here.
I am trying to integrate React-bootstrap into my SPFX project. I use the following versions.
React: 16.13.1
react-bootstrap: 2.4.0
SPFx: 1.14
When I try to import any react-bootstrap module into my tsx file, something like:
import Alert from 'react-bootstrap/Alert';
I get the error Cannot find module 'react/jsx-runtime'
Many forums tell me to upgrade my react version, but I cannot do so in my case, as latest version of SPFX (1.14) supports React 16.13.1, and not higher version.
Any solution to overcome the above issue would be very helpful
enter image description here
I was working on the "#material-ui/core": "^4.12.3" version, and now the version is changed. I am looking the way for :
import { GridOverlay, DataGrid } from '#mui/x-data-grid';
But it is not working.
can anyone help me in setting up both the version and documentation for the older version so that I go with both version in my application.
TL;DR
Step 1.
// with npm
npm install #mui/material #emotion/react #emotion/styled
// with yarn
yarn add #mui/material #emotion/react #emotion/styled
Step 2.
// with npm
npm install #mui/x-data-grid
// with yarn
yarn add #mui/x-data-grid
Step 3.
import { DataGrid } from '#mui/x-data-grid'
Long Text
Our company also encountered the same problem when migrating, and finally solved it perfectly.
The reason for the above error is because #mui/x-data-grid is dependent on MUI v5, so you have to install it, or you can be used with MUI v4 with some additional steps.
This is a reference guide for upgrading your site from MUI X v4 to v5. MUI X v5 is fully compatible with MUI Core (includes Material UI) v5 and can be used with MUI Core v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the grid.
Refer to MUI doc
You may be wondering, but what should I do if I use mui v4 now?
According to our actual experience and the information provided by the official Material, it is no problem to have the v4 package and the v5 package at the same time, so you can install the MUI v5 first and let #mui/ x-data-grid can be used, waiting for the spare time to migrate the v4 components to the v5 usage.
We strongly recommend you migrate MUI Core to v5 when using MUI X v5. However, this might not be possible, depending on the complexity of the application. The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside.
Refer to MUI doc
Module not found: Can't resolve '#mui/x-data-grid'
Means you don't have this module installed
If you find this error for any other modules meaning is the same you have to install that specific module
npm install #mui/x-data-grid
npm i #mui/x-data-grid install this one first
Even if you have installed the dependency #mui/x-data-grid VS Code may nag you with this error, the solution is to restart the VS Code.
After having installed my material-ui for my react project, but when it comes to use it always bring up an error telling me that
'Module not found'
./src/Components/LatestPost.jsModule not found: Can't resolve#material-ui/lab/Skeleton' in 'C:\Users\Zinox\super-surf\src\Components'
You would have only installed #material-ui/core package which would not include the experimental features you are looking for and hence you are getting the error Module not found: Can't resolve '#material-ui/lab/Skeleton'
To use experimental features of Material UI like Skeleton, Rating, Speed Dial and so on you need to also install the Material UI Lab package,
npm install #material-ui/lab
Note that this is needed in addition to the #material-ui/core package that you installed earlier with npm install #material-ui/core
After installing the above package you could import it as,
import Skeleton from '#material-ui/lab/Skeleton';
in your React Component and use it as desired.
you should add two packages into the app first is
yAR i #material-ui/lab #material-ui/core
Stumbled upon the same issue. Skeleton doesn't seem to be contained in the latest package version (4.0.0-alpha.22) at the moment. But it is on their source folder, which is odd.
Maybe you open an issue at their GitHub.
EDIT:
I did: https://github.com/mui-org/material-ui/issues/16919
Module not found: Can't resolve '#material-ui/lab/Skeleton'
If you want to use Skeleton, Rating, Speed Dial, and so on you need to also install the Material UI Lab package.
npm install #material-ui/lab
or
yarn add #material-ui/lab
Link here.
enter link description here
Is it possible to use Material UI v1 with TypeScript?
I installed it to project using npm install material-ui#next --save and got a lot of error messages like
"TS2694: Namespace 'React' has no exported member
'TableHTMLAttributes'."
Probably, it is a problem with data types. Is there any solution?