stripe__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

[stylessh]

Describe the bug

I receive an error when importing stripe:

I'm using next 13 with app dir and latest version of stripe.

To Reproduce

1. Create a next 13 app.
2. Create a stripe.ts file to initialize the library.
3. Try to use it in a server route.

Expected behavior

The library should return the expected Stripe object since it's not marking any apparent error.

Code snippets

No response

OS

Windows 11

Node version

Node v18.16.0

Library version

"stripe": "12.14.0"

API version

2022-11-15

Additional context

No response

[remi-stripe]

@stylessh The webpack error makes me think you are importing/using the stripe-node library in your client-side code. The stripe-node library is used server-side for API requests with your Secret API key and it is not compatible with a browser environment. For client-side API requests you would use a separate library called Stripe.js that can either be imported directly or using an npm package and the different options are covered in our docs here.

If you're confident this is only happening with your server-side code we would need a way to quickly reproduce this end to end with the exact code you're using!

[remi-stripe]

@stylessh I paired with someone else on my team to see if they knew what could cause this and they mentioned you might need to change your tsconfig.json file from

    "moduleResolution": "bundler",
    "resolveJsonModule": true,

to

    "moduleResolution": "node",
    "resolveJsonModule": true,

[stylessh]

@remi-stripe first, thanks for helping me!

I'm pretty sure i'm importing the library on server side, next.js is server first and it executes all the files on the server unless you explicitly set it to client. I'm gonna try changing the tsconfig en let you know

[stylessh]

Already had those options 🥲

[remi-stripe]

@stylessh can you give a simple end to end repro? A repo with all the info would help

[stylessh]

Invited you to the repo, check the stripe branch

[stylessh]

be sure to copy .env.example to .env.local keys

[stylessh]

this is the video example of the user flow and error

[remi-stripe]

@stylessh Can you make a clean public repo that has the exact information needed to reproduce the issue? Sorry for the hassle but I'm not the only person helping and getting a clean repro without any manual steps would help. It really should solely be loading stripe-node and nothing specific to your own code/project beyond reproducing the error

[stylessh]

Hey, I just debugged the issue. I have a webpack custom rule to load the canvas.node module with the raw-loader.

This probably matched with a stripe file ending having .node. I changed the regex to match only canvas.node, seems to load the library now.

[remi-stripe]

Glad you figured it out and thanks for taking the time to update us with the root cause/fix, that's really appreciated :)

[element-software]

Hey, I just debugged the issue. I have a webpack custom rule to load the canvas.node module with the raw-loader.

This probably matched with a stripe file ending having .node. I changed the regex to match only canvas.node, seems to load the library now.

Exactly the same issue I had, your fix worked for me. Thank you!