I have the following structure

my-package

• package.json
• packages
  • backend
    • package.json
  • frontend
    • package.json
    • vite.config.ts
  • shared
    • package.json
    • src
      • TimeRange.ts

my-package/package.json

{
  "name": "my-package",
  "private": true,
  "scripts": {
    "dev": "dotenv -- turbo run dev",
    "build": "turbo run build"
  },
  "workspaces": [
    "packages/*"
  ],
  "devDependencies": {
    "turbo": "^1.10.15"
  },
  "dependencies": {
    "dotenv-cli": "^7.4.1"
  }
}

my-package/packages/backend/package.json

{
  "name": "@my-package/backend",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "dev": "tsx --watch src/server.ts",
  },
  "devDependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/node": "^20.12.7",
    "ts-node": "^10.9.2",
    "tsx": "^4.7.2",
    "typescript": "^5.4.5",
    "@my-package/shared": "*"
  },
  "dependencies": {
    "@prisma/client": "5.12.1",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "prisma": "^5.12.1",
    "serialport": "^12.0.0"
  },
}

my-package/packages/frontend/package.json

{
  "name": "@my-package/frontend",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "axios": "^1.6.8",
    "chart.js": "^4.4.2",
    "date-fns": "^3.6.0",
    "framer-motion": "^11.1.7",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.1.0",
    "wouter": "^3.1.2",
    "@my-package/shared": "*"
  },
  "devDependencies": {
    "@types/chart.js": "^2.9.41",
    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
    "@vitejs/plugin-react-swc": "^3.6.0",
    "typescript": "^5.4.5",
    "vite": "^5.2.9"
  }
}

my-package/packages/frontend/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
    fs: {
      cachedChecks: false,
    },
  },
  resolve: {
    preserveSymlinks: true,
    alias: {
      "~": "/src",
    },
  },
  optimizeDeps: { exclude: ["@my-package"] },
  plugins: [react()],
});

my-package/packages/shared/package.json

{
  "name": "@my-package/shared",
  "version": "0.0.1",
  "type": "module",
  "description": "Shared TypeScript files for frontend and backend packages"
}

my-package/packages/shared/src/TimeRange.ts

enum TimeRange {
  DAY = "DAY",
  WEEK = "WEEK",
  MONTH = "MONTH",
}

export default TimeRange;

My backend has no issue and is running fine. However in a few of my frontend files I import TimeRange as follows:

import TimeRange from "@greenbolt/shared/src/TimeRange";

And when running vite dev

I get the following:

Uncaught SyntaxError: import not found: default

I have tried also with a named export makes no difference. When I look at the .vite/deps I dont see my file once. What can I do for vite to compile my ts to js and add it in its base?