Closed vuhrmeister closed 6 years ago
I have no idea what causes this issue for you. Are you sure it's because of the import?
Well, not absolutely sure. But the same implementation is working on the client. Normal Material UI icons are also working fine.
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.
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.
Are you using the latest version of material-ui 1.0?
Well, 1.4.2 I'm also using Meteor which is using node v8.11.3
Still have no idea, unfortunately. :confused: Might be a Meteor thing?
@vuhrmeister Would your problem be fixed if I publish this as ES6 modules? :thinking:
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.
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.
@vuhrmeister So… i compared the packages
@babel/runtime
, while we inline the _interopRequireDefault
function, but that's also unrelated)/es
directory. This way, they can be imported as ES6 modules using import Facebook from '@material-ui/icons/es/Facebook
. Are you doing that? I could add this to our icons, too.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.
So I must apologize for taking your time but also thank you for your help.
It's fine. Glad you got this resolved. :+1:
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
I do render my page on the server and get the following error:
This is how I import it:
It is however working on the client!