Обнаружена ошибка при попытке использовать signature_pad с Webpack 2!
В моем проекте используется новейшая версия приложения Create React . Использование SignaturePad с предыдущими версиями приложения Create React работало, как и ожидалось, но при обновлении до Webpack 2 появилась ошибка. Поэтому я вполне уверен, что это конкретно связано с новыми механизмами импорта / экспорта Webpack 2.
Каково текущее поведение?
При попытке создать новый экземпляр SignaturePad
приложение вылетает с определенной ошибкой, связанной с веб-пакетом:
Какое поведение ожидается?
Экземпляр должен быть создан, как ожидалось, без сбоев.
Какие версии SignaturePad и какой браузер / устройство подвержены этой проблеме?
Похоже, это происходит как в Chrome, так и в Safari.
@taylorlapeyre Спасибо за отчет. Это действительно странно, потому что похоже, что вместо того, чтобы вернуть фактический код JS, он возвращает путь к файлу, т.е.
это: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a
равно этому: "/static/media/signature_pad.2ceae229.mjs"
.
Я постараюсь выяснить, что не так, но если у кого-то есть идеи и он может создать PR с исправлением, это было бы здорово.
@taylorlapeyre Я понял, что не так, и думаю, что на самом деле это ошибка в react-create-app
, хотя я мог бы легко исправить ее и здесь. Проблема в том, что Webpack 2 загружает версию ES6, которая находится в файле signature_pad.mjs
, но я предполагаю, что конфигурация Webpack в react-create-app
не знает, как обрабатывать файлы с расширением .mjs
- вот почему он возвращает имя файла.
@szimek ахх, в этом есть смысл. Я думаю, что в этом случае исправление должно быть в приложении Create React. Вы хотите устроить там пиар? Я тоже могу это принять, если вы дадите мне отправную точку
Просто для записи - обходным путем для нас было просто скопировать файл signature_pad.js
напрямую в наш каталог src
. Как только мы это сделали, мы смогли импортировать его, как и ожидалось.
Большое спасибо за быстрый ответ, @szimek. Я работаю с @taylorlapeyre ... Просто разветвил репо и изменил процесс сборки, выписав файл .js
вместо файла .mjs
. Я могу подтвердить, что это полностью работает в нашем контексте создания-реакции-приложения! Но да, похоже, с их стороны это большая проблема, поскольку mjs - это вещь.
еще раз, огромное спасибо @szimek за то, что он уже представил это CRA ... не похоже, что они очень заинтересованы в поддержке mjs
хотя ... гав.
Мы могли бы сделать патч, который экспортирует сборку umd
под другим именем, например, signature_pad.umd.js
и использует signature_pad.js
для сборки модуля. Не уверен, однако, насколько это повлияет на ваш текущий дистрибутив. Кроме того, не уверен, насколько распространен этот вариант использования в настоящее время ... В любом случае, дайте нам знать, чем мы можем вам помочь!
Да, однако имеет смысл просто переименовать этот файл в signature_pad.es6.js
чтобы убедиться, что он поддерживается везде. Однако, опять же, для переименования файлов dist требуется крупный выпуск, поэтому может потребоваться некоторое время для этого. Мне нужно проверить еще одну проблему, связанную с экспортом по умолчанию и именованным экспортом, который также требует основного выпуска (№ 240). Может, я просто сделаю и то, и другое одновременно.
Лучшее решение - напрямую импортировать файл js
import SignaturePad from 'signature_pad/dist/signature_pad.js';
Благодарим вас за обходной путь, импорт из signature_pad/dist/signature_pad.js
у нас работает.
Facebook дает официальную рекомендацию, как с этим справиться.
В основном они предполагают, что ES6 не может считаться полностью поддерживаемым еще пару лет, поэтому библиотеки должны публиковать код ES5. См. Этот раздел в readme:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm -run-build-fails-to-minify
Думал, что дам тебе знать.
Я еще не пробовал, но create-react-app
v2 также должен компилировать код в node_modules
- https://github.com/facebook/create-react-app/pull/3776. Версия 3 (в настоящее время находится в стадии бета-тестирования) signature_pad
больше не использует расширение mjs
, поэтому оно должно работать с create-react-app
v2, хотя было бы неплохо подтвердить.
Пожалуйста, повторно откройте эту проблему, если проблема по-прежнему возникает при использовании CRA 2 и последней бета-версии этой библиотеки.
Самый полезный комментарий
Лучшее решение - напрямую импортировать файл js
import SignaturePad from 'signature_pad/dist/signature_pad.js';