Templarian / MaterialDesign-React

Dist for Material Design Icons React Component for JS/TypeScript
https://materialdesignicons.com
MIT License
143 stars 20 forks source link

Build error #69

Closed nghiant96 closed 2 years ago

nghiant96 commented 2 years ago

Hello. I am using icon set for my project. It worked fine until. But when I build and run it doesn't work. I am using vite to build the project. The full text of the error you just encountered is: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Version of me: "@mdi/js": "^6.5.95", "@mdi/react": "^1.5.0", "react": "^17.0.2",

Templarian commented 2 years ago

@nghiant96 I just bumped the demo project to v18.0.0 with the existing 1.6.0 package and it seems fine.

Can you please retry with 1.6.0? I'm trying to not bump versions in this until I know there are breaking changes.

Updated to v18.0.0 / 1.6.0 https://templarian.github.io/@mdi/react/

versoworks commented 2 years ago

@Templarian https://templarian.github.io/@mdi/react/ isn't rendering in Edge & Safari here; console shows 404 returned for a couple of resources.

nghiant96 commented 2 years ago

@Templarian i fix it import Icon from '@mdi/react'; to import { Icon } from '@mdi/react';

Templarian commented 2 years ago

@versoworks Fixed, forgot to remove the absolute paths. 🤦

dzcpy commented 2 years ago

Shall we change the example code in the README?

craigrileyuk commented 1 year ago

I just lost hours to this issue thinking it was my build process that was causing the error.

Please add it to the README!

HugoGresse commented 1 year ago

As stated in the reference above, this is a bug in Vite : https://github.com/vitejs/vite/issues/2139 It impact many packages.

Mossop commented 8 months ago

@Templarian i fix it import Icon from '@mdi/react'; to import { Icon } from '@mdi/react';

This doesn't seem to work anymore? I get the following error:

[vite] Named export 'Icon' not found. The requested module '@mdi/react' is a CommonJS module, which may not support all module.exports as named exports