MDC-Web через CDN с отдельными компонентами: window.mdc.autoInit не является функцией - PullRequest
Новая
       23

MDC-Web через CDN с отдельными компонентами: window.mdc.autoInit не является функцией

0 голосов
/ 03 мая 2018

Мы начинаем с MDC-Web со старого приложения Ruby on Rails 3.2.

При включении всего пакета MDC-Web (CSS + JS) все работает, но мы сталкиваемся с проблемами при попытке использовать отдельные пакеты MDC-Web.

Когда мы используем отдельные пакеты, мы получаем ошибку «window.mdc.autoInit не является функцией».

Наш код: 

<!DOCTYPE html>
<html>
<head>
<title>Log in</title>
<meta content='text/html; charset=UTF-8' http-equiv='content-type'>
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://unpkg.com/@material/textfield@0.35.0/dist/mdc.textfield.min.css">
<link rel="stylesheet" href="https://unpkg.com/@material/button@0.35.0/dist/mdc.button.min.css">

<script src="https://unpkg.com/@material/textfield@0.35.0/dist/mdc.textfield.min.js"></script>
<script src="https://unpkg.com/@material/ripple@0.35.0/dist/mdc.ripple.min.js"></script>
<script src="https://unpkg.com/@material/auto-init@0.35.0/dist/mdc.autoInit.min.js"></script>

<style>

:root {
  --mdc-theme-primary: #4F9593; /* this changes the color of all buttons */
  --mdc-theme-on-primary: #ffffff; /* this is the text color on the buttons */
  --mdc-theme-accent: #64dd17;
  --mdc-theme-secondary: #ffffff;
}


.mdc-button.primary-filled-button {
   --mdc-theme-primary: #fb641b;
}
</style>

<body>

<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Email</label>
<div class="mdc-line-ripple"></div>
</div>

<button class= "mdc-button mdc-button--raised primary-filled-button" data-mdc-auto-init="MDCRipple" >
Log in
</button>

<script type="text/javascript">
window.mdc.autoInit();
</script>

</body>
</html>

Все нормально, когда мы используем полные пакеты (закомментировано выше), но происходит сбой, когда мы включаем только отдельные пакеты, что приводит к ошибке в консоли JS браузера: 

Uncaught TypeError: window.mdc.autoInit is not a function

window.mdc.autoInit существует, когда мы проверяем в консоли: 

> window.mdc.autoInit
{default: ƒ, __esModule: true}
default:ƒ r()
  __esModule:true
  __proto__:Object

Но это не функция.

Кто-нибудь имеет представление о том, что мы делаем неправильно / как мы можем решить это? (мы хотели бы использовать отдельные веб-пакеты MDC, чтобы избежать конфликтов с начальной загрузкой, которую мы используем на остальной части сайта, пока мы мигрируем по крупицам.)

Спасибо

1 Ответ

0 голосов
/ 04 октября 2018

Пожалуйста, измените код с: 

window.mdc.autoInit();

до 

mdc.autoInit();
...