Nx React — активы не могут быть разрешены
Я работаю над монорепозиторием nx, в котором есть несколько библиотек и 2 приложения.
Файловые структуры
приложения
\--апи
\--воронка (реакция с помощью веб-пакета)
\--api-e2e
\--воронка-e2e
библиотеки
\--воронка
\----страницы
\--поделился
\----активы
\-------источник
\--------библиотека
\----------'некоторые ресурсы .tsx' (файлы лотереи)
\--------активы
\----------изображения
\-------------**/*.(png|webp|gif|svg) (все остальные активы)
Что ожидается
В моих библиотеках и в моем приложении я хотел бы использовать активы как таковые:import imageName from '/assets/images/<some-image-folder>/<some-image-name>.<ext>';
Для всех svg, png, jpeg и т. д.
для SVG: import { ReactComponent from imageName } from '/assets/images/<some-image-folder>/<some-image-name>.svg';
Проблема
Мои настоящие проблемы заключаются в том, что когда я создаю приложение-воронку, nx запускает воронку: build --verbose
мои активы, кажется, загружены в кеш, но все активы возвращают: модуль не найден: Error: Can't resolve '/assets/images/<some-image-folder>/<some-image-name>.<ext>' from '<whatever-lib>/<main-app>'
Да, я использую /assets/images Поскольку я использую функциональность angular, чтобы «обслуживать» активы для /assets/images
Какая у меня конфигурация
#Отчет NX
Узел: 16.16.0 ОС: darwin x64 npm: 9.2.0
nx: 15.6.0
@nrwl/angular: не найдено
@nrwl/cypress: 15.6.0
@nrwl/detox: не найдено
@nrwl/devkit: 15.6.0
@nrwl/esbuild: не найдено
@nrwl /eslint-plugin-nx: 15.6.0
@nrwl/expo: не найдено
@nrwl/express: 15.6.3
@nrwl/jest: 15.6.0
@nrwl/js: 15.6.0
@nrwl/linter .
@nrwl/react: 15.6.0
@nrwl/react-native: не найдено
@nrwl/rollup: не найдено
@nrwl/schematics: не найдено
@nrwl/storybook: не найдено
@nrwl/web: не найдено Найдено
@nrwl/webpack: 15.6.3
@nrwl/workspace: 15.6.0
@nrwl/vite: не найдено
typescript: 4.8.4
#приложение/воронка/проект.json
Мои ресурсы импортируются через основное приложение, так как я не создаю никаких дополнительных библиотек, вот селектор :
{
"input": "libs/shared/assets/src/assets/images",
"glob": "**/*",
"output": "assets/images"
}
#приложение/воронка/webpack.config.js
Не удалось импортировать весь код из-за ошибки StackOverflow, но, говоря простым языком, я добавил поддержку svgr, загрузчик файлов и загрузчик URL
module: {
rules: [
{
test: /\.(webp|png|gif|jpe?g)$/i
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
{
test: /\.svg$/,
use: [
'@svgr/webpack',
'url-loader'
]
}
],
}
Объяснение того, что я пробовал до сих пор
#1первая попытка Я использовал функциональность angular для импорта ресурсов при сборке, как показано в верхней конфигурации с помощью селектора.
#2-я попытка Я использовал copy-webpack-plugin для копирования статических ресурсов в «/assets/» без успеха.
#3-я попытка
Добавил путь к основному tsconfig.base.json "@myapp/assets/*" : ["libs/shared/assets/src/assets/**/*"]
и пытался обслуживать активы как таковые: «@myapp/assets//».
#4-я попытка
Решение, которое работает, но не оптимизировано для моего рабочего процесса, состоит в том, чтобы поместить каждый актив рядом с его зависимостями...
Это отвратительно, так как мне нужно дублировать активы, которые подвержены множеству изменений.
Пожалуйста помоги.
Вот небольшое тестовое репо: https://github.com/Sosumappu/assets-monorepo-test
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что касается вашего проекта, это не актив pb, а проблема с загрузкой изображений svg.
У меня получилось загрузить.
Сначала обновите свой проект nx с nx 15.6.0 до nx 15.6.3 :
npx nx мигрировать последний
Вы допустили ошибку, замените apple-pay.svg на applepay.svg в своем проекте
измените цвет вашего файла svg на красный, мы его не видим (белый на белом фоне).
отредактируйте webpack.config.js следующим образом:
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
// Nx plugins for webpack.
module.exports = composePlugins(
withNx({
nx: {
svgr: true,
},
}),
withReact({ svgr: true }),
(config) => {
return config;
}
);
общий-ui.tsx
import styled from 'styled-components';
//Static Import
import Logo from '@github-test/shared/assets';
export const ApplePayIcon = () => {
return <Logo />;
};
библиотеки/общие/активы/src/index.ts :
import Logo from '-!@svgr/webpack!./assets/images/applepay.svg';
export default Logo;
здесь вы можете console.info (логотип), вы увидите, что он создает компонент реакции
У меня получилось загрузить.
Это хорошо работает в моем основном проекте, но по какой-то причине этот импорт не может быть стилизован, кроме того, у меня около 200 ресурсов, включенные файлы png дают эти ошибки. Должен ли я использовать библиотеку ресурсов в качестве оболочки, чтобы экспортировать их все? Довольно утомительно импортировать экспорт всех svgs... Если у вас есть обходной путь, было бы здорово
Нет проблем с использованием jpg или png в библиотеке. Вы можете попробовать. к сожалению, по неизвестной причине на данный момент для svg я не нашел другого решения. можно попробовать какой-нибудь плагин, например, реагировать на загрузчик svg. или переключитесь на сборку vite с плагином vite copy.
Я сделал описанную выше настройку для моих 250 ~ активов, и это сработало, большое спасибо!
Привет, так что я действительно следовал этому рецепту, как и многие другие, такие как juristr.com/blog/2020/05/nx-libs-with-assets или этот github.com/nrwl/nx/issues/208 . .. Приятным моментом является то, что при создании тестового монорепозитория я получил больше информации об ошибке, но не знаю, как ее исправить. Вот репо: github.com/Sosumappu/assets-monorepo-test. вы можете получить ошибку на
npx nx build git-test -verbose. Спасибо за помощь в отношении /assets/, возможно, вы правы, поскольку я видел разные виды ошибок в зависимости от «./assets/» или «/assets/».