Access entities in frontend

[will2hew]

There are currently Vite errors when attempting to import entities in the frontend. This would be a meaningful quality of life improvement to avoid having to re-create interfaces in frontend code.

[iacobucci]

I'm facing the same problems!!

ERROR [vite-node] [PARSE_ERROR] /server/entities/user.entity.ts:1:67 <br><pre>1 | import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";
2 | @Entity("user")
| ^
3 | export class User {
4 | @PrimaryGeneratedColumn()</pre><br>

2 | @Entity("user")
| ^
3 | export class User {
4 | @PrimaryGeneratedColumn()</pre><br>
at /server/entities/user.entity.ts:1:67

[cause]: [vite-node] [PARSE_ERROR] /server/entities/user.entity.ts:1:67 <br><pre>1 | import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";
2 | @Entity("user")
| ^
3 | export class User {
4 | @PrimaryGeneratedColumn()</pre><br>

2 | @Entity("user")
| ^
3 | export class User {
4 | @PrimaryGeneratedColumn()</pre><br>
at /server/entities/user.entity.ts:1:67

This is what vite says to me. @will2hew do you have ideas on how to investigate this or to patch a solution?

[will2hew]

I haven't looked at this issue recently, but I'd recommend creating separate types with something like a DTO for where you're passing data between the backend and frontend. There are several instances of types that will not appropriately serialize to JSON and should be handled explicitly e.g. dates, will get serialized to a string, but not serialized back to a date object.

[iacobucci]

Thanks for your insights! I was experimenting around with Nuxt and Typeorm with a different configuration, that somewhat was able to let me use the same classes and interfaces with both the backend and the frontend. With vite, it all boiled down to using these settings in nuxt.config.ts:

import typescript from '@rollup/plugin-typescript';
export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        tsconfigRaw: {
          compilerOptions: {
            experimentalDecorators: true,
          }
        }
      }
    }
  },
  vite: {
    esbuild: false,
    plugins: [typescript()],
  },
})

Since, for my understanding, the esbuild bundler doesnt support emitDecoratorMetadata (as per this issue).
The configuration above strips the decorators only in the frontend, and leaves typeorm related stuff working for the backend, but it kind of messes up with the neat hot module reloading.
Your idea of DTOs is, I imagine, much better for stability, but as youve said, the quality of life improvements would be really meaningful with common interfaces!