Github Actions – ошибка импорта SVG как компонента React

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

Github Actions – ошибка импорта SVG как компонента React

import ThemeDarkIcon from "shared/assets/icons/theme-dark.svg";
import ThemeLightIcon from "shared/assets/icons/theme-light.svg";

declare module '*.svg' {
  import React from 'react';

  const SVG: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  export default SVG;
}

export function buildSvgLoader() {
    return {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }
}

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

Для решения проблемы с импортом SVG как компонента React в вашем приложении на React и Webpack, которое работает локально, но вызывает ошибку при сборке в GitHub Actions, вам нужно убедиться, что конфигурация сборки одинаково настроена как локально, так и на CI.

1. Проверьте зависимости: Убедитесь, что у вас установлены необходимые пакеты в вашем проекте. Для работы с SVG вам потребуются следующие зависимости:

   npm install --save-dev @svgr/webpack
   npm install --save-dev webpack webpack-cli

2. Проверьте конфигурацию Webpack: Ваша конфигурация Webpack должна включать загрузчик для SVG файлов. Ваша функция buildSvgLoader выглядит правильно, но убедитесь, что она действительно подключена к вашей конфигурации Webpack. Вам нужно добавить её в массив правил обработки:

   const path = require('path');
   
   module.exports = {
      module: {
          rules: [
              {
                  test: /\.svg$/,
                  use: ['@svgr/webpack'],
              },
              // другие правила...
          ],
      },
      // остальная конфигурация...
   };

3. Настройка CI/CD через GitHub Actions: Убедитесь, что в вашем файле конфигурации GitHub Actions установлены правильные версии Node.js и зависимости. Пример базового файла действия GitHub:

   name: Build and Deploy
   
   on:
    push:
      branches:
        - main
   
   jobs:
    build:
      runs-on: ubuntu-latest
   
      steps:
      - name: Checkout code
        uses: actions/checkout@v2
   
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'  # Укажите вашу версию Node.js
   
      - name: Install dependencies
        run: npm install
   
      - name: Build
        run: npm run build

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

   - name: Cache node modules
    uses: actions/cache@v2
    with:
      path: node_modules
      key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

5. Логи ошибок: Если проблема не решается, обязательно проверьте логи ошибок в GitHub Actions. Может быть полезно добавить шаг для просмотра логов, например:

   - name: Show npm logs
    run: cat npm-debug.log || true

6. Идентификация проблемы: Если ошибка остаётся, попытайтесь идентифицировать, в чем именно проблема. Причиной может быть разное поведение в различных средах (локально и в CI). Убедитесь, что версии Node.js и npm одинаковые в обеих средах.

Следуя этим шагам, вы сможете устранить ошибку импорта SVG как компонента React в вашем приложении и обеспечить успешную сборку как локально, так и в GitHub Actions.