Webpack и ts-loader не преобразуют код TypeScript в правильный ESM JasvaScript (создавайте функцию require вместо функци ⇐ Javascript

[Anonymous]

Я пытаюсь преобразовать файл TypeScript (test.ts) в файл JavaScript ESM с помощью веб-пакета, ts-loader и узла (из NodeJS). Для этой цели я создал файлы webpack.config.js и tsconfig.json и запустил команду npm run build в своем рабочем каталоге. К сожалению, webpack и ts-loader создали файл .js (bundle.js), в котором используется функция CommonJS JavaScript под названием request. Поскольку я настроил узел для ESM JavaScript, он не может выполнить этот файл и отправляет мне следующее сообщение об ошибке:
root@a213537a64f9:/var/www/html# npm run build

> build
> webpack --mode production

asset bundle.js 134 bytes [emitted] [minimized] (name: main)
orphan modules 84 bytes [orphan] 2 modules
./src/test.ts + 2 modules 278 bytes [not cacheable] [built]

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

webpack 5.104.1 compiled successfully in 29118 ms

root@a213537a64f9:/var/www/html# cd dist/
root@a213537a64f9:/var/www/html/dist# node bundle.js

file:///var/www/html/dist/bundle.js:1
(()=>{"use strict";const e=require("@cornerstonejs/core"),{ViewportType:r}=(require("@cornerstonejs/dicom-image-loader"),e.Enums)})();
^
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/var/www/html/package.json' contains "type": "module".To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///var/www/html/dist/bundle.js:1:28
at file:///var/www/html/dist/bundle.js:1:132
at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:122:5)

Node.js v20.18.1

Похоже, что webpack и ts-loader не смогли создать правильный файл Javascript ESM. Как их настроить, чтобы избежать появления этого сообщения об ошибке (т. е.  заменить функцию запроса CommonJS функцией импорта ESM для загрузки модуля @cornerstonejs)?
Это мой файл package.json:
{
"devDependencies": {
"@types/node": "^25.0.3",
"ts-loader": "^9.5.4",
"typescript": "^5.9.3",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"@cornerstonejs/calculate-suv": "^1.1.0",
"@cornerstonejs/core": "^4.15.1",
"@cornerstonejs/dicom-image-loader": "^4.15.1",
"@cornerstonejs/nifti-volume-loader": "^4.15.1",
"@cornerstonejs/tools": "^4.15.1",
"@icr/polyseg-wasm": "^0.4.0",
"dcmjs": "^0.47.1",
"dicomweb-client": "^0.11.2",
"husky": "^9.1.7",
"webpack": "^5.104.1",
"webpack-cli": "^6.0.1"
},
"scripts": {
"build": "webpack --mode production"
},

"type": "module"
}

Это мой файл tsconfig.json:
{
"compilerOptions": {
"outDir": "./dist",
"strict": true,
"module": "nodeNext",
"moduleResolution": "nodeNext",
"target": "es6",
"esModuleInterop": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"lib": [
"es6",
"dom",
"dom.iterable"
],
"sourceMap": true,
"rootDir": "./src",
"noImplicitAny": false,
"strictNullChecks": false,
"types": ["node"],
"allowSyntheticDefaultImports": true,
//"resolveJsonModule": true
},

"exclude":[
"node_modules"
]
}


Это мой файл webpack.config.js:
import path from 'path'
//const __dirname = import.meta.dirname;

import nodeExternals from 'webpack-node-externals'

export default{
entry: "./src/test.ts",
externalsPresets: { node: true },
externals: [nodeExternals()],
output: {
filename: "bundle.js",
path: "/var/www/html/dist" //path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.(mjs|js|ts)$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]

}
}

Это файл TypeScript (test.ts, расположенный в папке src), который я хочу преобразовать:
import type { Types } from '@cornerstonejs/core';
import { RenderingEngine, Enums, init as coreInit } from '@cornerstonejs/core';
import { init as dicomImageLoaderInit } from '@cornerstonejs/dicom-image-loader';

const { ViewportType } = Enums;

А это код, сгенерированный webpack и ts-loader (bundle.js находится в папке dir):
(()=>{"use strict";const e=require("@cornerstonejs/core"),{ViewportType:r}=(require("@cornerstonejs/dicom-image-loader"),e.Enums)})();
 

Подробнее здесь: [url]https://stackoverflow.com/questions/79855987/webpack-and-ts-loader-do-not-convert-typescript-code-to-proper-esm-jasvascript[/url]