Плагин "externalize-deps" был вызван этим импортом, Object.defineProperty(exports, "__esModule", {

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Возможные решения
Заключение

Вопрос или проблема

У меня возникла проблема после сборки React в Inertia с Laravel с использованием Vite. Сборка прошла успешно, но при запуске в браузере возникла проблема Плагин “externalize-deps” был активирован этим импортом Object.defineProperty(exports, “__esModule”, {

Вот моя конфигурация

vite.config.ts

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy'
import babel from 'vite-plugin-babel'
import replace from '@rollup/plugin-replace';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            refresh: true,
        }),
        react(),
        legacy({
            targets: ['defaults', 'not IE 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        }),
        babel({
            babelConfig: {
                babelrc: false,
                configFile: false,
                plugins: ['@babel/plugin-transform-runtime'],
            }
        }),
        replace({
            'Object.defineProperty(exports, "__esModule", { value: true });':
                'Object.defineProperty(exports || {}, "__esModule", { value: true });',
            delimiters: ['\n', '\n'],
            preventAssignment: true,
        }),
    ],
});

package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@headlessui/react": "^2.0.0",
        "@inertiajs/react": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@types/node": "^18.19.57",
        "@types/react": "^18.3.11",
        "@types/react-dom": "^18.0.10",
        "@types/react-speech-recognition": "^3.9.5",
        "@vitejs/plugin-react": "^4.2.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.0",
        "nanoid": "^5.0.7",
        "postcss": "^8.4.31",
        "react": "^18.3.1",
        "react-dom": "^18.2.0",
        "tailwindcss": "^3.2.1",
        "typescript": "^5.0.2",
        "vite": "^5.0"
    },
    "dependencies": {
        "@babel/plugin-transform-modules-commonjs": "^7.25.7",
        "@babel/plugin-transform-runtime": "^7.25.7",
        "@rollup/plugin-replace": "^6.0.1",
        "@vitejs/plugin-legacy": "^5.4.2",
        "openai": "^4.68.1",
        "react-circular-progressbar": "^2.1.0",
        "react-countdown": "^2.3.6",
        "react-loading": "^2.0.3",
        "react-responsive-modal": "^6.4.2",
        "react-speech-recognition": "^3.10.0",
        "regenerator-runtime": "^0.14.1",
        "rodal": "^2.1.0",
        "vite-plugin-babel": "^1.2.0",
        "vite-plugin-symfony": "^7.0.4"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "node",
        "jsx": "react",
        "rootDir": "./resources/js",
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "allowSyntheticDefaultImports": true,
        "paths": {
            "@/*": [
                "./resources/js/*"
            ]
        },
        "types": [
            "vite/client"
        ],
        "typeRoots": [
            "./node_modules/@types",
            "./@types"
        ]
    },
    "include": [
        "./resources/js/**/*"
    ]
}

Ладно, возможно, удаление "type": "module", из package.json поможет, но у меня возникла другая проблема с другой библиотекой: “laravel-vite-plugin” разрешен как ESM файл.

Так что решение в том, что в package.json нужно "type": "module",, что противоречит моему предыдущему решению, помогите 🙁

Ответ или решение

Кажется, вы столкнулись с проблемой конфигурации в проекте на React с использованием Laravel и Vite. Ошибка, с которой вы имеете дело, связана с плагином externalize-deps, который срабатывает в результате импорта, что вызывает определенные проблемы на этапе сборки проекта. Давайте детально проанализируем проблему и предложим решение.

Проблема

Ошибка, с которой вы столкнулись, возникает из-за конфликта между использованием модуля ECMAScript (ESM) и CommonJS. Ваш текущий файл package.json указывает "type": "module", что подразумевает использование ESM для всех файлов в вашем проекте. Однако, чтобы использовать некоторые библиотеки, которые ожидают CommonJS, может потребоваться их дополнительная настройка или преобразование.

Когда Vite пытается отобразить импорт, использующий Object.defineProperty(exports, "__esModule", {...}), он может не знать, как правильно обработать модуль из-за несовместимости между ESM и CommonJS, что приводит к активации плагина externalize-deps.

Возможные решения

Удаление "type": "module": Хотя это кажется решением, оно приводит к другим конфликтам, как упомянуто, когда laravel-vite-plugin требуется быть модулем ESM. Это не является оптимальным решением, так как может затронуть другие зависимости.
Конвертация библиотек: Вы можете использовать Babel для преобразования зависимостей, созданных с помощью CommonJS, в формат ESM, который требуется для вашего проекта. Это можно сделать с помощью плагина @babel/plugin-transform-modules-commonjs. Убедитесь, что он подключён и правильно настроен в вашем vite.config.ts.

babel({
    babelConfig: {
        plugins: ['@babel/plugin-transform-modules-commonjs'],
    }
})

Разделение конфигурации сборки: Если у вас есть библиотеки, которые не поддерживают ESM, возможно, имеет смысл создать отдельную конфигурацию для этих библиотек или использовать прослойку для решения, которая будет обрабатывать модули, зависящие от CommonJS.
Настройка Rollup: Плагин replace в вашей конфигурации Vite может быть не самым оптимальным способом решения проблемы с модулями. Попробуйте исключить модули, которые вызывают конфликты, из сборки Vite и подвергнуть их трансформации через другие инструменты.

Заключение

Проблема интеграции ESM и CommonJS в проекте может быть сложной, но с правильной настройкой инструментов и конфигураций можно достичь стабильной работы всего проекта. Убедитесь, что все ваши зависимости совместимы с учетом, какая конфигурация используется. Кроме того, возможно, стоит рассмотреть обновление библиотек до последних версий, поскольку многие из них активно поддерживают ESM и, возможно, уже устранили подобные проблемы в новых релизах.

Если у вас остались вопросы или необходима дополнительная помощь, не стесняйтесь обратиться за интересующими вас деталями.

Плагин “externalize-deps” был вызван этим импортом, Object.defineProperty(exports, “__esModule”, {

Вопрос или проблема

Ответ или решение

Проблема

Возможные решения

Заключение