HTMLElement is not defined

[heymartinadams]

For some reason, getting this error. Installed via npm @uploadcare/[email protected].

How do I get the props expire and signature? Documentation is incredibly sparse.

React using NextJS

// Packages
import * as LR from '@uploadcare/blocks'
import { PACKAGE_VERSION } from '@uploadcare/blocks/env'
// Layouts
import Logo from '^/logo'
import config from './upload.module.css'

LR.registerBlocks(LR)

const DesignLayoutsHome = ({ expire, signature }) => {
  return (
    <section className='p-8 max-w-4xl mx-auto flex flex-col items-center justify-center'>
      <Logo />

      <div className='flex flex-col gap-8 p-8'>
        <lr-file-uploader-inline
          className={config?.uploaderCfg}
          css-src={`https://unpkg.com/@uploadcare/blocks@${PACKAGE_VERSION}/web/file-uploader-regular.min.css`}
          style={{
            '--cfg-secure-signature': `"${signature}"`,
            '--cfg-secure-expire': `${expire}`
          }}
        />
      </div>
    </section>
  )
}

export default DesignLayoutsHome

upload.module.css

.uploaderCfg {
  --ctx-name: 'uploader';
  --cfg-pubkey: '<key>'; /* removed for this public post */
  --cfg-multiple: 1;
  --cfg-confirm-upload: 1;
  --cfg-img-only: 0;
  --cfg-accept: '';
  --cfg-store: 1;
  --cfg-camera-mirror: 0;
  --cfg-source-list: 'local, url, camera, dropbox, gdrive';
  --cfg-max-files: 10;
}

[nd0ut]

Hey @heymartinadams,

Depending on your framework, code evaluation should be skipped on the server.

In case of Next.js, it could be achieved using one of the following methods:

• "use client" directive, see https://beta.nextjs.org/docs/rendering/server-and-client-components
• Dynamic import - import('@uploadcare/blocks').then(m => m.registerBlocks(m))
• connectBlocksFrom helper, see https://uploadcare.github.io/blocks/get-started/installation/ - connectBlocksFrom('https://cdn.jsdelivr.net/npm/@uploadcare/[email protected]/web/blocks-browser.min.js');

As for the expire and signature, you should wrap expire into the quotes too.

          style={{
            '--cfg-secure-signature': `"${signature}"`,
            '--cfg-secure-expire': `"${expire}"`
          }}

[nd0ut]

Hey @heymartinadams ,

We have added a separate bundle for SSR that will work with static import and won't raise an error on Next.js. Please try updating to v0.21.1.

[heymartinadams]

Thanks, @nd0ut. Appreciate it. I’m not using the new blocks API until it’s robust and feels less experimental... sticking with the old widget for now until it’s so easy to install it becomes a no-brainer. (I’m so busy with building the rest of my app that I need the Uploadcare installation to be so simple and so straightforward that it’ll just take me a few minutes with not too much fiddling around.)