error TypeError: stripe__WEBPACK_IMPORTED_MODULE_1__.default is not a constructor

[fvkramer]

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 #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]

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]

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]

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: #1896 (comment)