[examples] Add example demo with vite #21377

lzm0x219 · 2020-06-09T13:32:05Z

Hope to support vite...

Related issues:

Exported variable in chunk is not defined: Exported variable in chunk is not defined vitejs/vite#1853
ESM entry module's exports signature is not preserved: ESM entry module's exports signature is not preserved when required() by other modules evanw/esbuild#706

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

oliviertassinari · 2020-06-09T13:49:59Z

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 · 2020-06-10T13:53:53Z

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

oliviertassinari · 2020-06-10T14:33:10Z

Could you expand on the issues you are facing?

lzm0x219 · 2020-06-11T20:56:53Z

import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

This will cause an error.

mbrookes · 2020-06-11T21:42:10Z

Definitely not a Material-UI issue in that case.

oliviertassinari · 2020-06-13T10:18:53Z

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

import { Button, ButtonGroup } from '@material-ui/core';

applike-ss · 2021-02-26T06:11:52Z

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 · 2021-03-03T09:36:34Z

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

oliviertassinari · 2021-03-03T12:44:04Z

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

xueqingxiao · 2021-03-04T11:36:11Z

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

ayamanemissouri · 2021-03-04T13:11:58Z

doesn't work for me this comment

fadi-george · 2021-03-04T22:48:46Z

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

davidbonnet · 2021-03-05T19:36:45Z

The issue is unrelated to Material-UI, root cause: evanw/esbuild#706

oliviertassinari · 2021-03-07T16:50:49Z

Looking at vitejs/vite#1853 (comment), 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 · 2021-03-07T16:55:11Z

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 · 2021-03-08T17:31:22Z

Why you should care

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

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

davidbonnet · 2021-03-08T19:36:57Z

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 · 2021-03-08T19:45:04Z

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 · 2021-03-08T20:24:42Z

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

nestarz · 2021-03-10T17:42:56Z

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 · 2021-03-10T17:58:18Z

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

import { Print as PrintIcon } from '@material-ui/icons';

fadi-george · 2021-03-17T03:03:35Z

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 · 2021-03-31T09:48:37Z

@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: vitejs/vite#1853 (comment)

dav-m85 · 2021-04-09T06:54:26Z

@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 · 2021-04-30T01:06:14Z

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

Updated my vite version in my package.json to be "vite": "2.2.3"
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 · 2021-07-02T03:23:29Z

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 · 2021-07-02T16:36:01Z

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 · 2021-09-30T01:30:35Z

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 · 2021-10-08T13:03:19Z

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

davidsoderberg · 2021-10-09T09:13:28Z

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

heyheman11 · 2021-10-10T03:42:20Z

This is

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

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 · 2021-10-11T04:37:05Z

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 · 2021-10-23T07:26:52Z

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

elpddev · 2022-07-06T04:16:46Z

Still happening as of vite 2.9.13

@heyheman11 Thank you. Your workaround saved my day.
#21377 (comment)

mescoff · 2022-08-05T10:10:55Z

Same here... Versions:

vite: 3.0.4
@vitejs/plugin-react: 2.0.0
@mui/icons-material: 5.8.4
@mui/material: 5.9.3

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 · 2022-09-27T00:38:27Z

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 · 2023-12-11T05:54:12Z

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 · 2024-08-07T11:04:47Z

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

lzm0x219 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 9, 2020

oliviertassinari removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 9, 2020

oliviertassinari added waiting for 👍 Waiting for upvotes docs Improvements or additions to the documentation labels Jun 9, 2020

oliviertassinari changed the title ~~Hope to support vite~~ [docs] And example with vite Jun 9, 2020

This comment has been minimized.

Sign in to view

oliviertassinari closed this as completed Jun 13, 2020

oliviertassinari mentioned this issue Mar 14, 2021

Uncaught ReferenceError: createSvgIcon is not defined error when using TextField and XxxxIcon #25362

Closed

2 tasks

oliviertassinari changed the title ~~[docs] And example with vite~~ Build not working with vite when using @material-ui/icons Mar 14, 2021

oliviertassinari added good first issue Great for first contributions. Enable to learn the contribution process. and removed ready to take Help wanted. Guidance available. There is a high chance the change will be accepted labels Mar 31, 2021

oliviertassinari removed bug 🐛 Something doesn't work external dependency Blocked by external dependency, we can’t do anything about it labels Apr 11, 2021

oliviertassinari changed the title ~~Build not working with vite when using @material-ui/icons~~ [examples] Add example demo with vite Apr 11, 2021

This was referenced May 2, 2021

Exported variable in chunk is not defined vitejs/vite#1853

Closed

[vite] Uncaught ReferenceError: useForkRef_default is not defined #26078

Closed

oliviertassinari mentioned this issue Jun 1, 2021

[test] Add bundle fixtures #23166

Merged

8 tasks

mnajdova added ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed good first issue Great for first contributions. Enable to learn the contribution process. labels Jun 30, 2021

goncalovf mentioned this issue Sep 9, 2021

[examples] Add Vite.js example #28241

Merged

2 tasks

oliviertassinari mentioned this issue Jan 17, 2022

Compilation error caused by "circular reference" (@mui/core, @mui/core/ModalUnstyled) #28628

Open

2 tasks

mnajdova closed this as completed in #28241 Jan 27, 2022

[examples] Add example demo with vite #21377

[examples] Add example demo with vite #21377

Comments

lzm0x219 commented Jun 9, 2020 • edited by oliviertassinari Loading

oliviertassinari commented Jun 9, 2020 • edited Loading

lzm0x219 commented Jun 10, 2020

oliviertassinari commented Jun 10, 2020

lzm0x219 commented Jun 11, 2020

mbrookes commented Jun 11, 2020

oliviertassinari commented Jun 13, 2020

This comment has been minimized.

applike-ss commented Feb 26, 2021

ayamanemissouri commented Mar 3, 2021

oliviertassinari commented Mar 3, 2021

xueqingxiao commented Mar 4, 2021

ayamanemissouri commented Mar 4, 2021

fadi-george commented Mar 4, 2021

davidbonnet commented Mar 5, 2021 • edited by oliviertassinari Loading

oliviertassinari commented Mar 7, 2021

oliviertassinari commented Mar 7, 2021

jarlef commented Mar 8, 2021 • edited Loading

davidbonnet commented Mar 8, 2021

oliviertassinari commented Mar 8, 2021

davidbonnet commented Mar 8, 2021

nestarz commented Mar 10, 2021 • edited Loading

fadi-george commented Mar 10, 2021

fadi-george commented Mar 17, 2021 • edited Loading

kjeske commented Mar 31, 2021

dav-m85 commented Apr 9, 2021 • edited by oliviertassinari Loading

PRossetti commented Apr 30, 2021 • edited by oliviertassinari Loading

demongodYY commented Jul 2, 2021

lzm0x219 commented Jul 2, 2021

zrait commented Sep 30, 2021

viclafouch commented Oct 8, 2021

davidsoderberg commented Oct 9, 2021

heyheman11 commented Oct 10, 2021

heyheman11 commented Oct 11, 2021

davidsoderberg commented Oct 23, 2021

elpddev commented Jul 6, 2022

mescoff commented Aug 5, 2022 • edited Loading

athosfranco commented Sep 27, 2022

aditya-algo8 commented Dec 11, 2023 • edited Loading

AteeqShareef11 commented Aug 7, 2024

lzm0x219 commented Jun 9, 2020 •

edited by oliviertassinari

Loading

oliviertassinari commented Jun 9, 2020 •

edited

Loading

davidbonnet commented Mar 5, 2021 •

edited by oliviertassinari

Loading

jarlef commented Mar 8, 2021 •

edited

Loading

nestarz commented Mar 10, 2021 •

edited

Loading

fadi-george commented Mar 17, 2021 •

edited

Loading

dav-m85 commented Apr 9, 2021 •

edited by oliviertassinari

Loading

PRossetti commented Apr 30, 2021 •

edited by oliviertassinari

Loading

mescoff commented Aug 5, 2022 •

edited

Loading

aditya-algo8 commented Dec 11, 2023 •

edited

Loading