react-jvectormap Cannot import in next js

Server Error ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack Object.<anonymous> file:///Users/macbook-pro/project/frontend/node_modules/@react-jvectormap/core/dist/index.js (18:4) Module._compile node:internal/modules/cjs/loader (1097:14) Object.Module._extensions..js

Feb 10 '22 06:02 viriyxh

How can I fix this?

Feb 10 '22 07:02 viriyxh

Here's a code

import Head from "next/head";
import { Container, Row, Col, Card, Spinner } from "react-bootstrap";
import { VectorMap } from "@react-jvectormap/core";
import { esMill } from "@react-jvectormap/spain";
import styles from "../styles/Home.module.css";

const Home = () => {
    return (
      <div>
        <Head>
          <title>Map View</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <div className={styles.wrapper}>
          <div className="py-5">
            <Container className="py-5">
              <Row sm={1}>
                <Col className="my-3">
                  <Card className={`${styles.card} h-100`}>
                    <Card.Body>
                      <h5>Map</h5>
                      <div>
                        <VectorMap map={esMill} />
                      </div>
                    </Card.Body>
                  </Card>
                </Col>
              </Row>
            </Container>
          </div>
        </div>
      </div>
    );
};

export default Home;

Feb 10 '22 07:02 viriyxh

You need to dynamically import VectorMap as it is unable to be rendered server side. Here is how I have it running in a project.

import dynamic from 'next/dynamic';
import worldMill from '@react-jvectormap/world/worldMill.json';

const VectorMap = dynamic(
  // @ts-ignore
  () => import("@react-jvectormap/core").then((m) => m.VectorMap),
  { ssr: false, }
);

export const Jmap = ({ series }: any) => {
  return (
    <div>
      <VectorMap
        map={worldMill}
        series={series}
      />
    </div>
  );
}

May 31 '22 17:05 nickguimond

Thank you! Heads up for other devs: I have imported worldMill by destructuring command { worldMill } ... but this threw another error. You should import just as written above to get it to work

Oct 05 '22 12:10 flov

react-jvectormap react-jvectormap copied to clipboard

Cannot import in next js

react-jvectormap
react-jvectormap copied to clipboard