Named export not found error with upgrade to Vite 5 because of lexical packages still being CJS (instead of ESM)

[umaranis]

Sample error - this error occurs on every import from a lexical package

Error when evaluating SSR module /@fs/Users/umar/Documents/Projects/lexical/svelte-lexical/packages/svelte-lexical/src/components/toolbar/BlockFormatDropDown/HeadingDropDownItem.svelte: failed to import "@lexical/selection"
|- SyntaxError: [vite] Named export '$setBlocksType' not found. The requested module '@lexical/selection' 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 '@lexical/selection';
const {$setBlocksType} = pkg;

at analyzeImportedModDifference (file:///Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.0.11/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:50953:19)
at nodeImport (file:///Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.0.11/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:50904:9)
at async ssrImport (file:///Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.0.11/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:50799:24)
at async eval (/Users/umar/Documents/Projects/lexical/svelte-lexical/packages/svelte-lexical/src/components/toolbar/BlockFormatDropDown/HeadingDropDownItem.svelte:8:31)
at async instantiateModule (file:///Users/umar/Documents/Projects/lexical/svelte-lexical/node_modules/.pnpm/vite@5.0.11/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:50861:9)

[umaranis]

Vite believes it is not their issue. NodeJS is not able to resolve the CJS module, so Vite5 can't do anything about it.

vitejs/vite#14332 [CJS named imports in an ESM library]

[umaranis]

There is an open lexical issue to move it from CJS to ESM
facebook/lexical#1707

[umaranis]

A workaround to resolve this issue is to change the import statement from

import {exportFile} from '@lexical/file';

to

import pkgfile from '@lexical/file';
const {exportFile} = pkgfile;

[umaranis]

Here is the regular expressions to assist with conversion presented in the last comment:
Use VSCode find and replace:

Step-1 - ignore type import manually
find: import\s+(\{[^}]+\})\s+from\s+'lexical';\n?
replace: import pkgLx from 'lexical';\nconst $1 = pkgLx;

Step-2 - ignore type import manually
find: import\s+(\{[^}]+\})\s+from\s+'@lexical\/((\w+)-?\w*)';\n?
replace: import pkg$3 from '@lexical/$2';\n const $1 = pkg$3;

Step-3 - have to keep refreshing and running it till all instances are covered
find: const\s+\{(\s*.*?(?:\$\w+:\s+\w+,\s+)*)(\$\w+)\s+as(\s+\w+),?([\s\S]*?)\}\n?
replace: const { $1 $2:$3, $4 }

[umaranis]

resolved with 0.4.0