.d.ts-Fehler im Build-Paket nach Lazy Loading wurden eingeführt ⇐ JavaScript

[Guest]

Ich arbeite am React-Paket für ein Designsystem und habe festgestellt, dass einige der verwendeten Komponenten alle .svg-Dateien in der Ausgabe des erstellten Pakets enthalten. Aus diesem Grund betrug meine Paketgröße 4 MB.
Ich habe das verzögerte Laden der Symbole in der Symbolkomponente eingeführt. Das war die einzige Änderung. Dadurch ist das Paket jetzt nicht mehr 1 MB groß.


Überraschenderweise bekomme ich seitdem, wenn ich in meiner konsumierenden App auf die neue Version stoße, jede Menge Fehlermeldungen, die mich über .d.ts-Dateien beschweren.

FEHLER in
./node_modules/@company/package/dist/components/radio/icons/index.d.ts
1:0-54 Modul nicht gefunden: Fehler: Can' './radio-off.svg' in
'PATH_TO_PACKAGE' kann nicht aufgelöst werden. Haben Sie den führenden Punkt in
'resolve.extensions' übersehen? Meinten Sie
'[".",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx" ]' anstelle von
'["", ".wasm", ".mjs", ".js", ".jsx", ".json", ".ts", ".tsx". "]'?
FEHLER in
./node_modules/@company/mypackagename/dist/types/data-activation-api.d.ts
5:7 Modulanalyse fehlgeschlagen: Unerwartetes Token (5:7) Möglicherweise benötigen Sie ein
Geeigneter Lader für die Verarbeitung dieses Dateityps. Derzeit sind keine Lader für die Verarbeitung dieser Datei konfiguriert. Siehe
https://webpack.js.org/concepts#loaders | * Nehmen Sie keine direkten
Änderungen an der Datei vor. | */

Schnittstellenpfade exportieren { | '/organization/{orgId}/data-set/{dataSetId}/traversal/{traversalId}/status':
{ | Parameter: {

FEHLER in
./node_modules/@company/mypackagename/dist/types/data-catalog-api.d.ts
5:7 Modulanalyse fehlgeschlagen: Unerwartetes Token (5:7) Möglicherweise benötigen Sie einen
geeigneten Loader, um diesen Dateityp zu verarbeiten. Derzeit sind keine Loader
für die Verarbeitung dieses Dateityps konfiguriert Datei. Siehe
https://webpack.js.org/concepts#loaders | * Nehmen Sie keine direkten
Änderungen an der Datei vor. | */

Schnittstellenpfade exportieren { | '/organization/{organizationId}/entity/{entityId}/data-fields/{fieldId}':
{ | Parameter: {

FEHLER in
./node_modules/@company/mypackagename/dist/types/data-integration-api.d.ts
5:7 Modulanalyse fehlgeschlagen: Unerwartetes Token (5:7) Möglicherweise benötigen Sie einen
geeigneten Loader, um diesen Dateityp zu verarbeiten. Derzeit sind keine Loader
für die Verarbeitung dieses Dateityps konfiguriert Datei. Siehe
https://webpack.js.org/concepts#loaders | * Nehmen Sie keine direkten
Änderungen an der Datei vor. | */

Schnittstellenpfade exportieren { | '/api/v1/integrations/datasources': { | Parameter: {

FEHLER in
./node_modules/@company/mypackagename/dist/types/theme-interfaces.d.ts
2:12 Modulanalyse fehlgeschlagen: Unerwartetes Token (2:12) Möglicherweise benötigen Sie einen
geeigneten Loader, um diesen Dateityp zu verarbeiten. Derzeit sind keine Loader für die Verarbeitung
konfiguriert diese Datei. Siehe
https://webpack.js.org/concepts#loaders | import
'@mui/material/styles';

import type { spacingScale, UnitsScale } from 'theme'; | deklariere das Modul '@mui/material/styles' { | Schnittstelle TypeText {


Auch hier waren die einzigen Änderungen das verzögerte Laden aus dem Screenshot-Änderungsprotokoll in Icon.tsx .
Meine tsconfig

Code: Select all

{
"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"]
}

Und Webpack-Konfiguration:

Code: Select all

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,
},
};

Mir ist völlig unklar, warum eine solche Änderung zu so vielen (über 300) Fehlern führen kann. Darüber hinaus funktioniert meine konsumierende App, es treten nur CI-Fehler auf, wenn ich sie ausführe, aber wenn ich sie im Browser öffne, ist alles in Ordnung. Die Fehler stammen vom Terminal.
Ich weiß, dass ich das Problem in der konsumierenden App beheben könnte, indem ich Folgendes tue:

Code: Select all

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

Aber ich möchte Kunden des Pakets nicht zu solchen Workarounds und speziellen Konfigurationen zwingen.
Ich habe sogar das vorherige und das aktuelle verglichen Version des Pakets und der Hauptunterschied besteht darin, dass es jetzt eine zusätzliche .mjs-Datei gibt, die meines Wissens korrekt ist, da es sich um die Lazy-Loading-Änderungsdatei handelt.