search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.95k stars 32.27k forks source link

[examples] Add example demo with vite #21377

Closed lzm0x219 closed 2 years ago

lzm0x219 commented 4 years ago

Hope to support vite...

Related issues:

oliviertassinari commented 4 years ago

Note that vite is still experimental https://github.com/vitejs/vite#status. It should already be supported. One thing that we could do is create an example with it. Why not, once it's stable.

lzm0x219 commented 4 years ago

yeah..Has been supported, but there are problems..

oliviertassinari commented 4 years ago

Could you expand on the issues you are facing?

lzm0x219 commented 4 years ago 
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

This will cause an error.

mbrookes commented 4 years ago

Definitely not a Material-UI issue in that case.

oliviertassinari commented 4 years ago

@vvni Do you have a reproduction? I believe the correct imports with vite are

import { Button, ButtonGroup } from '@material-ui/core';
oliviertassinari commented 4 years ago

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such example. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

applike-ss commented 3 years ago

When using vite.js i am getting a Uncaught ReferenceError: withStyles_default is not defined for core/styles/index.d.ts in line 1 (export * from './colorManipulator';)

ayamanemissouri commented 3 years ago

me too , When using vite.js i am getting a Uncaught ReferenceError: Box_default is not defined

oliviertassinari commented 3 years ago

Out of curiosity, us vite used by developers migrating from Vue to React, or it's unrelated?

xueqingxiao commented 3 years ago

@oliviertassinari you can take a look this comment. if you guys just compile component to ES module that should be great.

ayamanemissouri commented 3 years ago

doesn't work for me this comment

fadi-george commented 3 years ago

I can compile with icons v5.0.0-alpha.20 but cant with 5.0.0-alpha.26

davidbonnet commented 3 years ago

The issue is unrelated to Material-UI, root cause: https://github.com/evanw/esbuild/issues/706

oliviertassinari commented 3 years ago

Looking at https://github.com/vitejs/vite/issues/1853#issuecomment-772210814, it seems to be a combination of multiple factors. It's both esbuild that doesn't interop well between CJS/ESM and the encouraged imports for icons that are CJS.

I wonder if the icons package shouldn't only export an ESM version. @eps1lon I recall you mentioned that we could potentially drop CJS, do you have more details on the changes involved?

oliviertassinari commented 3 years ago

Regarding adding an example with Vite, we might not be yet at a point where we should care enough https://npm-stat.com/charts.html?package=vite&package=react-scripts&from=2020-03-06&to=2021-03-06

jarlef commented 3 years ago

Why you should care

create react app => webpack => slow vite js / snowpack => esbuild => fast

image

I would assume when you develop material ui it would preferable to use bundler / tooling that is performant

davidbonnet commented 3 years ago

IMHO, there's no need to add a vite example (which has more than 20k stars on Github BTW). Material-UI, as any other dependency, should just work by npm installing it and importing it.

oliviertassinari commented 3 years ago

which has more than 20k stars on Github BTW

A great sign that the developer community is tired of waiting for webpack to build? :)

davidbonnet commented 3 years ago

Yes, and we also know how to pronounce its name with the right accent, for a change. What's more to ask? 😉

nestarz commented 3 years ago

I can compile with icons v5.0.0-alpha.20 but cant with 5.0.0-alpha.26

I have the same issue as @fadi-george on 5.0.0-alpha.27 I have this error using vite latest build 2.0.5:

Uncaught ReferenceError: createSvgIcon is not defined

But it doesn't works with alpha.20 sadly.

fadi-george commented 3 years ago

@nestarz Hmm, Id try updating imports to be like this:

import { Print as PrintIcon } from '@material-ui/icons';
oliviertassinari commented 3 years ago

Adding this config: vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@material-ui/icons': '@material-ui/icons/esm',
    },
  },
})

Seems to solve the issue. At least, it fixes the reproduction that @Mushus has given in #25362 with v4 and v5.

Can people confirm? (from https://github.com/vitejs/vite/issues/1853#issuecomment-793026832) Or infirm with a reproduction.

If it solves the issue, would somebody be interested in adding a vite example inside this folder: /examples :)?

fadi-george commented 3 years ago

With Node 15.11 and Windows, I can build with version 5.0.0-alpha.24 for icons without an alias.

But updating to alpha.27 seems to break it. I tried with and without the alias. The error seems to list a different file each time build script is run. E.g. Error: Could not load /node_modules/@material-ui/icons/esm/Timeline.js (imported by node_modules\@material-ui\icons\esm\index.js): EMFILE: too many open files, open '\node_modules\@material-ui\icons\esm\Timeline.js'

fadi-george commented 3 years ago

Had to run this, to get it to build for mac (Big Sur) too for alpha.24

$ echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
$ echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -w kern.maxfiles=65536
$ sudo sysctl -w kern.maxfilesperproc=65536
$ ulimit -n 65536
fadi-george commented 3 years ago

After running the script above to increase maximum number of open files, I am able to build for alpha.27 for Mac. No alias changes also my imports are structured like this: import { Print as PrintIcon } from '@material-ui/icons';

Otherwise if I did: import PrintIcon from '@material-ui/icons/Print';

I would get:

ReferenceError: createSvgIcon is not defined

And in this case, the alias change does not work either.

fadi-george commented 3 years ago

I suppose for Windows it could be solved via WSL.

oliviertassinari commented 3 years ago

@fadi-george Do you have a reproduction with the proposed config not working?

fadi-george commented 3 years ago

After a clean install of packages, I can build for Vite 2.1.0 using the kern.maxfiles trick for alpha.27 as well (no aliases).

kjeske commented 3 years ago

@oliviertassinari I tried many different solutions in my quite big application using material-ui (btw it's crazy awesome lib, thanks!) and the only config that worked for me is provided here: https://github.com/vitejs/vite/issues/1853#issuecomment-805605644

dav-m85 commented 3 years ago

@oliviertassinari had the same error, what worked was inspired from your solution:

alias: {
  '@material-ui/icons': '@material-ui/icons/esm',
},
Ubuntu 20.04.2 LTS, node v14.15.5
├── @material-ui/core@4.11.2
├── @material-ui/icons@4.11.2
├── @material-ui/lab@4.0.0-alpha.57
├── @preact/preset-vite@2.0.1
├── vite@2.1.5

Been struggling with alias resolution, for some reason regex doesn't seem to work for me, and relative paths in "replacement" messes up with the final path.

PRossetti commented 3 years ago

I was able to make it work by doing a pristine install like this:

  1. Updated my vite version in my package.json to be "vite": "2.2.3"
  2. rm -rf node_modules && rm package-lock.json && npm cache clear --force && npm i

My vite.config.js file:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    minify: process.env.ENV === 'development' ? false : 'terser',
    outDir: 'dist', // this is the defautl value
    sourcemap: false // this is the defautl vallue
  }
})

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "allowUnreachableCode": false,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "build",
    "sourceMap": true
  },
  "include": ["./src/**/*.ts"]
}

Please let me know if it helps anybody! Regards!

demongodYY commented 3 years ago

Adding this config: vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@material-ui/icons': '@material-ui/icons/esm',
    },
  },
})

Seems to solve the issue. At least, it fixes the reproduction that @Mushus has given in #25362 with v4 and v5.

Can people confirm? (from vitejs/vite#1853 (comment)) Or infirm with a reproduction.

If it solves the issue, would somebody be interested in adding a vite example inside this folder: /examples :)?

thx, resolve path issue is so confused...

lzm0x219 commented 3 years ago

Adding this config: vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@material-ui/icons': '@material-ui/icons/esm',
    },
  },
})

Seems to solve the issue. At least, it fixes the reproduction that @Mushus has given in #25362 with v4 and v5. Can people confirm? (from vitejs/vite#1853 (comment)) Or infirm with a reproduction. If it solves the issue, would somebody be interested in adding a vite example inside this folder: /examples :)?

thx, resolve path issue is so confused...

No, vite version is different, there are different problems.

zrait commented 3 years ago

This is still broken for me, and the proposed solution doesn't make much sense with v5 since icons are now in @mui/icons-material (I tried that path but I don't actually think this has anything to do with the icons).

My error is createTheme_default is not a function which seems to be similar to other default reexporting issues people in this thread reported in other issues that were merged with this even though I believe it's a different issue from the icons. Did anyone get Material working with Vite after seeing a default export issue?

viclafouch commented 3 years ago

I have the same error with Vite JS (2.6.1) and @mui/material 5.0.2

image

davidsoderberg commented 3 years ago

I have the same issue as above with mui packages...

heyheman11 commented 3 years ago

This is

I have the same error with Vite JS (2.6.1) and @mui/material 5.0.2

image

Same thing happening for me as well, but only when using vite and trying to import any component from @mui/lab. I'm not quite sure what is happening

heyheman11 commented 3 years ago

For those struggling with this issue, it still exists for mui/material-icons. The following config resolved my issue. Based on others answers

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: /^@mui\/icons-material\/(.*)/,
        replacement: "@mui/icons-material/esm/$1"
      }
    ]
  }
});
davidsoderberg commented 3 years ago

For me this was fixed with 5.0.4 and lab 5.0.0-alpha.51 :)

elpddev commented 2 years ago

Still happening as of vite 2.9.13

@heyheman11 Thank you. Your workaround saved my day. https://github.com/mui/material-ui/issues/21377#issuecomment-939675305

mescoff commented 2 years ago

Same here... Versions:

I was having the following error: createTheme_default is not a function in Box.js which was misleading because the error ended up being related to mui/material-icons...

Below fix did it for me, thanks @heyheman11 (the only difference with the example below is that I am not using reactRefresh only react --> import react from "@vitejs/plugin-react")

For those struggling with this issue, it still exists for mui/material-icons. The following config resolved my issue. Based on others answers

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: /^@mui\/icons-material\/(.*)/,
        replacement: "@mui/icons-material/esm/$1"
      }
    ]
  }
});
athosfranco commented 2 years ago

Adding this config: vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@material-ui/icons': '@material-ui/icons/esm',
    },
  },
})

Seems to solve the issue. At least, it fixes the reproduction that @Mushus has given in #25362 with v4 and v5. Can people confirm? (from vitejs/vite#1853 (comment)) Or infirm with a reproduction. If it solves the issue, would somebody be interested in adding a vite example inside this folder: /examples :)?

thx, resolve path issue is so confused...

This solved my problem. Thanks.

aditya-algo8 commented 11 months ago

I am still getting this error while moving existing big codebase from react cra to vite.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.4",
    "@mui/x-date-pickers": "^6.16.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/crypto-js": "^4.2.1",
    "apexcharts": "^3.42.0",
    "axios": "^1.4.0",
    "crypto-js": "^4.2.0",
    "date-fns": "^2.30.0",
    "dayjs": "^1.11.10",
    "esbuild": "^0.19.9",
    "formik": "^2.4.3",
    "highcharts": "^11.1.0",
    "highcharts-react-official": "^3.2.1",
    "html2canvas": "^1.4.1",
    "jspdf": "^2.5.1",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-date-range": "^1.4.0",
    "react-datepicker": "^4.16.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-trend": "^1.2.5",
    "web-vitals": "^2.1.4",
    "yup": "^1.2.0"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.7",
    "webpack-bundle-analyzer": "^4.10.1"
  }
}

`

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@mui_icons-material.js?v=511b48c2' does not provide an export named 'default' (at Sign.jsx:1:71)

I followed all the Vite config solutions provided above and still no help.

My imports are like this -

import React, { Visibility, VisibilityOff } from "@mui/icons-material"; import { FormControl, IconButton, InputAdornment, InputBase,

My vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        '@material-ui/icons': '@material-ui/icons/esm',
      },
    },
    define: {
        global: 'window',
    },
    optimizeDeps: {
        include: [
            '@material-ui/core',
            '@material-ui/icons',
            '@material-ui/styles',
        ],
    },
    "resolutions": {
      "esbuild": "0.11.17"
    }
});
AteeqShareef11 commented 3 months ago

For those struggling with this issue, it still exists for mui/material-icons. The following config resolved my issue. Based on others answers

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: /^@mui\/icons-material\/(.*)/,
        replacement: "@mui/icons-material/esm/$1"
      }
    ]
  }
});

thanks it works for me