zid
zid•2y 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•2y ago
hey @zid , have you run npm install after adding @xixixao/uploadstuff/react as a dependency?
zid
zidOP•2y 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•2y ago
Is it an issue of require instead of import?
Michal Srb
Michal Srb•2y 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•2y 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•14mo 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•14mo ago
currently importing 
import { useUploadFiles, UploadFileResponse } from "@xixixao/uploadstuff/react"
import { useUploadFiles, UploadFileResponse } from "@xixixao/uploadstuff/react"
Michal Srb
Michal Srb•14mo ago
@winsoroaks can you publish a repo that reproduces the issue? If not, can you share your package.json as well?
winsoroaks
winsoroaks•14mo 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•14mo 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•14mo 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?