search

josealejandro2928 / react-image-picker-editor

React library for the selection, edition and compression of images in png, jpeg and webp formats This package is made completely with html and css without any extra components or npm packages. It's based in functional components based in hooks, for optimization were used memo, useMemo and useCalback for avoiding any extra-renders.
https://www.npmjs.com/package/react-image-picker-editor
MIT License
27 stars 21 forks source link

ReferenceError: window is not defined #4

Closed aryadaulat closed 1 year ago

aryadaulat commented 1 year ago

Error Window is not defined if me refresh in page using this library , and error window when i try to push to vercel , im using Next JS

ReferenceError: window is not defined -- 21:03:17.721 | at /vercel/path0/node_modules/react-image-picker-editor/dist/index.js:1:11981 21:03:17.722 | at Object. (/vercel/path0/node_modules/react-image-picker-editor/dist/index.js:1:12459) 21:03:17.722 | at Module._compile (node:internal/modules/cjs/loader:1218:14) 21:03:17.722 | at Module._extensions..js (node:internal/modules/cjs/loader:1272:10) 21:03:17.723 | at Module.load (node:internal/modules/cjs/loader:1081:32) 21:03:17.723 | at Module._load (node:internal/modules/cjs/loader:922:12) 21:03:17.723 | at Module.require (node:internal/modules/cjs/loader:1105:19) 21:03:17.723 | at require (node:internal/modules/cjs/helpers:103:18) 21:03:17.724 | at 4066 (/vercel/path0/.next/server/pages/admin/produk.js:446:18) 21:03:17.724 | at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42)
josealejandro2928 commented 1 year ago

Is this error happening in dev mode, or it only occurs once you build and run the project

josealejandro2928 commented 1 year ago

Hi, the problem is that in SS you dont have access to browser api. To solve that next have a build in functionality that allows to render certain components in Client Side. here the source:https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

the solution will be import the component like this: 

..
import 'react-image-picker-editor/dist/index.css'
import dynamic from 'next/dynamic'
const ReactImagePickerEditor = dynamic(() => import('react-image-picker-editor'), {
    ssr: false,
})
...