[Help Please] ModuleDependencyError: export 'useState' (imported as 'useState') was not found in 'react'

[jezmck]

I get the following when attempting to use this lib. Any ideas?

⨯ ./node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs
ModuleDependencyError: export 'useState' (imported as 'useState') was not found in 'react'

[usefulthink]

what version of react are you using? Being built around function components and hooks, this library requires react>=16.8 I think.

[jezmck]

    "react": "18.2.0",
    "react-dom": "18.2.0",

[usefulthink]

weird. Only thing I can find is "Have you tried turning it off and on again?" (delete ./node_modules and npm install). https://stackoverflow.com/a/74603574

[usefulthink]

can you post a bit more about your environment? Which bundler or dev-server are you using? TS or JS? Any other frameworks or such?

[jezmck]

Sorry, I didn't give much info.

The project is based on https://github.com/vercel/examples/tree/main/storage/postgres-starter which uses ye olde create-react-app.

My tsconfig.json is probably relevant too:

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

and my package.json

{
  "name": "postgres-starter",
  "repository": "https://github.com/vercel/examples.git",
  "license": "MIT",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/ms": "^0.7.34",
    "@types/node": "20.11.16",
    "@types/react": "18.2.55",
    "@types/react-dom": "18.2.19",
    "@vercel/postgres": "0.7.2",
    "@vis.gl/react-google-maps": "^0.6.0",
    "autoprefixer": "10.4.17",
    "eslint": "8.56.0",
    "eslint-config-next": "14.1.0",
    "ms": "^2.1.3",
    "next": "14.1.0",
    "postcss": "8.4.35",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.4.1",
    "typescript": "5.3.3"
  }
}