[DataGrid] The DataGrid is not compatible with the new package name of the core repository #2527

alb7h · 2021-09-03T09:00:31Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When you replace the old @material-ui/* with the newer @mui/* packages for the rc versions, the datagrid is breaking.

Could not find dependency: '@material-ui/core' relative to '/node_modules/@mui/x-data-grid/dist/index-esm.js'

Expected behavior 🤔

It should work with the new package names

Steps to reproduce 🕹

Click link https://codesandbox.io/s/vigilant-noyce-xx89p?file=/src/Demo.tsx

or alternatively:

Remove any @material-ui/* packages
Add @mui/* packages
Restart app
💥

Context 🔦

No context, but a simple workaround for now.

You can add this to package.json to alias the new packages to the old

    "@material-ui/core": "npm:@mui/material@5.0.0-rc.0",
    "@material-ui/styles": "npm:@mui/styles@5.0.0-rc.0",

You can also do this via webpack but for some reason, it worked with storybook's webpack but not with nextjs's webpack.

Your environment 🌎

`npx @mui/envinfo`

npx: installed 2 in 3.184s

  System:
    OS: macOS 11.4
  Binaries:
    Node: 14.17.3 - ~/.volta/tools/image/node/14.17.3/bin/node
    Yarn: 3.0.1 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
    npm: 6.14.13 - ~/.volta/tools/image/node/14.17.3/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.1.1

Order ID 💳 (optional)

28357

The text was updated successfully, but these errors were encountered:

Edelf · 2021-09-03T13:08:57Z

Same is happening here:

<dir>/node_modules/@mui/x-data-grid/dist/index-esm.js
Module not found: Can't resolve '@material-ui/core/Badge' in '<dir>\node_modules\@mui\x-data-grid\dist'

flaviendelangle · 2021-09-03T13:55:04Z

The problem with the last version is that x-data-grid depends on @material-ui/core and since the last release of the core, the package is now named @mui/material (see /~https://github.com/siriwatknp/material-ui/blob/release/5.0.0-rc.0/CHANGELOG.md#muimaterial500-rc0)

The next release of the Grid should solve it

Edelf · 2021-09-03T14:12:53Z

Is there any temporary solution to allow @mui/x-data-grid with @mui/core? Or are we forced to keep using the @material-ui beta?

m4theushw · 2021-09-03T14:19:15Z

Is there any temporary solution to allow @mui/x-data-grid with @mui/core? Or are we forced to keep using the @material-ui beta?

Yes, you can add a few aliases to your webpack.config.js or babel.config.js. We use this trick to make the docs work with the RC version.

'@material-ui/core': '../node_modules/@mui/material'
'@material-ui/styles': '../node_modules/@mui/styles'
'@material-ui/icons': '../node_modules/@mui/icons-material'
'@material-ui/lab': '../node_modules/@mui/material'

rart · 2021-09-08T19:41:05Z

@m4theushw is that achievable with CRA without ejecting or using things like cra rewired and such?

stevenkampen · 2021-09-08T19:53:03Z

@rart No I don't believe so.

m4theushw · 2021-09-08T20:45:50Z

@rart @stevenkampen Yes, I managed to make it work with v5 by using /~https://github.com/aze3ma/react-app-rewire-aliases. I didn't have to eject. I used the following aliases:

// config-overrides.js
const rewireAliases = require('react-app-rewire-aliases');
const path = require('path');

module.exports = function override(config, env) {
  config = rewireAliases.aliasesOptions({
    '@material-ui/core': path.resolve(__dirname, './node_modules/@mui/material'),
    '@material-ui/styles': path.resolve(__dirname, './node_modules/@mui/styles'),
  })(config, env);
  return config;
};

rart · 2021-09-08T20:59:26Z

I did yarn add @material-ui/core@npm:@mui/material@5.0.0-rc.1 @material-ui/styles@npm:@mui/styles@5.0.0-rc.1 which in theory should just work.

It did give me some trouble...

warning Pattern ["@mui/material@^5.0.0-rc.1"] is trying to unpack in the same destination "/Users/rart/Library/Caches/Yarn/v6/npm-@material-ui-core-5.0.0-rc.1-456218bfeb659dfb17c516ecc03f86013feaf253-integrity/node_modules/@material-ui/core" as pattern ["@material-ui/core@npm:@mui/material@5.0.0-rc.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["@mui/styles@^5.0.0-rc.1"] is trying to unpack in the same destination "/Users/rart/Library/Caches/Yarn/v6/npm-@material-ui-styles-5.0.0-rc.1-479c082afbdef116ad5323e15e3f1324efd29205-integrity/node_modules/@material-ui/styles" as pattern ["@material-ui/styles@npm:@mui/styles@5.0.0-rc.1"]. This could result in non-deterministic behavior, skipping.

...but after clearing node modules and yarn add/remove a couple of times it seems to be working.

Despite the hiccups, no rewiring or eject is needed using this route.

Hope the bug is solved soon.

callmeberzerker · 2021-09-09T06:13:20Z

This is kinda stupid @material-ui team. Before release -> naming "tidying up" is non-sensical. The upgrade path from v4 to v5 should have been smoother, and while I understand that breaking changes need to happen - at least plan them accordingly and let people who migrated early on the @next train to have smooth sailing. Now it's just a clusterfuck, massive renames, semi working codemods and on top of that core libraries that don't work with each other. 🤦

Do better.

rodrigonzalz · 2021-09-09T07:57:24Z

Is there any temporary solution to allow @mui/x-data-grid with @mui/core? Or are we forced to keep using the @material-ui beta?

Yes, you can add a few aliases to your webpack.config.js or babel.config.js. We use this trick to make the docs work with the RC version.
'@material-ui/core': '../node_modules/@mui/material'
'@material-ui/styles': '../node_modules/@mui/styles'
'@material-ui/icons': '../node_modules/@mui/icons-material'
'@material-ui/lab': '../node_modules/@mui/material'

Tried this and unless I am doing it wrong (possibly xd) it is not working for me.
In my case I use Next and set up on the next.config.js the following

config.resolve.alias = {
      ...config.resolve.alias,
      '@material-ui/core': path.resolve(__dirname, './node_modules/@mui/material'),
      '@material-ui/styles': path.resolve(__dirname, './node_modules/@mui/styles'),
      '@material-ui/icons': path.resolve(__dirname, './node_modules/@mui/icons-material'),
      '@material-ui/lab': path.resolve(__dirname, './node_modules/@mui/lab'),
    };

I have tried without the whole path.resolve and multiple variations, but none have worked.
I think this only works with your own imports, will not work for the imports of an external dependency.
For example I get the same issue with notistack, that also hasn't made a release for the @mui packages.

Khatib-Abbas · 2021-09-09T11:16:25Z

For Next.js version i use this config, work with 95% (litle css problem).

If you have any sugestions

//.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@material-ui/core": "../node_modules/@mui/material",
        "@material-ui/styles": "../node_modules/@mui/styles",
        "@material-ui/icons": "../node_modules/@mui/icons-material",
        "@material-ui/lab": "../node_modules/@mui/material"
      }
    }]
  ]
}

leolozes · 2021-09-09T12:38:03Z

After some testing, I got it working with:

    resolve: {
      alias: {
        '@material-ui/core': '@mui/material',
        '@material-ui/styles': '@mui/styles',
        '@material-ui/icons': '@mui/icons-material',
        '@material-ui/lab': '@mui/material'
      }
    }

in my webpack.config.ts.

Thanks!

m4theushw · 2021-09-09T12:50:51Z

For people that need a v5 compatible version and don't want to wait for the next release, you can use packages generated by #2571.

"@mui/x-data-grid-pro": "https://pkg.csb.dev/mui-org/material-ui-x/commit/9f39f255/@mui/x-data-grid-pro",
"@mui/x-data-grid": "https://pkg.csb.dev/mui-org/material-ui-x/commit/9f39f255/@mui/x-data-grid",

Example: https://codesandbox.io/s/material-demo-forked-shhg4?file=/demo.js

@Khatib-Abbas What is your "little css problem"? It might be some conflict between jss and emotion, it happed with me.

rart · 2021-09-09T19:08:50Z

"@mui/x-data-grid-pro": "https://pkg.csb.dev/mui-org/material-ui-x/commit/9f39f255/@mui/x-data-grid-pro",
"@mui/x-data-grid": "https://pkg.csb.dev/mui-org/material-ui-x/commit/9f39f255/@mui/x-data-grid",

Thanks, @m4theushw!

Sorry for the off-topic question but this is pretty useful: how is it that one manages to publish like that? I didn't manage to find docs or anything for pkg.csb.dev.

m4theushw · 2021-09-10T02:49:10Z

@rart https://codesandbox.io/docs/ci

jb-thery · 2021-09-14T13:53:02Z

@flaviendelangle Hello, there is any update with this issue ?

flaviendelangle · 2021-09-14T14:06:23Z

@jbty you can follow this comment to have the new naming today #2527 (comment)

Otherwise, we have merged the migration.
We will release the version v5.0.0-beta.0 by the end of the week with full v5 and @mui/* migration.

alb7h added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 3, 2021

flaviendelangle added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 3, 2021

flaviendelangle mentioned this issue Sep 3, 2021

[DataGrid] Drop v4 support #2515

Merged

flaviendelangle changed the title ~~Incompatibility with @mui/material@5.0.0-rc.0~~ [bug] The DataGrid is not compatible with the new package name of the core repository Sep 3, 2021

m4theushw changed the title ~~[bug] The DataGrid is not compatible with the new package name of the core repository~~ [DataGrid] The DataGrid is not compatible with the new package name of the core repository Sep 3, 2021

oliviertassinari added the v5.x label Sep 3, 2021

oliviertassinari added this to the Sprint 22 milestone Sep 6, 2021

m4theushw mentioned this issue Sep 8, 2021

Incompatibility between latest rc-0 and data-grid #2569

Closed

m4theushw mentioned this issue Sep 8, 2021

Incompatible with mui@next #2570

Closed

2 tasks

m4theushw mentioned this issue Sep 9, 2021

[core] Support for @mui packages #2571

Merged

flaviendelangle mentioned this issue Sep 9, 2021

[DataGridPro] no longer works with dark mode since the update mui 5.0.0-rc.0 #2562

Closed

2 tasks

m4theushw closed this as completed in #2571 Sep 9, 2021

rart mentioned this issue Sep 10, 2021

Support @mui/material package naming iamhosseindhv/notistack#423

Merged

m4theushw mentioned this issue Sep 13, 2021

Data Grid requires Material UI Core which is mui/material in v5 #2601

Closed

2 tasks

flaviendelangle mentioned this issue Sep 14, 2021

Use new @mui/* dependencies #2605

Closed

2 tasks

m4theushw mentioned this issue Sep 15, 2021

Data Grid Can't resolve '@material-ui/styles' with @Material-UI installed #2609

Closed

2 tasks

mtr1990 mentioned this issue Sep 16, 2021

[DataGrid] ] Some style component are broken #2622

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] The DataGrid is not compatible with the new package name of the core repository #2527

[DataGrid] The DataGrid is not compatible with the new package name of the core repository #2527

alb7h commented Sep 3, 2021

Edelf commented Sep 3, 2021

flaviendelangle commented Sep 3, 2021 •

edited

Loading

Edelf commented Sep 3, 2021

m4theushw commented Sep 3, 2021

rart commented Sep 8, 2021

stevenkampen commented Sep 8, 2021

m4theushw commented Sep 8, 2021 •

edited

Loading

rart commented Sep 8, 2021 •

edited

Loading

callmeberzerker commented Sep 9, 2021

rodrigonzalz commented Sep 9, 2021

Khatib-Abbas commented Sep 9, 2021 •

edited

Loading

leolozes commented Sep 9, 2021

m4theushw commented Sep 9, 2021 •

edited

Loading

rart commented Sep 9, 2021 •

edited

Loading

m4theushw commented Sep 10, 2021

jb-thery commented Sep 14, 2021 •

edited

Loading

flaviendelangle commented Sep 14, 2021 •

edited

Loading

[DataGrid] The DataGrid is not compatible with the new package name of the core repository #2527

[DataGrid] The DataGrid is not compatible with the new package name of the core repository #2527

Comments

alb7h commented Sep 3, 2021

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Steps to reproduce 🕹

Context 🔦

Your environment 🌎

Order ID 💳 (optional)

Edelf commented Sep 3, 2021

flaviendelangle commented Sep 3, 2021 • edited Loading

Edelf commented Sep 3, 2021

m4theushw commented Sep 3, 2021

rart commented Sep 8, 2021

stevenkampen commented Sep 8, 2021

m4theushw commented Sep 8, 2021 • edited Loading

rart commented Sep 8, 2021 • edited Loading

callmeberzerker commented Sep 9, 2021

rodrigonzalz commented Sep 9, 2021

Khatib-Abbas commented Sep 9, 2021 • edited Loading

leolozes commented Sep 9, 2021

m4theushw commented Sep 9, 2021 • edited Loading

rart commented Sep 9, 2021 • edited Loading

m4theushw commented Sep 10, 2021

jb-thery commented Sep 14, 2021 • edited Loading

flaviendelangle commented Sep 14, 2021 • edited Loading

flaviendelangle commented Sep 3, 2021 •

edited

Loading

m4theushw commented Sep 8, 2021 •

edited

Loading

rart commented Sep 8, 2021 •

edited

Loading

Khatib-Abbas commented Sep 9, 2021 •

edited

Loading

m4theushw commented Sep 9, 2021 •

edited

Loading

rart commented Sep 9, 2021 •

edited

Loading

jb-thery commented Sep 14, 2021 •

edited

Loading

flaviendelangle commented Sep 14, 2021 •

edited

Loading