Ввод текстового поля MDC не всплывает и слева - PullRequest
0 голосов
/ 29 августа 2018

Я работаю над MDC 101 Tutorial и создаю файл bundle.js с помощью веб-пакета. Все работает отлично, за исключением того, что этикетка не всплывает и влево. Я пробовал эти два поста, но до сих пор не могу заставить его работать.

  1. Текстовое поле MDC плавает в верхнем левом углу
  2. Текстовое поле MDC не отображается

Я думаю, что это связано с моим JavaScript. Это файл ввода javascript в веб-пакете.

import {MDCRipple}    from '@material/ripple';
import {MDCSelect}    from '@material/select';
import {MDCTextField} from '@material/textfield';
import {MDCTopAppBar} from '@material/top-app-bar/index';


const topAppBarElement  = document.querySelector('.mdc-top-app-bar');
const topAppBar         = new MDCTopAppBar(topAppBarElement);


const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});


new MDCRipple(document.querySelector('.mdc-button'));
new MDCSelect(document.querySelector('.mdc-select'));

Это приводит к следующей ошибке в консоли

bundle.js:230 Uncaught TypeError: Cannot read property 'querySelector' of null
    at D.initialize (bundle.js:230)
    at new a (bundle.js:34)
    at new D (bundle.js:230)
    at Module.<anonymous> (bundle.js:590)
    at i (bundle.js:1)
    at Object.<anonymous> (bundle.js:1)
    at i (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

Эта цитата «И вот JS для создания экземпляра двух текстовых полей (или любого их числа): ...» из одного поста заставляет меня думать, что это javascript. Заранее спасибо.

...