Module not found: Can't resolve 'jsvectormap/dist/css/jsvectormap.css'
This package cause issue in NextJs. Here are the details :
Nodejs >= 18
Error : ``Module not found: Can't resolve 'jsvectormap/dist/css/jsvectormap.css' 1 | "use client";
2 | import "jsvectormap/dist/css/jsvectormap.css"; | ^ 3 | import "flatpickr/dist/flatpickr.min.css"; 4 | import "@/css/satoshi.css"; 5 | import "@/css/style.css";
https://nextjs.org/docs/messages/module-not-found ⨯ ./src/app/layout.tsx:2:1 Module not found: Can't resolve 'jsvectormap/dist/css/jsvectormap.css' 1 | "use client";
2 | import "jsvectormap/dist/css/jsvectormap.css"; | ^ 3 | import "flatpickr/dist/flatpickr.min.css"; 4 | import "@/css/satoshi.css"; 5 | import "@/css/style.css";
https://nextjs.org/docs/messages/module-not-found ⨯ ./src/app/layout.tsx:2:1 Module not found: Can't resolve 'jsvectormap/dist/css/jsvectormap.css' 1 | "use client";
2 | import "jsvectormap/dist/css/jsvectormap.css"; | ^ 3 | import "flatpickr/dist/flatpickr.min.css"; 4 | import "@/css/satoshi.css"; 5 | import "@/css/style.css";
Hi @Jagroop-RTE
Would be great if there is an example that reproduces the issue.
However, I noticed that you're importing the style from jsvectormap/dist/css/jsvectormap.css that's fine if you're using earlier versions before v1.6.0
Please take a look at the breaking changes of v1.6.0 https://jvm-docs.vercel.app/docs/changelog#v160-latest
I've got the solution Download and extract the zip file 'https://registry.npmjs.org/jsvectormap/-/jsvectormap-1.6.0.tgz', then place it in node modules. After that It works correctly.
Reason for the above solution: This package does not appear to be Next.js or server-side rendering friendly. Even the package is installed. It still cannot access its files because no relevant 'jsvectormap' folder is available in node modules.
Please replace "jsvectormap/dist/css/jsvectormap.css" to "jsvectormap/dist/jsvectormap.css";
Thanks @toanlv92 you save my time