CODEWITHSUNDEEP
reactjsnext.js
Can Kurucu
Can Kurucu

Reputation: 75

How do I import 3rd party libraries in NextJS?

I installed 3rd party libraries with npm. For example, I'd like to import the library on my page at "https://github.com/xkeshi/image-compressor". But the "import ImageCompressor from 'image-compressor.js" error that I wrote at the beginning of the page shows me the "window is not defined" error.

How to get a third-party library in NextJS?

Upvotes: 0

Views: 8528

Answers (1)

Jorge García
Jorge García

Reputation: 5113

You need to do a dynamic import for the component that is using the 3rd party library.

// components/my-awesome.component.js
// import the library that use `window` object
import grapesjs from 'grapesjs';

export default function MyAwesomeComponent() {
  // Initialize your component or do whatever you need to do
  ...
}

In the page definition, import your component by using dynamic and disable SSR

// import dynamic method from next
import dynamic from 'next/dynamic';
// import your component with dynamic and disable SSR
const MyAwesomeComponent = dynamic(
  () => import('../components/my-awesome.component'),
  {ssr: false}
);

// use your component
export default function () {
  return <MyAwesomeComponent />;
}

Reference: https://nextjs.org/docs/advanced-features/dynamic-import

Upvotes: 4

Related Questions