Zoeken op website

Migreer webpack react-typescript project naar esm-modules


Ik heb een Typescript-project gebaseerd op nodejs, React en gebundeld met Webpack5
de codebase heeft servermodules (.ts), clientmodules (.ts, .tsx) en gemeenschappelijke modules (.ts)
Tot nu toe had ik geen problemen met bouwen
Ik ben begonnen met het migreren van de codebase naar esm-modules
correcties toegepast op package.json en tsconfig.json om esm te ondersteunen en uit te voeren
alle bestandsnamen veranderd van *.ts naar *.mts, en *.tsx ongewijzigd gelaten
tsc dwong me om imports te wijzigen om de verwachte output-extensies op te nemen
bijv. in de module ./src/webapp/mainContextProviders.tsx, om te importeren van typescript-modules:

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

Ik moest legacy CommonJS TS-imports aanpassen:

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

naar

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

nu kan webpack die imports niet oplossen en stopt met

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'

Hoe kan ik dit repareren?