react-select-async-paginate
react-select-async-paginate copied to clipboard
vtaits
SyntaxError: Cannot use import statement outside a module, when using remix in monorepo
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?
