Ошибки .d.ts в пакете сборки после отложенной загрузки ⇐ Javascript

[Anonymous]

Я работаю над пакетом React для системы дизайна и заметил, что некоторые из используемых компонентов имеют все файлы .svg в выходных данных встроенного пакета. Из-за этого размер моего пакета составил 4 МБ.
Я ввел отложенную загрузку значков в компоненте Icon. Это было единственное изменение. Благодаря этому размер пакета теперь составляет не 1 МБ.


Удивительно, но с тех пор, когда я натыкаюсь на новую версию в своем потребляющем приложении, я получаю массу ошибок с жалобами на файлы .d.ts.

ОШИБКА в
./node_modules/@company/package/dist/comComponents/radio/icons/index.d.ts
1:0-54 Модуль не найден: Ошибка: Can' t разрешить './radio-off.svg' в
'PATH_TO_PACKAGE' Вы пропустили ведущую точку в
'resolve.extensions'? Вы имели в виду
'[".",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx" ]' вместо
'["",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx "]'?
ОШИБКА в
./node_modules/@company/mypackagename/dist/types/data-activation-api.d.ts
5:7 Ошибка анализа модуля: неожиданный токен (5:7) Возможно, вам понадобится
соответствующий загрузчик для обработки этого типа файла, в настоящее время ни один загрузчик
не настроен для обработки этого файла. См.
https://webpack.js.org/concepts#loaders | * Не вносите прямые
изменения в файл. | */

экспорт путей к интерфейсу { | '/organization/{orgId}/data-set/{dataSetId}/traversal/{traversalId}/status':
{ | параметры: {

ОШИБКА в
./node_modules/@company/mypackagename/dist/types/data-catalog-api.d.ts
5:7 Ошибка анализа модуля: неожиданный токен (5:7) Для обработки этого типа файла может потребоваться
подходящий загрузчик, в настоящее время ни один загрузчик
не настроен для обработки этого файла. См.
https://webpack.js.org/concepts#loaders | * Не вносите прямые
изменения в файл. | */

экспорт путей к интерфейсу { | '/organization/{organizationId}/entity/{entityId}/data-fields/{fieldId}':
{ | параметры: {

ОШИБКА в
./node_modules/@company/mypackagename/dist/types/data-integration-api.d.ts
5:7 Ошибка анализа модуля: неожиданный токен (5:7) Для обработки этого типа файла может потребоваться
подходящий загрузчик, в настоящее время ни один загрузчик
не настроен для обработки этого файла. См.
https://webpack.js.org/concepts#loaders | * Не вносите прямые
изменения в файл. | */

экспорт путей к интерфейсу { | '/api/v1/integrations/datasources': { | параметры: {

ОШИБКА в
./node_modules/@company/mypackagename/dist/types/theme-interfaces.d.ts
2:12 Ошибка анализа модуля: неожиданный токен (2:12) Вам может понадобиться
подходящий загрузчик для обработки этого типа файла, в настоящее время ни один загрузчик
не настроен для обработки этого файла. файл. См.
https://webpack.js.org/concepts#loaders | import
'@mui/material/styles';

тип импорта { spacingScale, unitScale } из 'theme'; | объявить модуль '@mui/material/styles' { | интерфейс TypeText {


Опять же, единственными изменениями, которые произошли, была ленивая загрузка из журнала изменений скриншота в Icon.tsx .
Мой tsconfig

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

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

И конфигурация веб-пакета:

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

const path = require('path');
const glob = require('glob');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { getEntries } = require('./getEntries');

module.exports = {
entry: getEntries(),
mode: 'production',
output: {
path: path.resolve(__dirname, 'dist'),
filename: (pathData) => {
const name = pathData.chunk.name;
if (name === 'theme') {
return 'theme/index.js';
}

return `${name}.js`;
},
libraryTarget: 'module',
globalObject: 'this',
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
typescript: true,
ref: true,
svgProps: {
role: 'img',
width: '24',
height: '24',
fill: 'currentColor',
},
},
},
],
},
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
alias: {
components: path.resolve(__dirname, 'components'),
theme: path.resolve(__dirname, 'theme'),
images: path.resolve(__dirname, 'images'),
types: path.resolve(__dirname, 'types'),
},
},
externals: {
react: 'react',
'react-dom': 'react-dom',
'@mui/material': '@mui/material',
'@mui/material/styles': '@mui/material/styles',
'@emotion/react': '@emotion/react',
'@emotion/styled': '@emotion/styled',
next: 'next',
},
optimization: {
minimizer: [
new TerserPlugin(),
],
},
plugins: [new CleanWebpackPlugin()],
experiments: {
outputModule: true,
},
};

Я совершенно не понимаю, почему такое изменение может привести к такому большому количеству (более 300 ошибок). Более того - мое приложение-потребитель работает, когда я его запускаю, речь идет только об ошибках CI, но когда я открываю его в браузере, все в порядке. Ошибки происходят из терминала.
Я знаю, что могу исправить это в потребляющем приложении, выполнив следующие действия:

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

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

Но я не хочу заставлять пользователей пакета использовать такие обходные пути и специальные настройки.

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