window.autoInit in Rails using material-components-web and webpacker

614 Views Asked by rogermushroom At 07 November 2025 at 15:25

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

Original Q&A

There are 1 best solutions below

rogermushroom On 28 November 2017 at 11:40

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

window.autoInit in Rails using material-components-web and webpacker

There are 1 best solutions below

Related Questions in RUBY-ON-RAILS

Related Questions in WEBPACK

Related Questions in WEBPACKER

Related Questions in MATERIAL-COMPONENTS

Related Questions in MATERIAL-COMPONENTS-WEB

Trending Questions

Popular # Hahtags

Popular Questions