ARTICLE AD BOX
I am trying to convert a TypeScript file (test.ts) into an ESM JavaScript file (bundle.js) via webpack, ts-loader, and node (from NodeJS). For this purpose, I created a webpack.config.js and tsconfig.json files and launched the command npm run build in my working directory. Unfortunately, I got the following error message when I executed the generated ESM JavaScript file in node:
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.1It appears that webpack and ts-loader are unable to generate a proper ESM JavaScript code to import the Enums module (and other module such as Type, RenderingEngine, and init) from the @cornerstonejs/core module. Node interprets the @cornerstonejs module as a CommonJS module (However, @cornerstonejs is written in ESM JavaScript code and TypeScript to the best of my knowledge). How can I configure my webpack.config.js and tsconfig.json to address this issue?
This is my package.json file:
{ "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" }This is my webpack.config.js file:
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"] }This is the tsconfig.json file:
{ "compilerOptions": { "outDir": "./dist", "strict": true, "module": "NodeNext", "moduleResolution": "NodeNext", "isolatedModules": true, "target": "es2022", "esModuleInterop": true, "skipLibCheck": true, "allowJs": true, "checkJs": false, "verbatimModuleSyntax": true, "moduleDetection": "force", "lib": [ "es2022", "dom" ], "sourceMap": false, "rootDir": "./", "noImplicitAny": false, "strictNullChecks": false, "types": ["node"], "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "declaration": true, "useDefineForClassFields": false }, "exclude":[ "node_modules" ] }This is the TypeScript file (test.ts located in the folder src) that I want to convert:
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;And this is the code generated by webpack and ts-loader (bundle.js located in the dir folder):
import{Enums as o}from"@cornerstonejs/core";import"@cornerstonejs/dicom-image-loader";const{ViewportType:r}=o;