Migrare un progetto webpack react-typescript ai moduli ESM
Ho un progetto Typescript basato su nodejs, React e bundle con Webpack5
il codebase ha moduli server (.ts), moduli client (.ts, .tsx) e moduli comuni (.ts)
Finora non ho avuto problemi a buildare
Ho iniziato a migrare il codebase ai moduli esm
ho applicato correzioni su package.json e tsconfig.json per supportare e generare esm
ho cambiato tutti i nomi dei file da *.ts a *.mts, lasciando *.tsx così com'è
tsc mi ha costretto a cambiare gli import per includere le estensioni di output previste
ad esempio nel modulo ./src/webapp/mainContextProviders.tsx, per importare dai moduli typescript:
../common/utils.mts (former ../common/utils.ts)
./Settings/SettingsContext.tsx (former the same)
./callPkgApis.mts (former callPkgApis.ts)
Ho dovuto modificare le importazioni TS CommonJS legacy:
import utils from '../common/utils'
import settings from './Settings/SettingsContext'
import { pkgApis } from './callPkgApis'
a
import utils from '../common/utils.mjs'
import settings from './Settings/SettingsContext.js'
import { pkgApis } from './callPkgApis.mjs'
ora webpack non è in grado di risolvere quegli import e termina con
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'
Come posso sistemare ?