Блог

Я вручную конвертирую проект из Polymer 2 в Polymer 3. Примечание: сначала я безуспешно попробовал modulizer (я сделал много попыток в Windows, linux и mac), поэтому я решил перейти вручную. Этот вопрос не касается modulizer (уже много обсуждений).

Проект довольно огромный, поэтому я конвертирую его по шагам. Я смог заставить базовую часть работать (преобразование всех необходимых элементов в классы ES6 и т.д.).

Я тестирую его с помощью polymer serve, поэтому пока не в сборке.

Он также корректно работает в Chrome и Chrome Canary и загружается довольно быстро. В Firefox я получаю пустую страницу, и эта ошибка в консоли: ReferenceError: define не определена

Я пока ничего не нашел об этой ошибке в Интернете, поэтому решил спросить сообщество.

Он застрял в первой строке загруженного элемента. Извините, я не могу предоставить так много кода, просто чтобы иметь представление о том, где он застрял:

 define(["../../node_modules/@polymer/polymer/polymer-element.js", 
...
...

 

правильно ли, что импорт исходного кода преобразуется таким образом в FF?
В этой же строке представлены все импортируемые модули в массиве.

Первая строка того же элемента в консоли Chrome выглядит следующим образом:

 import { PolymerElement, html } from "../../node_modules/@polymer/polymer/polymer-element.js";
 

за ним следует другой импорт, например, в исходном коде, который выглядит следующим образом:

 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 

Любая помощь действительно приветствуется.
Спасибо!

Обновление после нескольких тестов:

Я заметил, что эта проблема возникает, когда я импортирую модуль, добавляя его в скрипт с помощью createElement.

Я попробовал в новом проекте Polymer 3 (без преобразования, только демонстрация, которую они имеют в первом элементе Polymer 3).

Если я включу модуль таким образом (по умолчанию в demo/index.html ):

 <script type="module" src="demo-element.js"></script>
 

он нормально работает как в Chrome, так и в Firefox.

Если я вместо этого включу модуль другим способом:

 <script>

  let script = document.createElement('script');
  script.setAttribute('type','module');
  script.setAttribute('src', 'demo-element.js');
  script.onload = function(){
    console.log('ready');
  };

  document.head.appendChild(script);

</script>
 

это работает только в Chrome.
В Firefox он выдает ту же ошибку (определение не определено):

Я также попытался добавить прослушиватель в WebComponentsReady и загрузить модуль после него:

 <script>

  window.addEventListener('WebComponentsReady', function(e) {
    console.log('components ready');

    let script = document.createElement('script');
    script.setAttribute('type','module');
    script.setAttribute('src', 'demo-element.js');
    script.onload = function(){
      console.log('ready');
    };

    document.head.appendChild(script);

  });

</script>
 

и я получил в Firefox ту же ошибку:

Примечание: та же проблема возникает и в Edge. Это работает только в Chrome. Я не тестировал в Safari.

На данный момент я немного застрял. Спасибо за любую помощь.