将 webpack react-typescript 项目迁移到 esm 模块

Question

我有一个基于 nodejs、React 并与 Webpack5 捆绑的 Typescript 项目
代码库有服务器模块（.ts）、客户端模块（.ts、.tsx）和通用模块（.ts）
到目前为止，构建没有任何问题
我开始将代码库迁移到 esm 模块
对package.json和tsconfig.json应用更正以支持和 Z78E6221F6393D135DZ681CE63
将所有文件名从*.ts更改为*.mts ，并将*.tsx原样
tsc 强迫我更改导入以包括预期的 output 扩展
例如在模块./src/webapp/mainContextProviders.tsx中，从 typescript 模块导入：

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

我不得不修改旧的 commonjs TS 导入：

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

至

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

现在 webpack 无法解决这些导入和退出问题

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'

我该如何解决？