Unable to import enum to nextjs frontend from trpc backend in yarn worksapces monorepo

214 views Asked by At

I have a "next": "13.4.9" app and "@trpc/server": "^10.34.0" on a backend I can import types from my backend to the frontend but when I import anything that would then run in the runtime I get error

../api/src/utils/functions.ts
Module parse failed: Unexpected token (1:32)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export function trimEndZeros(str: string | undefined) {
|   if (!str || isNaN(Number(str))) {
|     return "0";

Import trace for requested module:
../api/src/utils/functions.ts
./src/components/leader/Levels.tsx
./src/components/leader/Leader.tsx

I have a yarn workspaces monorepo this is my root tsconfig

{
  "files": [],
  "references": [{ "path": "./packages/api" }, { "path": "./packages/web" }]
}

this is for the backend

{
  "compilerOptions": {
    "composite": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "target": "ES6",
    "module": "ESNext",
    "rootDir": ".",
    "moduleResolution": "node"
  }
}

and this is for the frontend

{
  "compilerOptions": {
    "composite": true,
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@api/*": ["../api/src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "../api/src/**/*"
  ],
  "references": [
    {
      "path": "../api"
    }
  ],
  "exclude": ["node_modules"]
}

if anyone would be able to tell me what is wrong with my setup please tell me. Do i really need some addidtional loader? Nextjs would not handle it by default? Thanks.

0

There are 0 answers