[vite] Internal server error: Cannot use import statement outside a module

[trulymittal]

Bug

7:05:36 PM [vite] Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1153:20)
      at Module._compile (node:internal/modules/cjs/loader:1205:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
      at Module.load (node:internal/modules/cjs/loader:1091:32)
      at Module._load (node:internal/modules/cjs/loader:938:12)
      at cjsLoader (node:internal/modules/esm/translators:284:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)

Screenshots If applicable, add screenshots to help explain your problem.

Which versions of Sanity are you using?

@sanity/cli (global)             3.36.0 (latest: 3.43.0)
@sanity/google-maps-input         4.0.1 (up to date)
@sanity/orderable-document-list   1.2.1 (up to date)
@sanity/ui                        2.1.4 (latest: 2.1.12)
@sanity/vision                   3.35.2 (latest: 3.43.0)
sanity                           3.36.0 (latest: 3.43.0)

What operating system are you using? macOS Sonoma 14.x.x

Which versions of Node.js / npm are you running? 10.2.5/v20.9.0

Additional context

vite.config.ts

import('vite')
import { vitePlugin as remix } from '@remix-run/dev'
import { installGlobals } from '@remix-run/node'
import { vercelPreset } from '@vercel/remix/vite'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

installGlobals()

export default defineConfig({
  server: {
    port: 4000,
  },
  plugins: [
    remix({
      presets: [vercelPreset()],
    }),
    tsconfigPaths(),
  ],
  resolve: {
    alias: {
      '~': resolve(__dirname, 'app'),
    },
  },
})

tsconfig.json

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx",
    "vite.config.ts",
    "sanity.config.ts"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

package.json

{
  "name": "remix-sanity",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "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",
    "format": "npx prettier -w .",
    "prepare": "husky",
    "sanity:typegen": "npx sanity schema extract && npx sanity typegen generate ",
    "sanity:deploy": "npx sanity deploy",
    "sanity:build": "npx sanity build",
    "icons": "npx @svgr/cli --out-dir app/components/icons -- app/components/icons/assets"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@google/generative-ai": "^0.3.1",
    "@googlemaps/google-maps-services-js": "^3.3.42",
    "@hookform/resolvers": "^3.3.4",
    "@langchain/community": "^0.0.41",
    "@langchain/core": "^0.1.49",
    "@langchain/openai": "^0.0.23",
    "@mantine/hooks": "^7.8.1",
    "@mui/material": "^5.15.15",
    "@mui/x-data-grid": "^7.3.0",
    "@portabletext/react": "^3.0.18",
    "@prisma/client": "^5.11.0",
    "@react-google-maps/api": "^2.19.3",
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "@sanity-typed/client": "^3.1.2",
    "@sanity-typed/types": "^6.3.3",
    "@sanity/client": "^6.15.7",
    "@sanity/google-maps-input": "^4.0.1",
    "@sanity/orderable-document-list": "^1.2.1",
    "@sanity/ui": "^2.0.12",
    "@sanity/vision": "^3.35.2",
    "@tanstack/react-table": "^8.15.3",
    "@uidotdev/usehooks": "^2.4.1",
    "@upstash/redis": "^1.29.0",
    "@vercel/remix": "^2.8.1-patch.2",
    "ai": "^3.0.13",
    "axios": "^1.6.8",
    "chalk": "^5.3.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "fuse.js": "^7.0.0",
    "groq": "^3.36.1",
    "html-to-text": "^9.0.5",
    "isbot": "^4.1.0",
    "js-tiktoken": "^1.0.10",
    "langchain": "^0.1.28",
    "lodash": "^4.17.21",
    "lucide-react": "^0.363.0",
    "luxon": "^3.4.4",
    "openai": "^4.29.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.3",
    "react-hook-form-mui": "^7.0.0-beta.4",
    "react-markdown": "^9.0.1",
    "recharts": "^2.12.3",
    "sanity": "^3.36.0",
    "sanity-plugin-asset-source-unsplash": "^3.0.1",
    "sanity-plugin-groq-snippet": "^1.1.0",
    "sanity-plugin-media": "^2.2.5",
    "sanity-plugin-tags": "^2.0.2",
    "styled-components": "^6.1.8",
    "swiper": "^11.1.3",
    "swr": "^2.2.5",
    "tailwind-merge": "^2.2.2",
    "tiny-invariant": "^1.3.3",
    "uuid": "^9.0.1",
    "zod": "^3.22.4",
    "zod-to-json-schema": "^3.22.4"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.8.1",
    "@svgr/cli": "^8.1.0",
    "@svgr/plugin-jsx": "^8.1.0",
    "@svgr/plugin-prettier": "^8.1.0",
    "@svgr/plugin-svgo": "^8.1.0",
    "@tailwindcss/typography": "^0.5.12",
    "@types/html-to-text": "^9.0.4",
    "@types/luxon": "^3.4.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "husky": "^9.0.11",
    "npm-run-all": "^4.1.5",
    "npm-watch": "^0.13.0",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
    "prisma": "^5.11.0",
    "sass": "^1.77.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.1.6",
    "vite": "^5.2.6",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

[codingMustache]

I'm having the same issue have you solved this?