SyntaxError: Cannot use import statement outside a module, when using remix in monorepo

[oystr29]

FAQ

So, i use remix in turborepo, but the react select async paginate had an error

@hktekno/hkdb:dev: 2:15:52 PM [vite] Error when evaluating SSR module /@fs/home/iansyah/29-Ian/Work/HK-group/Task-Management/weekcan-monorepo/packages/ui/src/components/select.tsx: failed to import "react-select-async-paginate"
@hktekno/hkdb:dev: |- /home/iansyah/29-Ian/Work/HK-group/Task-Management/weekcan-monorepo/node_modules/react-select-async-paginate/dist/esm/index.js:2
@hktekno/hkdb:dev: import Select from "react-select";
@hktekno/hkdb:dev: ^^^^^^
@hktekno/hkdb:dev: 
@hktekno/hkdb:dev: SyntaxError: Cannot use import statement outside a module
@hktekno/hkdb:dev:     at internalCompileFunction (node:internal/vm:128:18)
@hktekno/hkdb:dev:     at wrapSafe (node:internal/modules/cjs/loader:1279:20)
@hktekno/hkdb:dev:     at Module._compile (node:internal/modules/cjs/loader:1331:27)
@hktekno/hkdb:dev:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
@hktekno/hkdb:dev:     at Module.load (node:internal/modules/cjs/loader:1205:32)
@hktekno/hkdb:dev:     at Function.Module._load (node:internal/modules/cjs/loader:1021:12)
@hktekno/hkdb:dev:     at cjsLoader (node:internal/modules/esm/translators:366:17)
@hktekno/hkdb:dev:     at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
@hktekno/hkdb:dev:     at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
@hktekno/hkdb:dev:     at ModuleLoader.import (node:internal/modules/esm/loader:323:24)

this is my package.json

{
  "name": "@hktekno/hkdb",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "test:integration": "playwright test"
  },
  "dependencies": {
    "@hktekno/api": "workspace:*",
    "@hktekno/auth": "workspace:*",
    "@hktekno/ui": "workspace:*",
    "@hktekno/utils": "workspace:*",
    "@hookform/resolvers": "^3.3.4",
    "@internationalized/date": "^3.5.6",
    "@nextui-org/react": "^2.4.8",
    "@nextui-org/use-infinite-scroll": "^2.1.5",
    "@radix-ui/react-slot": "^1.1.0",
    "@remix-run/express": "^2.13.1",
    "@remix-run/node": "^2.12.1",
    "@remix-run/react": "^2.12.1",
    "@remix-run/serve": "^2.12.1",
    "@tanstack/react-query": "^5.31.0",
    "@tanstack/react-table": "^8.16.0",
    "axios": "^1.6.8",
    "cross-env": "^7.0.3",
    "dayjs": "^1.11.10",
    "express": "^4.21.1",
    "framer-motion": "^11.2.12",
    "isbot": "^4.1.0",
    "lucide-react": "^0.314.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-hook-form": "^7.51.3",
    "react-query-kit": "^3.2.2",
    "remix-hook-form": "^6.1.2",
    "sonner": "^1.4.41",
    "tailwind-merge": "^2.2.1",
    "use-debounce": "^10.0.0",
    "zod": "^3.23.0",
    "zodix": "^0.4.4",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@hktekno/eslint-config": "workspace:*",
    "@hktekno/prettier-config": "workspace:*",
    "@hktekno/tailwind-config": "workspace:*",
    "@hktekno/tsconfig": "workspace:*",
    "@playwright/test": "^1.48.1",
    "@remix-run/dev": "^2.12.1",
    "@remix-run/eslint-config": "^2.15.2",
    "@types/node": "^20.10.6",
    "@types/react": "19.0.2",
    "@types/react-dom": "19.0.2",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.17",
    "dotenv": "^16.4.5",
    "dotenv-cli": "^7.4.1",
    "eslint": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.4.5",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "prettier": "@hktekno/prettier-config"
}

is there any config that i missed?

[vtaits]

Hello. Does react-select without async-paginate work correctly?