Signature_pad: SignaturePad не работает с приложением Create React

Созданный на 26 мая 2017  ·  11Комментарии  ·  Источник: szimek/signature_pad

Обнаружена ошибка при попытке использовать signature_pad с Webpack 2!

В моем проекте используется новейшая версия приложения Create React . Использование SignaturePad с предыдущими версиями приложения Create React работало, как и ожидалось, но при обновлении до Webpack 2 появилась ошибка. Поэтому я вполне уверен, что это конкретно связано с новыми механизмами импорта / экспорта Webpack 2.

Каково текущее поведение?

При попытке создать новый экземпляр SignaturePad приложение вылетает с определенной ошибкой, связанной с веб-пакетом:

screen shot 2017-05-26 at 11 28 41 am

screen shot 2017-05-26 at 11 35 50 am

Какое поведение ожидается?

Экземпляр должен быть создан, как ожидалось, без сбоев.

Какие версии SignaturePad и какой браузер / устройство подвержены этой проблеме?

Похоже, это происходит как в Chrome, так и в Safari.

Самый полезный комментарий

Лучшее решение - напрямую импортировать файл js

import SignaturePad from 'signature_pad/dist/signature_pad.js';

Все 11 Комментарий

@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 и последней бета-версии этой библиотеки.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги