react-dropzone: document is not defined

@Chris533 , it helps me, thx. @Dakkers try this:

import dynamic from 'next/dynamic';
const Dropzone = dynamic(() => import('react-dropzone'), { ssr: false });

const App = () => {
    return (
       <Dropzone>
            {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className={classes.dropzone}>
                  <input {...getInputProps()} />
                  <div className={classes.itemOutContainer}>
                    <div className={classes.itemContainer}>
                      <div className={cns(classes.item, classes.itemCreate)}>
                        uploading files
                      </div>
                    </div>
                  </div>
                </div>
            )}
       </Dropzone>
    );
}

🎉 This issue has been resolved in version 10.0.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

Just change export const supportMultiple = 'multiple' in document.createElement('input')

to

export const supportMultiple = 'multiple' in React.createElement('input')

and the problem should be solved. In case you don’t want to import React in utils/index.js just move supportMultiple to src/index.js since it is just used there

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(() => import('../components/hello3'), {
  ssr: false
})

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

Thanks, I user this finger out.

useEffects are run after a component is mounted, which is safe for SSR however, the code above gets parsed by the browser on the page load and that’s the cause of the error. Adding a guard clause that checks for DOM would solve the problem.

This is the cause of the issue:

// Change
export const supportMultiple = 'multiple' in document.createElement('input')

// TO

export const supportMultiple =
  typeof document !== 'undefined' && document && document.createElement
    ? 'multiple' in document.createElement('input')
    : true

Happy to make a PR

https://github.com/chill5018/next-react-dropzone-demo Here you go @rolandjitsu