TeamWertarbyte / mdi-material-ui

Material-UI SvgIcon components for Material Design Icons.
MIT License
328 stars 15 forks source link

Fail to render on server #17

Closed vuhrmeister closed 6 years ago

vuhrmeister commented 6 years ago

I do render my page on the server and get the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is how I import it:

import Facebook from 'mdi-material-ui/Facebook'

It is however working on the client!

leMaik commented 6 years ago

I have no idea what causes this issue for you. Are you sure it's because of the import?

vuhrmeister commented 6 years ago

Well, not absolutely sure. But the same implementation is working on the client. Normal Material UI icons are also working fine.

vuhrmeister commented 6 years ago

It seems Node can't properly handle the transpiled module.

This is what a console.log shows on the server. First line is the imported component from this library and second from material-ui.

{}
{ [Function: ShouldUpdate] displayName: 'pure(Add)', muiName: 'SvgIcon' }

Why not just have ES6 modules? I think most of the time code for the client gets transpiled anyway by a bundler.

leMaik commented 6 years ago

Many people don't transpile their dependencies. E.g. create-react-app doesn't. I don't know why Node can't handle the transpiled module for you, I've successfully used this library for SSR previously.

Seems like something with your bundler/SSR/… configuration is weird.

leMaik commented 6 years ago

Are you using the latest version of material-ui 1.0?

vuhrmeister commented 6 years ago

Well, 1.4.2 I'm also using Meteor which is using node v8.11.3

leMaik commented 6 years ago

Still have no idea, unfortunately. :confused: Might be a Meteor thing?

https://forums.meteor.com/t/webpack-compiler-inside-meteor-es6-modules-hot-reload-and-code-splitting/11264/249

leMaik commented 6 years ago

@vuhrmeister Would your problem be fixed if I publish this as ES6 modules? :thinking:

vuhrmeister commented 6 years ago

Might be Meteor, can't say yet. But I'm not using Webpack but the native build system. It doesn't compile code inside of node_modules, so it should import it as is. I rather think it's node itself.

I can't say for sure, but I believe a normal ES6 module should work properly fine since.

I'm just trying to figure out the difference between the Material UI icon module since this is also transpiled.

leMaik commented 6 years ago

But I'm not using Webpack but the native build system.

I'm afraid I can't help you with your build configuration then.

I'm just trying to figure out the difference between the Material UI icon module since this is also transpiled.

Let me know about any differences you find. I'll update our icons accordingly to make them work for you and other Meteor users.

leMaik commented 6 years ago

@vuhrmeister So… i compared the packages

vuhrmeister commented 6 years ago

Now you were faster … So I just played around a bit and I also found the differences. After few changes I restarted the server so it would import my changed file. But wait – I reverted my changes and it still worked …

Short story: obviously Meteor detects the newly installed npm module while building for the client, but not for server use. To get that fixed it seems I have to restart the Meteor server after installing an npm package.

So I must apologize for taking your time but also thank you for your help.

Don't know if importing ES6 modules will be a plus now. Honestly I don't do it for Material UI. But I will try it out. If I see any benefit I will come back to you.

leMaik commented 6 years ago

So I must apologize for taking your time but also thank you for your help.

It's fine. Glad you got this resolved. :+1:

eric-burel commented 4 years ago

Hi, restarting the server does not fix the issue for me, I still encounter this issue today. It's not specifically related to mdi-material-ui though it also affects a few other packages like @material-ui/icons