Webpack und Ts-Loader können keinen richtigen ESM-JavaScript-Code generieren, um ein Modul zu importieren und in Node au ⇐ JavaScript

[Anonymous]

Ich versuche, eine TypeScript-Datei (test.ts) über Webpack, ts-loader und Node (von NodeJS) in eine ESM-JavaScript-Datei (bundle.js) zu konvertieren. Zu diesem Zweck habe ich die Dateien webpack.config.js und tsconfig.json erstellt und den Befehl npm run build in meinem Arbeitsverzeichnis gestartet. Leider habe ich die folgende Fehlermeldung erhalten, als ich die generierte ESM-JavaScript-Datei im Knoten ausgeführt habe:

Code: Select all

root@a213537a64f9:/var/www/html# npm run build

> build
> webpack --mode production

asset bundle.js 110 bytes [compared for emit] [javascript module] [minimized] (name: main)
orphan modules 84 bytes [orphan] 2 modules
./src/test.ts + 2 modules 278 bytes [not cacheable] [built] [code generated]
webpack 5.104.1 compiled successfully in 30010 ms

root@a213537a64f9:/var/www/html# node ./dist/bundle.js
file:///var/www/html/dist/bundle.js:1
import{Enums as o}from"@cornerstonejs/core";import"@cornerstonejs/dicom-image-loader";const{ViewportType:r}=o;
^^^^^
SyntaxError: Named export 'Enums' not found. The requested module '@cornerstonejs/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@cornerstonejs/core';
const {Enums: o}from"@cornerstonejs/core";import"@cornerstonejs/dicom-image-loader";const{ViewportType:r} = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:146:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:229:5)
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

Es scheint, dass Webpack und TS-Loader keinen richtigen ESM-JavaScript-Code generieren können, um das Enums-Modul aus dem @cornerstonejs/core-Modul zu importieren. Node interpretiert das @cornerstonejs-Modul als CommonJS-Modul (allerdings ist @cornerstonejs nach meinem besten Wissen in ESM-JavaScript-Code und TypeScript geschrieben). Wie kann ich meine
webpack.config.js und tsconfig.json konfigurieren, um dieses Problem zu beheben?
Dies ist meine package.json-Datei:

Code: Select all

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

Dies ist meine webpack.config.js-Datei:

Code: Select all

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({ importType: 'module' })],
experiments: {outputModule: true,},
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"]

}

Dies ist die TypeScript-Datei (test.ts im Ordner src), die ich konvertieren möchte:

Code: Select all

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;

Und dies ist der von Webpack und TS-Loader generierte Code (bundle.js befindet sich im Dir-Ordner):

Code: Select all

import{Enums as o}from"@cornerstonejs/core";import"@cornerstonejs/dicom-image-loader";const{ViewportType:r}=o;