search

stripe / stripe-node

Node.js library for the Stripe API.
https://stripe.com
MIT License
3.88k stars 751 forks source link

error TypeError: stripe__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor #1937

Closed fvkramer closed 1 year ago

fvkramer commented 1 year ago

Describe the bug

I'm adding stripe integration into a NextJS 13.4+ app. I have an endpoint that looks like this:

import Stripe from 'stripe';

export async function POST(request, response) {
  const stripe = new Stripe(
    process.env.STRIPE_SECRET_KEY!, {
      //@ts-ignore
      apiVersion: '2023-10-16'
    }
  )

but running into the following error when the endpoint is triggered:

- error TypeError: stripe__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor
    at POST (webpack-internal:///(rsc)/./app/api/webhooks/stripe/route.ts:11:20)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:43)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:111:36)
    at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/context/NoopContextManager.js:26:19)
    at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/api/context.js:55:46)
    at NoopTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/trace/NoopTracer.js:60:31)
    at ProxyTracer.startActiveSpan (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/trace/ProxyTracer.js:36:24)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:107)
    at NoopContextManager.with (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/context/NoopContextManager.js:26:19)
    at ContextAPI.with (webpack-internal:///(rsc)/./node_modules/@opentelemetry/api/build/src/api/context.js:55:46)
    at NextTracerImpl.trace (webpack-internal:///(rsc)/./node_modules/next/dist/server/lib/trace/tracer.js:100:32)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:242:53)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:42:24)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:196:97)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at Object.wrap (webpack-internal:///(rsc)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:82:24)
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:195:75)
    at AsyncLocalStorage.run (node:async_hooks:330:14)
    at AppRouteRouteModule.execute (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:192:56)
    at AppRouteRouteModule.handle (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:315:41)
    at doRender (/Users/filippkramer/work/careerstudio/node_modules/next/dist/server/base-server.js:1091:56)
    at cacheEntry.responseCache.get.incrementalCache.incrementalCache (/Users/***/node_modules/next/dist/server/base-server.js:1300:34)
    at /Users/filippkramer/work/careerstudio/node_modules/next/dist/server/response-cache/index.js:99:42
    at ResponseCache.get (/Users/filippkramer/work/careerstudio/node_modules/next/dist/server/response-cache/index.js:149:11)
    at DevServer.renderToResponseWithComponentsImpl (/Users/filippkramer/work/careerstudio/node_modules/next/dist/server/base-server.js:1219:53)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

This may be a NextJS/config issue, but need a second pair of eyes. Also, I saw this issue posted previously https://github.com/stripe/stripe-node/issues/1000, but it was closed due to inactivity. So, resurfacing.

To Reproduce

Node Version: 18.12.0

Package.json:

"dependencies": {
    "@aws-sdk/client-s3": "^3.418.0",
    "@clerk/nextjs": "^4.23.5",
    "@editorjs/code": "^2.8.0",
    "@editorjs/editorjs": "^2.26.5",
    "@editorjs/embed": "^2.5.3",
    "@editorjs/header": "^2.7.0",
    "@editorjs/inline-code": "^1.4.0",
    "@editorjs/link": "^2.5.0",
    "@editorjs/list": "^1.8.0",
    "@editorjs/paragraph": "^2.9.0",
    "@editorjs/table": "^2.2.1",
    "@heroicons/react": "^2.0.18",
    "@hookform/resolvers": "^3.1.0",
    "@mailchimp/mailchimp_marketing": "^3.0.80",
    "@next-auth/prisma-adapter": "^1.0.6",
    "@prisma/client": "^4.13.0",
    "@radix-ui/react-accessible-icon": "^1.0.2",
    "@radix-ui/react-accordion": "^1.1.1",
    "@radix-ui/react-alert-dialog": "^1.0.3",
    "@radix-ui/react-aspect-ratio": "^1.0.2",
    "@radix-ui/react-avatar": "^1.0.2",
    "@radix-ui/react-checkbox": "^1.0.3",
    "@radix-ui/react-collapsible": "^1.0.2",
    "@radix-ui/react-context-menu": "^2.1.3",
    "@radix-ui/react-dialog": "^1.0.3",
    "@radix-ui/react-dropdown-menu": "^2.0.4",
    "@radix-ui/react-hover-card": "^1.0.5",
    "@radix-ui/react-label": "^2.0.1",
    "@radix-ui/react-menubar": "^1.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.2",
    "@radix-ui/react-popover": "^1.0.5",
    "@radix-ui/react-progress": "^1.0.2",
    "@radix-ui/react-radio-group": "^1.1.2",
    "@radix-ui/react-scroll-area": "^1.0.3",
    "@radix-ui/react-select": "^1.2.1",
    "@radix-ui/react-separator": "^1.0.2",
    "@radix-ui/react-slider": "^1.1.1",
    "@radix-ui/react-slot": "^1.0.1",
    "@radix-ui/react-switch": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.3",
    "@radix-ui/react-toast": "^1.1.3",
    "@radix-ui/react-toggle": "^1.0.2",
    "@radix-ui/react-toggle-group": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.5",
    "@react-pdf/renderer": "^3.1.12",
    "@t3-oss/env-nextjs": "^0.2.2",
    "@tailwindcss/forms": "^0.5.6",
    "@typescript-eslint/parser": "^5.59.0",
    "@vercel/analytics": "^1.0.0",
    "@vercel/og": "^0.0.21",
    "ai": "^2.2.12",
    "cheerio": "^1.0.0-rc.12",
    "class-variance-authority": "^0.4.0",
    "clsx": "^1.2.1",
    "cmdk": "^0.1.22",
    "concurrently": "^8.0.1",
    "contentlayer": "^0.3.1",
    "date-fns": "^2.29.3",
    "file-loader": "^6.2.0",
    "fs": "^0.0.1-security",
    "langchain": "^0.0.146",
    "lucide-react": "^0.92.0",
    "mammoth": "^1.6.0",
    "mongodb": "^6.1.0",
    "next": "13.4.19",
    "next-auth": "4.22.1",
    "next-contentlayer": "^0.3.1",
    "next-themes": "^0.2.1",
    "nodemailer": "^6.9.1",
    "openai": "^4.6.0",
    "openai-edge": "^1.2.2",
    "pdfreader": "^3.0.2",
    "postmark": "^3.0.15",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-color": "^2.19.3",
    "react-day-picker": "^8.7.1",
    "react-dom": "^18.2.0",
    "react-editor-js": "^2.1.0",
    "react-hook-form": "^7.43.9",
    "react-pdf": "^7.3.3",
    "react-quill": "^2.0.0",
    "react-spinners": "^0.13.8",
    "react-textarea-autosize": "^8.4.1",
    "sharp": "^0.31.3",
    "shiki": "^0.11.1",
    "stripe": "14.1.0",
    "tailwind-merge": "^1.12.0",
    "tailwindcss-animate": "^1.0.5",
    "uuid": "^9.0.1",
    "web-streams-polyfill": "^3.2.1",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.1",
    "@commitlint/config-conventional": "^17.6.1",
    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
    "@tailwindcss/line-clamp": "^0.4.4",
    "@tailwindcss/typography": "^0.5.9",
    "@types/node": "^18.16.0",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.39.0",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-tailwindcss": "^3.11.0",
    "husky": "^8.0.3",
    "mdast-util-toc": "^6.1.1",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "pretty-quick": "^3.1.3",
    "prisma": "^4.13.0",
    "raw-loader": "^4.0.2",
    "rehype": "^12.0.1",
    "rehype-autolink-headings": "^6.1.1",
    "rehype-pretty-code": "^0.9.5",
    "rehype-slug": "^5.1.0",
    "remark": "^14.0.2",
    "remark-gfm": "^3.0.1",
    "tailwindcss": "^3.3.1",
    "typescript": "4.7.4",
    "unist-util-visit": "^4.1.2"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
    },
    "plugins": [
      {
        "name": "next"
      }
    ],
    "strictNullChecks": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next.config.mjs", "app/api/resume/upload"  ],
  "exclude": ["node_modules"]
}

Expected behavior

Stripe instance should be instantiated without problems.

Code snippets

No response

OS

macOS

Node version

Node V18.12.0

Library version

14.1.0

API version

Latest

Additional context

No response

pakrym-stripe commented 1 year ago

Hi @fvkramer can you please provide a smaller repro? It's very hard to debug issues like this without an actual project, webpack config, etc. I'd recommend checking webpack config to see if any unintended transformations are happening.

We also have a nextjs sample at https://github.com/stripe/stripe-node/tree/master/examples/webhook-signing/nextjs

fvkramer commented 1 year ago

Hey @pakrym-stripe, I found the issue comparing my repo to a fresh install.

I had these lines in the next.config.js

   config.module.rules.push({
      test: /\.node/,
      use: 'raw-loader',
    });

Somehow this conflicts with the stripe package. That config rule I added because I'm using a pdf rendering library, and needed this in my webpack. I'm not sure why it conflicts, but removing those lines solves the above issue.

pakrym-stripe commented 1 year ago

There is a file called stripe.node.js in the package. Looks like that rule matches is and breaks Stripe's module loading. There was another customer reporting a similar issue, consider reusing their solution: https://github.com/stripe/stripe-node/issues/1896#issuecomment-1711802291