Material UI 4.0 ~doesn't~ work[s great] with Meteor

help
1

I tried to upgrade to Material UI 4.0, and it doesn’t seem to work with Meteor at all. Can anyone else confirm?

I get this error:

W20190603-11:38:23.773(-4)? (STDERR) (node:776) UnhandledPromiseRejectionWarning: C:\Users\Kevin\repos\pixstori\node_modules\@material-ui\core\esm\Card\index.js:1
W20190603-11:38:23.774(-4)? (STDERR) (function (exports, require, module, __filename, __dirname) { export { default } from './Card';
W20190603-11:38:23.775(-4)? (STDERR)                                                               ^^^^^^
W20190603-11:38:23.775(-4)? (STDERR) 
W20190603-11:38:23.776(-4)? (STDERR) SyntaxError: Unexpected token export
W20190603-11:38:23.776(-4)? (STDERR)     at createScript (vm.js:80:10)
W20190603-11:38:23.777(-4)? (STDERR)     at Object.runInThisContext (vm.js:139:10)
W20190603-11:38:23.777(-4)? (STDERR)     at Module._compile (module.js:617:28)
W20190603-11:38:23.777(-4)? (STDERR)     at Object.Module._extensions..js (module.js:664:10)
W20190603-11:38:23.778(-4)? (STDERR)     at Module.load (module.js:566:32)
...

I also get a weird problem where once I try to upgrade, it borks it all even if I try to go back to an earlier version (either through downgrading using npm, or through switching to an old version via git). This happens on both Windows and Mac. Anyone else seeing this?

2

Material UI 4.0 is working great with Meteor on my local dev system. There were a lot of initial NPM warnings. Here’s what I did to fix them:

  • Put the node_modules folder in the trash
  • Ran meteor npm install
  • Ran meteor npm outdated
  • Got a listing looking like this:

55%20AM
55%20AM1218×348 49.3 KB

For each npm package that showed as outdated, I ran, for example:

  • meteor npm install @material-ui/codemod@4.0.2 --save

I think npm meteor update may work as well. IIRC a week or so ago when I did this there were some beta versions in the latest column and so I used the versions from the wanted column instead.

3

It turned out to be due to a babel plugin I was using (babel-plugin-direct-import 0.6.0-beta). Disabling that fixed it all up. I replaced it with babel-plugin-transform-imports but haven’t verified that it’s working to reduce the bundle size yet. Everything is at least compiling though!

4

Great. Do you use any transitions, e.g. to slide dialog boxes on screen? If so you’ll need to update the transition to use a forwardRef, e.g.:

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

That was the only tricky part I found of the migration from MUI 3 to 4. (MUI migration docs are here).