Файлы SVG не найдены в импортированном пакете NPM

Я опубликовал пакет NPM, который импортирую в другой проект, над которым я работаю. В этом пакете я использую Webpack, и в компонентах React, которые я использую, используется несколько файлов SVG. Когда я использую этот пакет, я получаю ошибку 404 not found, относящуюся к изображениям SVG.

GET https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/[email protected]/lib/assets/icons/menu-button.svg.js 404 (Not Found)

Обратите внимание, что это файл svg, который, похоже, поступает как файл javascript, что, вероятно, является поведением, которое я не хочу.

Интересно, что когда я загружаю приложение Create React, которое использует только этот пакет, оно загружается без ошибок.

Конфигурация My Webpack включает следующий блок модулей:

module: {
rules: [    
  {
    test: /\.jpe?g$|\.gif$|\.png$|^(?!.*\.inline\.svg$).*\.svg$/,
    loader: 'url'
  },
  {
    test: /\.css$/,
    use: [ 'style-loader', 'css-loader' ]
  },
  {
    use: "babel-loader",
    test: /\.js$/,
    exclude: /node_modules/
  },
  {
    use: ["file-loader"],
    test: /\.(png|jpg|gif)$/
  },
  {
    use: ["url-loader"],
    test: /\.(eot|ttf|woff|woff2)$/
  }
]

}

Я безуспешно пытался включить svg в загрузчик URL, а также в загрузчик файлов.

В этом пакете есть один основной компонент React, который состоит из других компонентов, содержащих файлы svg. Я импортирую свой пакет и использую этот компонент. Приложение не загружается и выдает ошибку svg 404, как показано выше. Кроме того, в консоли есть это сообщение об ошибке:

system.src.js:5123 Uncaught (in promise) Error: (SystemJS) Error: XHR error (404 Not Found) loading https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/[email protected]/lib/assets/icons/menu-button.svg.js
Error loading https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/[email protected]/lib/assets/icons/menu-button.svg.js as "../../assets/icons/menu-button.svg" from https://localhost:8080/apps/abc/jspm_packages/npm/@myScope/[email protected]/lib/react/components/SomeReactComponent.js

Вероятно, проблема связана с путем, который я использую в своем компоненте React, который содержит файл svg. Компонент принимает svg следующим образом (потому что я храню все мои файлы svg в их собственной папке с активами):

var MenuButtonImg = require('../../assets/icons/menu-button.svg');

Этот относительный путь кажется проблемой, но я не уверен, является ли это основной причиной моей проблемы. Я хотел бы знать, как я могу устранить эту ошибку 404 и успешно загрузить свой компонент в свой проект.

попробуйте использовать react-svg-loader для импорта svg как встроенного svg

Orkhan Jafarov 20.07.2018 17:05

@OrkhanJafarov Я пытаюсь использовать это сейчас, но теперь получаю эту ошибку в консоли: SomeComponent.js: 17 Неперехваченная ошибка: не удается найти модуль «response-svg-loader! ../../ assets / icons / menu-button. svg "

Bob Smith 20.07.2018 20:20

похоже, что он не установлен, попробуйте npm i --save react-svg-loader или очистите node_modules и переустановите все снова

Orkhan Jafarov 22.07.2018 10:18

Я решил просто преобразовать SVG в реагирующие компоненты, поскольку это было проще, чем с этим иметь дело. Теперь я не могу заставить свой CSS переопределить стили компонентов

Bob Smith 25.07.2018 19:24

react-svg-loader "преобразует SVG в компоненты реакции", хотя

Orkhan Jafarov 26.07.2018 21:16

Что ж, я сделал это сейчас вручную, и когда я публикую этот пакет и пытаюсь его использовать, похоже, что он не может загрузить файлы cass, поскольку пытается импортировать его как файл JS.

Bob Smith 26.07.2018 21:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
1 117
0

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