Di chuyển dự án webpack react-typescript sang các mô-đun esm

Tôi có một dự án Typescript dựa trên nodejs, React và đóng gói với Webpack5
codebase có các module server (.ts), module client (.ts, .tsx) và module chung (.ts)
Cho đến nay chưa gặp vấn đề gì khi build
Tôi bắt đầu di chuyển codebase sang các module esm
đã áp dụng các sửa đổi trên package.json và tsconfig.json để hỗ trợ và xuất esm
đã đổi tất cả các tên file từ *.ts sang *.mts, và giữ nguyên *.tsx
tsc buộc tôi phải thay đổi các import để bao gồm các phần mở rộng đầu ra mong đợi
ví dụ, trong module ./src/webapp/mainContextProviders.tsx, để import từ các module typescript:

../common/utils.mts (former ../common/utils.ts)
./Settings/SettingsContext.tsx (former the same)
./callPkgApis.mts (former callPkgApis.ts)

Tôi đã phải chỉnh sửa các import TS commonjs cũ:

import utils from '../common/utils'
import settings from './Settings/SettingsContext'
import { pkgApis } from './callPkgApis'

đến

import utils from '../common/utils.mjs'
import settings from './Settings/SettingsContext.js'
import { pkgApis } from './callPkgApis.mjs'

bây giờ webpack không thể giải quyết những lần nhập đó và kết thúc với

ERROR in ./src/webapp/mainContextProviders.tsx 1:0-43
Module not found: Error: Can't resolve '../common/utils.mjs' in '/path/to/src/webapp'
ERROR in ./src/webapp/mainContextProviders.tsx 1:0-43
Module not found: Error: Can't resolve './Settings/SettingsContext.js' in '/path/to/src/webapp'
ERROR in ./src/webapp/mainContextProviders.tsx 1:0-43
Module not found: Error: Can't resolve './callPkgApis.mjs' in '/path/to/src/webapp'

Làm thế nào tôi có thể sửa được?