window.autoInit in Rails using material-components

2019-08-17 04:37发布

问题:

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

回答1:

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