zid
zid•16mo ago

UploadStuff with Next.js 12

@Michal Srb Hello! I'm having trouble setting up uploadstuff. Following the guide, but cant seem to access the library as expected. I'm using Next 12 in case there are any issues there. This import { UploadButton, UploadFileResponse } from "@xixixao/uploadstuff/react"; gives me 
Error [ERR_MODULE_NOT_FOUND]: Cannot find module
...
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:11)
    at moduleResolve (node:internal/modules/esm/resolve:837:10)
    at defaultResolve (node:internal/modules/esm/resolve:1035:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:269:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:153:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36) {
Error [ERR_MODULE_NOT_FOUND]: Cannot find module
...
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:11)
    at moduleResolve (node:internal/modules/esm/resolve:837:10)
    at defaultResolve (node:internal/modules/esm/resolve:1035:11)
    at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:269:12)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:153:32)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
    at link (node:internal/modules/esm/module_job:75:36) {
11 Replies
Michal Srb
Michal Srb•16mo ago
hey @zid , have you run npm install after adding @xixixao/uploadstuff/react as a dependency?
zid
zidOP•16mo ago
i ran the command npm i @xixixao/uploadstuff let me try reinstalling still same issue, i ran npm uninstall @xixixao/uploadstuff then proceeded with npm i @xixixao/uploadstuff in my packagejson i see "@xixixao/uploadstuff": "^0.0.5", im using "next": "12.2.2", looking inside node modules, i do see the UploadButton inside the esm folder i should also note that im not using typescript
ian
ian•16mo ago
Is it an issue of require instead of import?
Michal Srb
Michal Srb•16mo ago
@zid I haven't had a chance to repro this yet, let us know if you were able to resolve the issue.
zid
zidOP•16mo ago
Hey @ian @Michal Srb , thanks for getting back to me, i just saw the messages. I wasn't able to make this work, I simply followed the docs, but ended up moving forward with a more manual approach.
winsoroaks
winsoroaks•12mo ago
👋 im running into the same error when i do 
$ npm run build
 Collecting page data  ..Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/.../node_modules/@xixixao/uploadstuff/esm/UploadButton' imported from /.../node_modules/@xixixao/uploadstuff/esm/react.js
$ npm run build
 Collecting page data  ..Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/.../node_modules/@xixixao/uploadstuff/esm/UploadButton' imported from /.../node_modules/@xixixao/uploadstuff/esm/react.js
my code runs locally tho, here's my tsconfig 
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
No description
winsoroaks
winsoroaks•12mo ago
currently importing 
import { useUploadFiles, UploadFileResponse } from "@xixixao/uploadstuff/react"
import { useUploadFiles, UploadFileResponse } from "@xixixao/uploadstuff/react"
Michal Srb
Michal Srb•12mo ago
@winsoroaks can you publish a repo that reproduces the issue? If not, can you share your package.json as well?
winsoroaks
winsoroaks•12mo ago
{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm-run-all dev:init --parallel dev:frontend dev:backend",
    "dev:frontend": "next dev -p 3003",
    "dev:backend": "convex dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@rainbow-me/rainbowkit": "^2.0.2",
    "@rainbow-me/rainbowkit-siwe-next-auth": "^0.4.0",
    "@tanstack/react-query": "^5.28.4",
    "@xixixao/uploadstuff": "^0.0.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "convex": "^1.10.0",
    "convex-helpers": "^0.1.25",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.0.0",
    "framer-motion": "^11.0.14",
    "lucide-react": "^0.358.0",
    "next": "14.1.3",
    "next-auth": "^4.24.7",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.1",
    "siwe": "^2.1.4",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "viem": "^2.8.11",
    "wagmi": "^2.5.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
{
  "name": "...",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "npm-run-all dev:init --parallel dev:frontend dev:backend",
    "dev:frontend": "next dev -p 3003",
    "dev:backend": "convex dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-toast": "^1.1.5",
    "@rainbow-me/rainbowkit": "^2.0.2",
    "@rainbow-me/rainbowkit-siwe-next-auth": "^0.4.0",
    "@tanstack/react-query": "^5.28.4",
    "@xixixao/uploadstuff": "^0.0.5",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "convex": "^1.10.0",
    "convex-helpers": "^0.1.25",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.0.0",
    "framer-motion": "^11.0.14",
    "lucide-react": "^0.358.0",
    "next": "14.1.3",
    "next-auth": "^4.24.7",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.1",
    "siwe": "^2.1.4",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7",
    "viem": "^2.8.11",
    "wagmi": "^2.5.7",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
Michal Srb
Michal Srb•12mo ago
@winsoroaks I cannot reproduce the issue. Have you run npm install ? Do you have the package in your node_modules Can you tell me how you set up the repo? What steps did you take to get to this error?
winsoroaks
winsoroaks•12mo ago
weird... i did. but no worries i copied and pasted the files into my repo and it works now. thank you for helping to look into it🙏

Did you find this page helpful?