Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot import in next js #118

Open
viriyxh opened this issue Feb 10, 2022 · 5 comments
Open

Cannot import in next js #118

viriyxh opened this issue Feb 10, 2022 · 5 comments
Labels
bug

Comments

@viriyxh
Copy link

viriyxh commented Feb 10, 2022

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
@viriyxh
Copy link
Author

viriyxh commented Feb 10, 2022

How can I fix this?

@viriyxh
Copy link
Author

viriyxh commented Feb 10, 2022

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;

@kadoshms kadoshms added the bug label Feb 18, 2022
@nickguimond
Copy link

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>
  );
}

@flov
Copy link
Contributor

flov commented Oct 5, 2022

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

@rtconner
Copy link

This is a simpler dynamic import that works for me on Next 15.1

const { VectorMap } = await import(`@react-jvectormap/core`);

@viriyxh you should close this ticket though, not really a bug in this lib.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@flov @rtconner @kadoshms @nickguimond @viriyxh