Feature request: Convert Sakai to a TypeScript and Tauri template

[GuanglinDu]

As the static typing enhancement of TypeScript (TS) helps us create much more robust, ease-of-maintenance, IDE-friendly software than JavaScript (JS) does, I'd like to convert Sakai to be TS-based.

At the same time, the Rust-based Tauri 2 framework is strikingly small and blazingly fast, I've successfully converted a pure JS Vue demo project to a Tauri 2 one. This is very easy. Please see Manual Setup (Tauri CLI).

Now I want to try converting Sakai both a Tauri 2 and TS platform. There're two options I have:
(1/2) Modify the whole Sakai code as did Use Typescript in Existing Vue 3 Project. I failed till now. The error message follows:

PS D:\repo-tauri\gtlab> npm run dev

> [email protected] dev
> vite

✘ [ERROR] "@primevue/auto-import-resolver" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/esbuild/lib/main.js:1225:27:
      1225 │         let result = await callback({
           ╵                            ^

    at file:///D:/repo-tauri/gtlab/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66644:23
    at requestCallbacks.on-resolve (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:1225:28)
    at handleRequest (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:647:17)
    at handleIncomingPacket (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:672:7)
    at Socket.readFromStdout (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:600:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  This error came from the "onResolve" callback registered here:

      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///D:/repo-tauri/gtlab/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66606:18)
    at handlePlugins (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:1150:21)
    at buildOrContextImpl (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:873:5)
    at Object.buildOrContext (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:699:5)
    at D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:2023:15
    at new Promise (<anonymous>)
    at Object.build (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:2022:25)
    at build (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:1873:51)
    at bundleConfigFile (file:///D:/repo-tauri/gtlab/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66561:24)

  The plugin "externalize-deps" was triggered by this import

    vite.config.ts:3:33:
      3 │ import { PrimeVueResolver } from '@primevue/auto-import-resolver';
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from D:\repo-tauri\gtlab\vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1225:27: ERROR: [plugin: externalize-deps] "@primevue/auto-import-resolver" resolved to an ESM file. ESM file cannot be loaded by `require`. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
    at failureErrorWithLog (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:1472:15)
    at D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:945:25
    at runOnEndCallbacks (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:1315:45)
    at buildResponseToResult (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:943:7)
    at D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:970:16
    at responseCallbacks.<computed> (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:622:9)
    at handleIncomingPacket (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:677:12)
    at Socket.readFromStdout (D:\repo-tauri\gtlab\node_modules\esbuild\lib\main.js:600:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)

(2/2) Create a successful TS-Tauri-Vue project, and add the UI components one by one from Sakai. I haven't tried this.
It seems this second method will be viable compared with the (1/2).

Have anybody tried what I talked about above?

[GuanglinDu]

Just created a Vue-TypeScript-Tauri2 project from scratch and added the Sakai's layout component successfully based on what was taught in the video Sakai Free Admin Template with Vite, Vue 3 and PrimeVue by Sir. Cagatay Civici. I failed in converting the whole Sakai template to a TypeScript one. Cagatay's approach to incrementally add things works much better than that to remove things!

[cret0103]

Loading a esm file using require is not supported. For the differences between esm and common js, you can refer to this discussion: common js vs es modules and why.
In Use Typescript in Existing Vue 3 Project, you set compilerOptions.module to ESNext, which means that the .ts file wii be compiled to esm. I guess you didn't set the type in package.json to module, so node will treat all files as commonjs.
I have tried to convert sakai-vue to ts project, but it is not finished. The repository is here: cret0103/sakai-vue-ts.It can work, but many types are not defined.