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