๐Ÿ›[BUG] ReferenceError: self is not defined in Next.js

See original GitHub issue

I apologize, but the template for the issue is in Chinese and I donโ€™t understand it.

Basically, using SSR with Next.js, If I install the library and try to render a chart I get this error.

Steps to reproduce:

  • Clone this
  • npm install
  • npm run dev

Version: ant-design-charts ^1.1.1

Screenshot 2021-04-07 at 16 48 35

Thanks for any help ๐Ÿ˜€

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:2
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
lxfu1commented, Apr 7, 2021

You can try to import from lib.

import Line from '@ant-design/charts/lib/line'
1reaction
tony-stark-edithcommented, May 18, 2021

@robertosannazzaro By nextjs documentation, the actual solution for undefined window/self reference is as follows:

import dynamic from "next/dynamic";
const Line = dynamic(
  () => import("@ant-design/charts").then((mode) => mode.Line),
  { ssr: false }
);
Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - Why am I getting ReferenceError: self is not defined ...
The error occurs because the library requires Web APIs to work, which are not available when Next.js pre-renders the page on the server-sideย ......
Read more >
nextjs 12.2 middleware : ReferenceError: self is not defined
I am using a boilerplate with nextjs 12.2. I want to use the middleware so I added a middleware.ts in the page folder,...
Read more >
self is not defined nextjs | The AI Search Engine You Control
I'm using filemanger in my Nextjs apps.it showing me ReferenceError: self is not defined. even though I disabled SSR on that page but...
Read more >
[Solved]-Reference Error: self is not defined-Reactjs
self is likely referring to window which is not available on the server side...it's only available in a browser context. The navigator reference...
Read more >
NextJS ReferenceError: self is not defined
Hi everyone,. I keep getting error every time I refresh the page that renders the map. I'm using the โ€œ@tomtom-international/web-sdk-mapsโ€ and โ€œ@ย ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found