WARNING in ./node_modules/lightgallery/css/lightgallery-bundle.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/lightgallery/css/lightgallery-bundle.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/alex/react-lightgallery/node_modules/src/scss/lightgallery-core.scss' file: Error: ENOENT: no such file or directory, open '/home/alex/react-lightgallery/node_modules/src/scss/lightgallery-core.scss'webpack compiled with 16 warnings

Варнинг - не проблема и не влияет на формирование билда для продакшна. Webpack ожидает найти source maps (файлы с расширением .map), связующие скомпилированный CSS с исходными SCSS-файлами. Однако в директории node_modules/lightgallery этих SCSS-файлов (например, _lg-fonts.scss, _lg-mixins.scss и т.д.) нет.

Отчего так происходит?

Вероятно, lightgallery v.2.8.3 поставляется с уже скомпилированным файлом lightgallery-bundle.css. Этот CSS-файл сгенерирован из SCSS-файлов, которые находятся в исходном коде библиотеки на GitHub, но в npm-пакете их нет — лишь итоговый CSS и, возможно, ссылки на source maps.

Webpack через source-map-loader пытается загрузить source maps, указанные в lightgallery-bundle.css, но не находит соответствующие SCSS-файлы, так как они не включены в дистрибутив npm-пакета. Это может быть багом или осознанным решением разработчиков (например, для облегчения пакета).

Предупреждения относятся только лишь к source maps, используемых для отладки (например, чтобы в DevTools видеть исходный SCSS вместо скомпилированного CSS).

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

Отсюда, из этих и им подобных соображений - быстрый способ все исправить (уточню, мой проект на CRA). Может быть, вы прибегнете к нему в аналогичных случаях.

Всё очень не бином Ньютона. Попросту говоря, нам понадобится react-app-rewired.

npm install --save-dev react-app-rewired

И вот мы уже на пороге решения. Всего-то и нужно обновить package.json:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

и создать в той же директории (в корне проекта) файл config-overrides.js.

Правда, надо сказать, с содержимым файла вам придется, возможно, слегка попотеть.
Чтобы подавить предупреждения lightgallery, вы можете попробовать, например, так:

module.exports = function override(config) {
  console.log(config.module.rules);
  // Находим правило для source-map-loader
  const sourceMapLoaderRule = config.module.rules.find(
    (rule) =>
      rule.enforce === "pre" &&
      Array.isArray(rule.use) &&
      rule.use.some((loader) => loader.loader === "source-map-loader")
  );
  // Если правило найдено, добавляем исключение для lightgallery
  if (sourceMapLoaderRule) {
    sourceMapLoaderRule.exclude = [
      ...(sourceMapLoaderRule.exclude || []),
      /node_modules\/lightgallery/,
    ];
  } else {
    // Если правила нет (маловероятно), добавляем его вручную
    config.module.rules.push({
      test: /\.(js|mjs|jsx|ts|tsx|css)$/,
      enforce: "pre",
      use: ["source-map-loader"],
      exclude: [/node_modules\/lightgallery/],
    });
  }

  return config;
};

Или, для начала, так:

module.exports = function override(config) {
  console.log("Original rules:", config.module.rules);
  // Находим правило для source-map-loader
  const sourceMapLoaderRule = config.module.rules.find(
    (rule) =>
      rule.enforce === "pre" &&
      rule.loader && // Проверяем, что loader указан напрямую
      rule.loader.includes("source-map-loader")
  );

  if (sourceMapLoaderRule) {
    // Добавляем исключение для lightgallery
    sourceMapLoaderRule.exclude = [
      ...(sourceMapLoaderRule.exclude || []), // Сохраняем существующие исключения
      /node_modules\/lightgallery/, // Добавляем наше исключение
    ];
    console.log("Updated sourceMapLoaderRule:", sourceMapLoaderRule);
  } else {
    console.log("Source-map-loader rule not found, adding manually");
    config.module.rules.push({
      test: /\.css$/,
      enforce: "pre",
      use: ["source-map-loader"],
      exclude: [/node_modules\/lightgallery/],
    });
  }

  console.log("Updated rules:", config.module.rules);
  return config;
};

Или, может, так..?

module.exports = function override(config) {
  console.log("Original rules:", config.module.rules);

  // Находим существующее правило для source-map-loader
  const sourceMapLoaderRule = config.module.rules.find(
    (rule) =>
      rule.enforce === "pre" &&
      rule.loader &&
      rule.loader.includes("source-map-loader")
  );

  if (sourceMapLoaderRule) {
    // Преобразуем exclude в массив, если это не массив
    const currentExclude = Array.isArray(sourceMapLoaderRule.exclude)
      ? sourceMapLoaderRule.exclude
      : [sourceMapLoaderRule.exclude]; // Если это RegExp, оборачиваем в массив

    // Добавляем исключение для lightgallery
    sourceMapLoaderRule.exclude = [
      ...currentExclude, // Используем преобразованный массив
      /node_modules\/lightgallery/,
    ];
    console.log("Updated sourceMapLoaderRule:", sourceMapLoaderRule);
  } else {
    console.log("Source-map-loader rule not found, adding manually");
    config.module.rules.push({
      test: /\.css$/,
      enforce: "pre",
      use: ["source-map-loader"],
      exclude: [/node_modules\/lightgallery/],
    });
  }

  console.log("Updated rules:", config.module.rules);
  return config;
};

Получилось, ура! на выходе консоли что-то вроде:

...
   enforce: 'pre',
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    test: /\.(js|mjs|jsx|ts|tsx|css)$/,
    loader: '/home/alex/react-lightgallery/node_modules/source-map-loader/dist/cjs.js'
  },
  {
    oneOf: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  }
]
Updated sourceMapLoaderRule: {
  enforce: 'pre',
  exclude: [ /@babel(?:\/|\\{1,2})runtime/, /node_modules\/lightgallery/ ],
  test: /\.(js|mjs|jsx|ts|tsx|css)$/,
  loader: '/home/alex/react-lightgallery/node_modules/source-map-loader/dist/cjs.js'
}
Updated rules: [
  {
    enforce: 'pre',
    exclude: [ /@babel(?:\/|\\{1,2})runtime/, /node_modules\/lightgallery/ ],
    test: /\.(js|mjs|jsx|ts|tsx|css)$/,
    loader: '/home/alex/react-lightgallery/node_modules/source-map-loader/dist/cjs.js'
  },
  {
    oneOf: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object]
    ]
  }
]

Предупреждения ушли! Консоль подтверждает, всё теперь как надо: правило source-map-loader обновлено, и в exclude у нас теперь есть массив с двумя исключениями:

/@babel(?:\/|\\{1,2})runtime/
/node_modules\/lightgallery/

Это значит, что source-map-loader больше не пытается парсить source maps для lightgallery, и варнинги исчезли.

Отлично.