Я опубликовал пакет 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 и успешно загрузить свой компонент в свой проект.
@OrkhanJafarov Я пытаюсь использовать это сейчас, но теперь получаю эту ошибку в консоли: SomeComponent.js: 17 Неперехваченная ошибка: не удается найти модуль «response-svg-loader! ../../ assets / icons / menu-button. svg "
похоже, что он не установлен, попробуйте npm i --save react-svg-loader или очистите node_modules и переустановите все снова
Я решил просто преобразовать SVG в реагирующие компоненты, поскольку это было проще, чем с этим иметь дело. Теперь я не могу заставить свой CSS переопределить стили компонентов
react-svg-loader "преобразует SVG в компоненты реакции", хотя
Что ж, я сделал это сейчас вручную, и когда я публикую этот пакет и пытаюсь его использовать, похоже, что он не может загрузить файлы cass, поскольку пытается импортировать его как файл JS.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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