I am making a NextJS with TS project and I wanted to use UploadCare for a easy-to-use file upload component, however the components starting with uc like do not show as a viable option, they keep getting highlighted red and VSCode says "Property 'uc-config' does not exist on type 'JSX.IntrinsicElements'". I tried seeing if nextjs template from uploadcare would work but it did not for the exact same reason.

Full code:

'use client'
import React, { useEffect, useRef } from 'react'
import * as UC from '@uploadcare/file-uploader';
import { useRouter } from 'next/navigation'

type Props = {
  onUpload: (e: string) => any
}

UC.defineComponents(UC);

const UploadCareButton = ({ onUpload }: Props) => {
  const router = useRouter()
  const ctxProviderRef = useRef<
    typeof UC.UploadCtxProvider.prototype & UC.UploadCtxProvider
  >(null)

  useEffect(() => { 
    const handleUpload = async (e: any) => {
      const file = await onUpload(e.detail.cdnUrl)
      if (file) {
        router.refresh()
      }
    }
    ctxProviderRef.current?.addEventListener('file-upload-success', handleUpload)
  }, [])

  return (
    <div>
      <uc-config
        ctx-name="my-uploader"
        pubkey="a9428ff5ff90ae7a64eb"
      />

      <uc-file-uploader-regular
        ctx-name="my-uploader"
        css-src={`/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.css`}
      />

      <uc-upload-ctx-provider
        ctx-name="my-uploader"
        ref={ctxProviderRef}
      />
    </div>
  )
}

export default UploadCareButton

I tried to declare a 'custom-elements.d.ts' file like so:

declare namespace JSX {
  interface IntrinsicElements {
    'uc-upload-ctx-provider': any;
    'uc-config': any;
    'uc-file-uploader-regular': any;
  }
}

and including it in ts.config but it did not change anything.

I am making a NextJS with TS project and I wanted to use UploadCare for a easy-to-use file upload component, however the components starting with uc like do not show as a viable option, they keep getting highlighted red and VSCode says "Property 'uc-config' does not exist on type 'JSX.IntrinsicElements'". I tried seeing if nextjs template from uploadcare would work but it did not for the exact same reason.

Full code:

'use client'
import React, { useEffect, useRef } from 'react'
import * as UC from '@uploadcare/file-uploader';
import { useRouter } from 'next/navigation'

type Props = {
  onUpload: (e: string) => any
}

UC.defineComponents(UC);

const UploadCareButton = ({ onUpload }: Props) => {
  const router = useRouter()
  const ctxProviderRef = useRef<
    typeof UC.UploadCtxProvider.prototype & UC.UploadCtxProvider
  >(null)

  useEffect(() => { 
    const handleUpload = async (e: any) => {
      const file = await onUpload(e.detail.cdnUrl)
      if (file) {
        router.refresh()
      }
    }
    ctxProviderRef.current?.addEventListener('file-upload-success', handleUpload)
  }, [])

  return (
    <div>
      <uc-config
        ctx-name="my-uploader"
        pubkey="a9428ff5ff90ae7a64eb"
      />

      <uc-file-uploader-regular
        ctx-name="my-uploader"
        css-src={`https://cdn.jsdelivr/npm/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.css`}
      />

      <uc-upload-ctx-provider
        ctx-name="my-uploader"
        ref={ctxProviderRef}
      />
    </div>
  )
}

export default UploadCareButton

I tried to declare a 'custom-elements.d.ts' file like so:

declare namespace JSX {
  interface IntrinsicElements {
    'uc-upload-ctx-provider': any;
    'uc-config': any;
    'uc-file-uploader-regular': any;
  }
}

and including it in ts.config but it did not change anything.

• typescript
• next.js
• file-upload
• uploadcare

2 Answers 2

You can use the Uploadcare React package, which is optimized for React-based projects and can be imported like this for your Next.js project:

import { FileUploaderRegular } from "@uploadcare/react-uploader/next";
import "@uploadcare/react-uploader/core.css";

function App() {
    return <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY" />;
}

This package provides a fully optimized uploader component that seamlessly integrates with React and also includes props for handling events for the File Uploader.

Please check out the official docs for more details.

To get types displayed, try adding types to compilerOptions in tsconfig.json

{
  "compilerOptions": {
    "types": ["@uploadcare/file-uploader/types/jsx"]
  }
}