IronManiac
IronManiac•16mo ago

uploadstuff lib not exporting react components

trying to use the upload stuff library as recommended in the documentation but the react components are not properly exported. it looks like @Michal Srb made this library?
No description
10 Replies
IronManiac
IronManiacOP•16mo ago
also typescript is unhappy haha
No description
Michal Srb
Michal Srb•16mo ago
Hmm weird, can you share your tsconfig, next or vite config and how you’re specifying the dependency in package.json?
IronManiac
IronManiacOP•16mo ago
i forked your template so it's the same as yours @Michal Srb haha tsconfig.json 
{
  /* This TypeScript project config describes the environment that
   * Convex functions run in and is used to typecheck them.
   * You can modify it, but some settings required to use Convex.
   */
  "compilerOptions": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./**/*"],
  "exclude": ["./_generated"]
}
{
  /* This TypeScript project config describes the environment that
   * Convex functions run in and is used to typecheck them.
   * You can modify it, but some settings required to use Convex.
   */
  "compilerOptions": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./**/*"],
  "exclude": ["./_generated"]
}
package.json 
{
  "name": "convex-nextjs-app-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm-run-all dev:init --parallel dev:server dev:client",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "dev:server": "convex dev",
    "dev:client": "next dev",
    "dev:init": "convex dev --until-success"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.29.3",
    "@clerk/themes": "^1.7.9",
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.11.0",
    "@types/react": "18.2.47",
    "@types/react-dom": "18.2.18",
    "@xixixao/uploadstuff": "^0.0.5",
    "autoprefixer": "10.4.16",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "convex": "^1.7.1",
    "dayjs": "^1.11.10",
    "eslint": "8.56.0",
    "eslint-config-next": "14.0.4",
    "modern-async": "^2.0.0",
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "postcss": "8.4.33",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.3",
    "tailwind-merge": "^2.2.0",
    "tailwindcss": "3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.3.3",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/async": "^3.2.24",
    "eslint-config-prettier": "^9.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.1.1"
  }
}
{
  "name": "convex-nextjs-app-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm-run-all dev:init --parallel dev:server dev:client",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "dev:server": "convex dev",
    "dev:client": "next dev",
    "dev:init": "convex dev --until-success"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.29.3",
    "@clerk/themes": "^1.7.9",
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.11.0",
    "@types/react": "18.2.47",
    "@types/react-dom": "18.2.18",
    "@xixixao/uploadstuff": "^0.0.5",
    "autoprefixer": "10.4.16",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "convex": "^1.7.1",
    "dayjs": "^1.11.10",
    "eslint": "8.56.0",
    "eslint-config-next": "14.0.4",
    "modern-async": "^2.0.0",
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "postcss": "8.4.33",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.3",
    "tailwind-merge": "^2.2.0",
    "tailwindcss": "3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.3.3",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/async": "^3.2.24",
    "eslint-config-prettier": "^9.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.1.1"
  }
}
Thoughts @Michal Srb ?
Michal Srb
Michal Srb•16mo ago
Hey @IronManiac , this is an issue with the template. In your tsconfig.json change moduleResolution to: 
"moduleResolution": "bundler",
"moduleResolution": "bundler",
then it should all work
IronManiac
IronManiacOP•16mo ago
Ok thanks @Michal Srb, I'll give that a try.
IronManiac
IronManiacOP•16mo ago
No description
Michal Srb
Michal Srb•16mo ago
The dropzone uses different fileTypes than the button: An object of with a common MIME type as keys and an array of file extensions as values (similar to https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker 's types accept option).
MDN Web Docs
Common MIME types - HTTP | MDN
This topic lists the most common MIME types with corresponding document types, ordered by their common extensions.
MDN Web Docs
Window: showOpenFilePicker() method - Web APIs | MDN
The showOpenFilePicker() method of the Window interface shows a file picker that allows a user to select a file or multiple files and returns a handle for the file(s).
IronManiac
IronManiacOP•16mo ago
i copied directly from your docs https://uploadstuff.dev/api-reference/UploadDropzone
UploadDropzone – Nextra
Nextra: the next docs builder
Michal Srb
Michal Srb•16mo ago
That's a bug in the docs 😦 It should be: 
      fileTypes={{
        "application/pdf": [".pdf"],
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      }}
      fileTypes={{
        "application/pdf": [".pdf"],
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      }}
I'll fix the docs in a sec
IronManiac
IronManiacOP•16mo ago
fileTypes is also optional so i just removed it and it worked. but that works also. thanks.

Did you find this page helpful?