2

I'm using Rails 5.1.4 with the code below. I have confirmed that the material.js file is being processed and the material-components-web module is downloaded and discovered.

Why is mdc undefined when calling window.mdc.autoInit()?

// app/javascript/packs/material.js
import 'material-components-web'

// app/views/layouts/application.html.eeb
<html>
  <head>
    <%= javascript_pack_tag 'material' %>
  </head>
  <body>
    <script>window.mdc.autoInit();</script>
  </body>
</html>

I have tried

  • importing @material/auto-init separately.
  • Putting the autoInit call inside an onload
  • Adding a console.dir(window)/console.dir(this) inside pack file. this is not window inside the the pack file and the exports aren't being attached to this
rogermushroom
  • 5,486
  • 4
  • 42
  • 68

1 Answers1

3

To make material-components-web work with Rails I did

// app/javascript/packs/material.js
import * as mdc from 'material-components-web'
// for accessing it as a window object
window.mdc = mdc

And then I made sure window.mdc.autoInit() was called at the end of the body

rogermushroom
  • 5,486
  • 4
  • 42
  • 68
  • thanks a lot for this, this answer explained the instructions found in the material-web-components-web node module. – Nitrodist May 31 '20 at 16:03