search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.54k stars 1.32k forks source link

[DataGridPro] Cannot be used with vite & yarn2 pnp mode #3899

Closed sep2 closed 2 years ago

sep2 commented 2 years ago

Duplicates

Latest version

Current behavior 😯

In yarn2 pnp mode with vite, the following error happened after installing "@mui/x-data-grid-pro": "^5.5.0". However the non-pro ("@mui/x-data-grid": "^5.5.0") version is just working fine.

> yarn build
vite v2.7.13 building for production...
✓ 241 modules transformed.
[vite]: Rollup failed to resolve import "@mui/base" from "../../.yarn/__virtual__/@mui-x-data-grid-pro-virtual-509d41106b/0/cache/@mui-x-data-grid-pro-npm-5.5.0-80dcacec3c-2456bd6983.zip/node_modules/@mui/x-data-grid-pro/index-esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@mui/base" from "../../.yarn/__virtual__/@mui-x-data-grid-pro-virtual-509d41106b/0/cache/@mui-x-data-grid-pro-npm-5.5.0-80dcacec3c-2456bd6983.zip/node_modules/@mui/x-data-grid-pro/index-esm.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/home/user/Projects/system-management/.yarn/__virtual__/vite-virtual-5b1f5807e2/0/cache/vite-npm-2.7.13-85daa7688e-3d87807549.zip/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37915:19)
    at onwarn (/home/user/Projects/system-management/.yarn/__virtual__/vite-virtual-5b1f5807e2/0/cache/vite-npm-2.7.13-85daa7688e-3d87807549.zip/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37693:13)
    at Object.onwarn (/home/user/Projects/system-management/.yarn/cache/rollup-npm-2.64.0-6622294ad9-dc5b285380.zip/node_modules/rollup/dist/shared/rollup.js:23094:13)
    at ModuleLoader.handleResolveId (/home/user/Projects/system-management/.yarn/cache/rollup-npm-2.64.0-6622294ad9-dc5b285380.zip/node_modules/rollup/dist/shared/rollup.js:22376:26)
    at /home/user/Projects/system-management/.yarn/cache/rollup-npm-2.64.0-6622294ad9-dc5b285380.zip/node_modules/rollup/dist/shared/rollup.js:22353:26
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
[!] Error: unfinished hook action(s) on exit:
(vite:css) transform "/@windicss/windi.css"
(vite:css) transform "/home/user/Projects/system-management/es/web/src/styles/app.css"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/AlertTitle/alertTitleClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/AppBar/AppBar.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/AppBar/appBarClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Autocomplete/Autocomplete.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Autocomplete/autocompleteClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/cache/route-node-npm-4.1.1-55e624fcee-cbfb26fdf0.zip/node_modules/route-node/dist/route-node.esm.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/cache/symbol-observable-npm-1.2.0-9e812a0a39-48ffbc22e3.zip/node_modules/symbol-observable/es/index.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Avatar/Avatar.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Avatar/avatarClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/AvatarGroup/AvatarGroup.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/AvatarGroup/avatarGroupClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Backdrop/Backdrop.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Badge/Badge.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/CssBaseline/CssBaseline.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/BottomNavigation/BottomNavigation.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/BottomNavigation/bottomNavigationClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/BottomNavigationAction/BottomNavigationAction.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/BottomNavigationAction/bottomNavigationActionClasses.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Button/Button.js"
(vite:load-fallback) load "/home/user/Projects/system-management/.yarn/__virtual__/@mui-material-virtual-a7a83f9836/0/cache/@mui-material-npm-5.4.1-f0433fba11-8c3be7dc29.zip/node_modules/@mui/material/Button/buttonClasses.js"
> yarn dev
Pre-bundling dependencies:
  react
  react-dom
  react-router5
  router5
  @mui/x-data-grid-pro
  (...and 9 more)
(this will be run only when your dependencies or config have changed)
 > ../../.yarn/__virtual__/@mui-x-data-grid-pro-virtual-509d41106b/0/cache/@mui-x-data-grid-pro-npm-5.5.0-80dcacec3c-2456bd6983.zip/node_modules/@mui/x-data-grid-pro/index-esm.js:1:2018: error: Could not resolve "@mui/base" (mark it as external to exclude it from the bundle)
    1 │ .../Divider";import{unstable_composeClasses as Oe}from"@mui/base";import ye from"@mui/material/Checkbox";import Ee f...
      ╵                                                       ~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
../../.yarn/__virtual__/@mui-x-data-grid-pro-virtual-509d41106b/0/cache/@mui-x-data-grid-pro-npm-5.5.0-80dcacec3c-2456bd6983.zip/node_modules/@mui/x-data-grid-pro/index-esm.js:1:2018: error: Could not resolve "@mui/base" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog (/home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:1493:15)
    at /home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:1149:7)
    at /home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:1258:14
    at /home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/user/Projects/system-management/.yarn/unplugged/esbuild-npm-0.13.15-0362570e32/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:324:12)

Expected behavior 🤔

Should work as before, no error throwed.

Steps to reproduce 🕹

Steps:

  1. use yarn2 with .yarnrc.yml: 
    yarnPath: .yarn/releases/yarn-3.1.1.cjs
nodeLinker: pnp
  2. Install @mui/material and use it with vite, everything is fine.
  3. Install @mui/x-data-grid-pro and set the license info.
  4. Run yarn dev/yarn build, the error is throwed.

Context 🔦

Only occured in Pro version.

Your environment 🌎

`npx @mui/envinfo` Using Chrome Version 98.0.4758.80 (Official Build) (64-bit). ``` System: OS: Linux 5.16 Arch Linux Binaries: Node: 17.3.0 - /usr/bin/node Yarn: 3.1.1 - /usr/bin/yarn npm: Not Found Browsers: Chrome: Not Found Firefox: 96.0.3 ```

Order ID 💳 (optional)

35352

sep2 commented 2 years ago

I found a solution .yarnrc.yml:

yarnPath: .yarn/releases/yarn-3.1.1.cjs
nodeLinker: pnp

packageExtensions:
    "@mui/x-data-grid-pro@*":
        dependencies:
            "react-dom": "*"
            "@mui/base": "latest"
            "@mui/system": "*"
    "@mui/styled-engine@*":
        dependencies:
            "@emotion/styled": "*"
            "@emotion/react": "*"

But this is a hack, and should be resolved in the package itself. (the non-pro version is just working fine without this hack)

cherniavskii commented 2 years ago

Looks like @mui/base has to be added to peerDependencies for vite compatibility. I'll try to reproduce it in StackBlitz.

flaviendelangle commented 2 years ago

I'm probably the faulty one here I imported something directly from @mui/base in GridGroupingCriteriaCell, we should always import from @mui/material.

And probably block some imports with ESLint

cherniavskii commented 2 years ago

Just in case - here's a reproduction repo https://github.com/cherniavskii/data-grid-pro-yarn-pnp-example

cherniavskii commented 2 years ago

@flaviendelangle I can open a PR

flaviendelangle commented 2 years ago

@cherniavskii thanks ! Could you remove all the imports to @mui/base, even in @mui/x-data-generator ?

cherniavskii commented 2 years ago

@flaviendelangle Sure

sep2 commented 2 years ago

I should mention that the part

    "@mui/styled-engine@*":
        dependencies:
            "@emotion/styled": "*"
            "@emotion/react": "*"

is used to resolved a similar problem for @mui/lab.

m4theushw commented 2 years ago

Could you remove all the imports to @mui/base, even in @mui/x-data-grid-generator ?

@flaviendelangle Why to remove the imports to @mui/base in @mui/x-data-grid-generator? It's listed as dependency in package.json. It's only used in one place sure but the alternative without it is to duplicate the types in https://github.com/mui/mui-x/pull/3901/files#diff-845da0272d8d52f7bee961db66ca4f4d76f702f1c13f630d61dbd111fa781aeaR45 which could hide a bug if the core changes the params.

flaviendelangle commented 2 years ago

OK "all" may have been a strong statement. I meant all the import { unstable_composeClasses as composeClasses } from '@mui/base'; since we are sometime importing it from @mui/material and sometime from @mui/base

dancernogorsky commented 2 years ago

+1

I am seeing the same issue now using yarn2 pnp after upgrading to "@mui/x-data-grid-pro": "^5.5.0" today.

"Module not found: @mui/x-data-grid-pro tried to access @mui/base, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound."

I applied the same patch that @sep2 mentioned above, but wanted to report.

      dependencies:
          "react-dom": "*"
          "@mui/base": "latest"
          "@mui/system": "*"
oliviertassinari commented 2 years ago

is used to resolved a similar problem for @mui/lab.

@sep2 The issue was eventually open: https://github.com/mui/material-ui/issues/32620 and fixed.

But this is a hack, and should be resolved in the package itself. (the non-pro version is just working fine without this hack)

Could you check again with the latest versions?