Проблемы TypeScript при динамической загрузке ⇐ Javascript

[Anonymous]

У меня есть файл со значками, экспортируемый из images.ts:

Код: Выделить всё

export { default as SvgArrow } from './arrow.svg';
export { default as SvgCopy } from './copy.svg';
...
export { default as SvgWater } from './water.svg';

Это часть библиотеки системы дизайна.
Затем мой компонент Icon импортирует значки:

Код: Выделить всё

import * as Icons from '../images';

и при рендеринге устанавливает текущий значок:

Код: Выделить всё

const CurrentIcon = Icons[iconName];

При такой реализации все компоненты в библиотеке, использующей , имели все файлы SVG в комплекте сборки. Из-за этого бандл получился очень большим - около 6 Мб.
Я реализовал динамическую загрузку текущей иконки.

Код: Выделить всё

const [IconComponent, setIconComponent] = useState(
null,
);

useEffect(() => {
const loadIcon = async () => {
const icons = await import('../icons');

setIconComponent(() => icons[iconName]);
};
loadIcon();
}, [iconName]);

Дело в том, что, хотя это работало таким образом, что размер пакета составляет не 700 КБ вместо 6 МБ, TypeScript не работает, а это означает, что в моем потребляющем приложении я получаю массу ошибок, в основном например:

Для обработки этого типа файлов может потребоваться соответствующий загрузчик, в настоящее время
ни один загрузчик не настроен для обработки этого файла. См.
https://webpack.js.org/concepts#loaders

Единственным изменением была динамическая загрузка. Сразу после возврата все работает в моем приложении, но в то же время сборка снова имеет размер 6 МБ.
Я пробовал много решений - волшебные комментарии веб-пакета, JS eval (которые сработали). , но это неправильный подход), лучше типизировать useEffect. Ни один из них не сработал, ошибки TS все те же.
Мой tsconfig:

Код: Выделить всё

{
"compilerOptions": {
"baseUrl": ".",
"target": "es2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"declaration": true,
"outDir": "./dist",
"rootDir": ".",
"declarationDir": "./dist",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"module": "es2020",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"sourceMap": true,
"declarationMap": true,
"jsx": "react-jsx",
"incremental": false,
"paths": {
"components/*": ["components/*"],
"utils/*": ["utils/*"],
},
"plugins": []
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist"]
}

Я испробовал все решения этого вопроса, но ни одно из них не сработало, за исключением JS eval, который обычно считается плохой практикой по соображениям безопасности и производительности.
Я также использую @svgr/webpack в вебпаке, без динамической загрузки мой пакет для дизайн-системы работает без проблем, иконки тоже.
Даже сейчас , со всеми ошибками TS приложение-потребитель работает, если я сделать:

Код: Выделить всё

{
test: /\.d\.ts$/,
loader: 'ignore-loader',
},

но это не то, чего я хочу. Я хочу, чтобы мой пакет дизайн-системы работал без каких-либо проблем с TS и с динамическим импортом значков.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ic-loading