Uncaught Reference Error при использовании Webpack (HTML плагин Webpack) - PullRequest
Новая
       29

Uncaught Reference Error при использовании Webpack (HTML плагин Webpack)

1 голос
/ 21 января 2020

У меня в виджете есть класс "Widget". js. Он имеет следующий код: 

export class Widget {

    constructor(elem,data) {
        this.elem = elem;
        this.data = data;


    }

    init(){
        ......
    }
}

У меня есть индексный файл. js со следующим кодом: 

import { Widget as defaultExport } from './lib/widget';

export default defaultExport;

Используя Webpack, этот индексный файл. js файл связан с файлом HTML, индекс. html. Теперь у меня есть тег script на моей странице HTML, который пытается импортировать класс Widget и вызвать функцию init в этом классе. Я пытался сделать следующее 

<script>


        $(document).ready(function() {

            console.log("In document ready" );
            let instance = new Widget(element,"data");
            instance.init();

        });

    </script>

Мой мотив - импортировать класс Widget в файл HTML через индекс. js и вызвать метод init. Когда я пытаюсь выполнить это, я получаю «Uncaught Reference Error: Widget not found». Я попытался использовать "new defaultExport" вместо new Widget, что также не работает. Я также попытался "import Widget from 'index.js'", что дает мне «Uncaught SyntaxError: Неожиданный идентификатор». Я попытался установить тип сценария как «модуль», и он не выполняет блок jquery (см. Следующий блок): 

 <script type="module">

        import Widget from './src/index'
        $(document).ready(function() {

            console.log("In document ready" );
            let instance = new Widget(element,"data");
            instance.init();

        });

    </script>

Не могли бы вы помочь мне решить эту проблему

Редактировать: я заметил в разделе Элементы консоли разработчика, что тег импорта скрипта в файл индекса. js добавляется после того тега, который у меня есть в файле HTML (см. Ниже). Может ли это быть причиной этой ошибки ссылки? 

<html>
<body>
<script>
..........
</script>
<script src = '/index.js'></script>
</body>
</html>
...