[BUG] Can't use worldmap on yarn + vite + react

[zotil]

Hi, I tried to use this lib with vite + react installing with

yarn add react-svg-worldmap

Install output:

% yarn add react-svg-worldmap
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ react-svg-worldmap@2.0.0-alpha.3
info All dependencies
├─ d3-array@3.2.0
├─ d3-geo@3.0.1
├─ internmap@2.0.3
├─ react-path-tooltip@1.0.17
├─ react-svg-worldmap@2.0.0-alpha.3
└─ tslib@2.4.0
✨  Done in 5.10s.

Then I wrote the component:

import WorldMap from "react-svg-worldmap"

export const GeoMap = (props) => {
  return (
    <div>
      <WorldMap color="green" title="This is My Map" size="lg" data={data} />
    </div>
  )
}

And when trying to run the vite app with yarn run dev I get the following output:

/usr/local/bin/yarn run dev
yarn run v1.22.19
$ vite

  vite v2.9.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 380ms.

10:08:04 AM [vite] hmr update /src/components/product_research_report/geomap/GeoMap.jsx
hmr update /src/load_tailwind.css
✘ [ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json.

    node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:10:
      40970 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
            ╵           ^

    at packageEntryFailure (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:11)
    at resolvePackageEntry (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40966:9)
    at tryNodeResolve (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40773:20)
    at Context.resolveId (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40581:28)
    at Object.resolveId (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39254:55)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:61577:27
    at async /Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38771:34
    at async callback (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:921:28)
    at async handleRequest (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:701:30)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38750:18:
      38750 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind }) => {
            ╵                   ~~~~~~~~~

    at setup (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38750:19)
    at handlePlugins (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:843:23)
    at Object.buildOrServe (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1137:7)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:2085:17
    at new Promise (<anonymous>)
    at Object.build (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:2084:14)
    at Object.build (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1931:51)
    at runOptimizeDeps (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39994:34)
    at async runOptimizer (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:50523:38)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/react-svg-worldmap/dist/draw.js:5:37:
      5 │ const react_path_tooltip_1 = require("react-path-tooltip");
        ╵                                      ~~~~~~~~~~~~~~~~~~~~

10:08:05 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:10: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json.
    at failureErrorWithLog (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1605:15)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1249:7)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1358:14
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined (x2)
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined (x3)

[zotil]

package.json

{
  "name": "project_front",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tippyjs/react": "^4.2.6",
    "axios": "^0.27.2",
    "chart.js": "^3.8.0",
    "date-and-time": "^2.4.1",
    "iso-3166-1": "^2.1.1",
    "primeicons": "^5.0.0",
    "primereact": "^8.2.0",
    "react": "^18.0.0",
    "react-circle-flags": "^0.0.18",
    "react-dom": "^18.0.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.3.0",
    "react-svg-worldmap": "^2.0.0-alpha.3",
    "serve": "^14.0.1",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6",
    "vite": "^2.9.9"
  }
}

[TheLonerCoder]

Was this really never solved? I'm having the same issue.. Works fine in Vanilla React but cant get it to work with Vite!

[yanivam]

Sorry everyone, I have been away doing my Masters and working full time. I am going to get back to this starting tomorrow. Thanks for your patience. -Yams

[yanivam]

I believe this was an issue with the tooltip, I also think that I fixed it now. Can you check if this works @TheLonerCoder @zotil? Thanks for your patience, -Yams

[yanivam]

Closing this ticket for now, let me know if the issue persists