Не удалось минимизировать код из этого файла

Question

Не удалось минимизировать код из этого файла

Я создаю библиотеку JavaScript, которую хочу добавить npm, В настоящее время я использую эту библиотеку в другом проекте, и я добавил ее в качестве зависимости, используя ее репозиторий GitHub:

"dependencies": {
  // ... others
  "react-web-component": "LukasBombach/react-web-component",
}

Я также использую Webpack с UglifyJsPlugin, Теперь, когда я хочу построить свой проект, я получаю сообщение об ошибке:

Не удалось скомпилировать.
Не удалось минимизировать код из этого файла:
./packages/react-scripts/node_modules/react-web-component/src/index.js строка 18:0
Подробнее читайте здесь: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Ошибка команды с кодом выхода 1.

Это проблема моей библиотеки. Когда я удаляю его из моего deps (и из моего кода), компиляция работает.

Я не могу понять, в чем проблема, мой код кажется довольно простым:

const ReactDOM = require('react-dom');
const retargetEvents = require('./retargetEvents');
const getStyleElementsFromReactWebComponentStyleLoader = require('./getStyleElementsFromReactWebComponentStyleLoader');

module.exports = {
  create: function(app, tagName, options) {
    const proto = Object.create(HTMLElement.prototype, {
      attachedCallback: {
        value: function() {
          const shadowRoot = this.createShadowRoot();
          const mountPoint = document.createElement('div');
          getStyleElementsFromReactWebComponentStyleLoader().forEach(style =>
            shadowRoot.appendChild(style)
          );
          shadowRoot.appendChild(mountPoint);
          ReactDOM.render(app, mountPoint);
          retargetEvents(shadowRoot);
        },
      },
    });
    document.registerElement(tagName, { prototype: proto });
  },
};

Внутри retargetEvents а также getStyleElementsFromReactWebComponentStyleLoader требует есть простые module.export команды. Вы можете увидеть их исходный код здесь и здесь.

Я уже пытался опубликовать свою библиотеку с помощью команд экспорта / импорта ES6.

Полный исходный код моей библиотеки (только эти 3 файла) можно найти по адресу https://github.com/LukasBombach/react-web-component

21

javascript node.js minify uglifyjs2

Источник

user1183252 14 авг '17 в 09:37

8 ответов

Решение

Для тех, кто сталкивается с проблемой. Сначала проверьте ваш package.json, используете ли вы React-скрипт 1.x. Если это так, попробуйте обновить до 2.xx

Из официальных документов по устранению неполадок запустить npm build не удается минимизировать

npm run build не удается минимизировать до react-scripts@2.0.0эта проблема была вызвана третьей стороной node_modules использование современных функций JavaScript, потому что минификатор не может их обработать во время сборки. Это было решено путем компиляции стандартных современных функций JavaScript внутри node_modules в react-scripts@2.0.0 и выше.
Если вы видите эту ошибку, вы, вероятно, используете старую версию react-scripts, Вы можете исправить это, избегая зависимости, которая использует современный синтаксис, или обновив до react-scripts@>=2.0.0 и следуйте инструкциям по миграции в журнале изменений.

Обновление

npm install --save --save-exact react-scripts@2.x.x

или же

yarn add --exact react-scripts@2.x.x

18

Источник

user267693 07 фев '19 в 01:00

Для людей, которые все еще сталкиваются с этой проблемой, здесь я нашел решение, которое помогло мне; Я объясню это шаг за шагом здесь:

Недавно я участвовал в проекте, который использует старую версию create-react-app с webpack@3 а также uglifyJsPluginв его конфигурации webpack. Пока я работал над проектом, основная проблема возникла, когда я установил другие пакеты npm и какое-то время работал с ними в режиме разработки. После того, как я выполнил свои задачи над ними, когда я захотел собрать проект, я столкнулся с головной болью:

cannot minify code from this file blah blah blah...

Проблема возникла из-за минимизации файлов js, поэтому я подумал, что если я изменю конфигурацию webpack.config.prodчтобы изменить процесс минификации, тогда я смогу решить проблему. Итак, я проверилwebpack.config.prod файл, и я увидел, что он использует uglifyJsPluginдля минификации. Я изменил конфигурацию, чтобы использоватьterser-webpack-plugin и я получил еще одну ошибку, в которой говорилось, что этот пакет предназначен для webpack@4. В конце концов я использовалterser-webpack-plugin-legacy для моего webpack@3конфигурации, и он работал отлично. Обратите внимание, что мойcreate-react-app был выброшен.

12

Источник

user5354341 06 июн '19 в 09:33

Я решил это, импортировав уменьшенную версию внешней библиотеки. FE для смены socket.io-client

import io from 'socket.io-client';

к

import io from 'socket.io-client/dist/socket.io.js';

3

Источник

user2553436 26 май '20 в 16:35

Для тех, кто имеет эту проблему, где обновление react-scripts не решение, это моя история:

Во-первых, я использую vscode с некоторым плагином автоматического импорта, который автоматически добавляет импорт вверху. Работало нормально... до вчерашнего дня.

Сегодня я запустил сценарий развертывания в своем локальном филиале (последний раз я запускал его на прошлой неделе), и я получил это ужасное сообщение об ошибке, в частности:

Failed to minify the code from this file:

    ./node_modules/re-reselect/src/cache/FifoObjectCache.js:4

Это не имеет смысла, потому что master Сборка работала нормально, и с тех пор я не обновлял свои пакеты.

Безнадежно, я начал строить commit by commit (на самом деле я начал с некоторых из первых, потом, когда он работал, попробовал с другим посередине и т. Д.) В поисках виновника.

И тогда я нашел это!

Плагин автоматического импорта добавил следующий импорт в мой код:

import createCachedSelector from 're-reselect/src/index';

когда это должно быть:

import createCachedSelector from 're-reselect';

Причинение некоторых reselect исходные файлы для компиляции вместо использования уже скомпилированных библиотекой.

TL; DR; Не верьте своему плагину для автоматического импорта. Никогда. Когда-либо.: Facepalm:

3

Источник

user139545 26 апр '19 в 02:33

Я рекомендую удалить любой файл сборки и файл модуля узла.
Удалить файл package-lock.json
В package.json замените"react-scripts"с"react-scripts": "^5.0.1"
бегатьnpm installа потомnpm audit fix --forceчтобы исправить проблемы

Эти вещи сработали для меня.

0

Источник

shardul gawande 08 окт '23 в 10:17

TL;DRудаляет node_modules и возвращает/понижает версию проблемы, создающей зависимость, до ранее работающей версии, поддерживаемой ES5, как в package-lock.json, так и в package.json. Нет необходимости удалять весь файл package-lock.json.

Эта ошибка чаще всего возникает у многих внезапно, когда все работает нормально. Это связано с тем, что все ваши зависимости были обновлены до последней версии . В последнее время большая часть сценариев выполняется с использованием стандартов ES6 и вашегоuglify-jsкод, который может быть более старой версии, не сможет минимизировать этот код.

Теперь, как упоминалось в предыдущих ответах, удаление только package -lock.json и node_modules не сработает . Вам также необходимо сбросить версию обновленной зависимости в файле package.json . Но это будет иметь две проблемы:

Это обновит некоторые другие ваши зависимости до последней версии. Это также может привести к синтаксической ошибке или другим проблемам , связанным с совместимостью .
При этом будет создан новый файл package-lock.json с обновленным деревом зависимостей. Делать это для какой-либо одной проблемы с какой-либо одной зависимостью — не лучший способ решить эту проблему. Причина в том, что если ваш код является частью какой-либо системы контроля версий , то это изменение также отразится там. И в идеале такие изменения в дереве зависимостей должны быть запланированной деятельностью членов команды с тщательным тестированием вашего кода.

Чтобы решить эту проблему, просто верните/понизьте версию в файле package.json и измените версию и URL-адрес загрузки пакета npmjs в разрешенном поле для этой единственной зависимости в файле package -lock.json . Для меня эта проблема возникла из-заreact-lazy-load-image-componentзависимость. Поэтому вместо удаления всего дерева зависимостей я просто удалил node_modules и вернулся к более старой версии ES5 в файлах package.json и package-lock.json.

В package-lock.json я изменил это:

      "react-lazy-load-image-component": {
            "version": "1.5.6",
            "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.6.tgz",
            "integrity": "sha512-M0jeJtOlTHgThOfgYM9krSqYbR6ShxROy/KVankwbw9/amPKG1t5GSGN1sei6Cyu8+QJVuyAUvQ+LFtCVTTlKw==",
            "requires": {
                "lodash.debounce": "^4.0.8",
                "lodash.throttle": "^4.1.1"
            }
        },

К этому:

      "react-lazy-load-image-component": {
            "version": "1.3.2",
            "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.3.2.tgz",
            "integrity": "sha512-LLbsFQwIV4TdlObBYjlJyRSmYMadd8pMOsYmihFAI6nXBgOEYVuRJlq7T0PjT5OWzntV38VvSw+P+NJU7etH3Q==",
            "requires": {
                "lodash.debounce": "^4.0.8",
                "lodash.throttle": "^4.1.1"
            }
        },

0

Источник

user4258776 11 окт '23 в 14:05

Первое изменение по сравнению с package.json. "реагировать-скрипты": "2.0.3",

Удалите package-lock.json (не package.json!) и/или yarn.lock в папке вашего проекта.
Удалите node_modules в папке вашего проекта.
Удалите «eslint» из зависимостей и/или devDependencies в файле package.json в папке вашего проекта.
Запустите npm install или yarn, в зависимости от используемого менеджера пакетов.

0

Источник

user6353145 26 июл '22 в 19:50

Другие вопросы по тегам javascript node.js minify uglifyjs2

user1183252 14 авг '17 в 11:02 2017-08-14 11:02 · Accepted Answer · 2017-08-14 11:02

Я нашел решение!

У меня были некоторые особенности ES6 в моем коде, а именно foreach ~ оператор и сокращенный синтаксис функции. Гадкий не принял это. Мне нужно было заменить это кодом ES5, и теперь оно работает хорошо.

10

Источник

user1183252 14 авг '17 в 11:02