Импорт библиотеки компонентов Vue3, которая использует require(...).default для активов, работает в некоторых приложениях, но не в других

Я работаю с несколькими приложениями в Vue3, и мы создали библиотеку компонентов с возможностью повторного использования, которую мы можем импортировать во все наши другие приложения. Некоторые компоненты в библиотеке имеют теги <img>, которые используют динамический атрибут :src, определяемый вычисляемым свойством, которое возвращает require("../whatever.svg").default. Другие теги <img> имеют статический src. Что я заметил, так это то, что когда я импортирую библиотеку в некоторые из наших приложений, все изображения отображаются правильно, а в других изображения из динамических источников не отображаются. Если я обновлю библиотеку, чтобы использовать require("../whatever.svg") без .default, а затем повторно импортирую библиотеку, результаты будут обратными. В приложениях, где работали динамические изображения, они больше не отображаются, а в приложениях, где динамические изображения не загружались, теперь они отображаются корректно. Насколько я знаю, все наши приложения имеют в основном одинаковые настройки и конфигурации веб-пакетов, поэтому я понятия не имею, почему это происходит. Вот примеры того, с чем я работаю:

Компонент с возможностью повторного использования в библиотеке -

<template>
  <img class = "filter-icon" :src = "filterIconPath" alt = "Filter Icon" />
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  active: Boolean,
  disabled: Boolean
});

const filterIconPath = computed(() => {
  if (props.active) {
    if (props.disabled) {
      return require("../assets/icons/FilterDarkGreyLarge.svg").default;
    } else {
      return require("../assets/icons/FilterLightLarge.svg").default;
    }
  } else {
    if (props.disabled) {
      return require("../assets/icons/FilterLightGreyLarge.svg").default;
    }
    return require("../assets/icons/FilterDarkLarge.svg").default;
  }
});
</script>

Этот компонент работает правильно, и изображения загружаются в большинстве наших приложений, однако то, над которым я сейчас работаю, не может загрузить изображение. Вот файл vue.config.js для этого приложения:

process.env.VUE_APP_VERSION = require("./package.json").version;

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "MyApp";
      return args;
    });
    config.module
      .rule("graphql")
      .test(/\.graphql|\.gql$/)
      .use("raw-loader")
      .loader("raw-loader")
      .end();
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.transpileOptions = {
          transforms: {
            dangerousTaggedTemplateString: true,
          },
        };
        return options;
      });
  },

  css: {
    loaderOptions: {
      sass: {
        additionalData: `
              @use "sass:math";
              @import "node_modules/my-components/src/scss/_variables.scss";
              @import "node_modules/my-components/src/scss/_mixins.scss";
              @import "node_modules/my-components/src/scss/_forgeColors.scss";
              @import "node_modules/my-components/src/scss/_forgeButtons.scss";
              @import "@/scss/_variables.scss";
              @import "@/scss/_mixins.scss";
            `,
      },
    },
  },
  transpileDependencies: [],
};

Этот файл, за исключением названия приложения, идентичен файлам vue.config.js других наших приложений, где изображения require(...).default работают правильно.

Я не делаю ничего особенного, чтобы импортировать компонент, это пакет npm, который мы добавляем в package.json. Внутри приложения я использую

<script setup>
import ForgeFilterButton from "my-components/src/components/FilterButton.vue";
</script>

а затем используйте компонент в шаблоне, как обычно. Когда я запускаю приложение локально, компонент загружается со всеми его стилями, но изображение не появляется. Если я вернусь в библиотеку и удалю .default, затем повторно импортирую библиотеку и запущу ее снова, изображение появится правильно. Я совершенно озадачен тем, почему это может происходить, и я надеюсь, что смогу найти решение, отличное от поддержки двух версий нашей библиотеки, одной с .default и одной без.

Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема оказалась в версии веб-пакета. Некоторые из наших приложений были обновлены до более поздних версий, а другие — нет. Обновление до последней версии во всех приложениях устранило эту проблему.

Другие вопросы по теме