next.js/examples/with-stripe-typescript can't build

[CharlesCCC]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.18.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.2
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.8.4

Which example does this report relate to?

with-stripe-typescript

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I tried to deploy https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript to Vercel. but got the following error when running npm run build

> next build

- info Linting and checking validity of types .- error ESLint must be installed in order to run during builds: npm install --save-dev eslint
- info Linting and checking validity of types .Failed to compile.

./components/CartSummary.tsx:41:24
Type error: Argument of type '{ sessionId: any; }' is not assignable to parameter of type 'string'.

  39 |     }
  40 | 
> 41 |     redirectToCheckout({ sessionId: response.id })
     |                        ^
  42 |   }
  43 | 
  44 |   return (

Expected Behavior

it should finish run build without error.

To Reproduce

git clone --depth=1 https://github.com/vercel/next.js -b canary
cd next.js/examples/with-stripe-typescript
npm i
npm run build

[CharlesCCC]

Additional note:

I'm able to run the project locally npm run dev but npm run build error out. (Doesn't make sense to me).

[ciruz]

This example not uses the deprecated stripe method (https://stripe.com/docs/js/deprecated/redirect_to_checkout) it uses a different package [Use Shopping Cart](https://useshoppingcart.com/) where the method expects a string instead of an object https://github.com/dayhaysoos/use-shopping-cart/blob/275cb65f3d2fccb15857f4b9278cbbfca11eaf7a/use-shopping-cart/react/index.d.ts#L65.

I fixed the example for you, but there where some other issues too, like an outdated Stripe Version, after updating some depcrecated fields and also some Typescript Errors aswell.

[CharlesCCC]

@ciruz Thank you. I was actually able get this part of the code fixed, among other things like you mentioned.
The last one I'm getting is

Failed to compile.

./pages/api/checkout_sessions/cart.ts
Module not found: Package path ./utilities/serverless is not exported from package /Users/congchencai/Sandbox/next/with-stripe-typescript/node_modules/use-shopping-cart (see exports field in /Users/congchencai/Sandbox/next/with-stripe-typescript/node_modules/use-shopping-cart/package.json)

https://nextjs.org/docs/messages/module-not-found

[ciruz]

Hey @CharlesCCC,

checkout the code:
4b1ab89

Also since you will get an error that serverless does not has a proper ts declaration file, I added a @ts-ignore for the import too.

// @ts-ignore
import { validateCartItems } from 'use-shopping-cart/utilities'

[ciruz]

Hey @CharlesCCC just pushed a fix for the ts error dayhaysoos/use-shopping-cart#325, so if this PR get's merged, you can remove the ts-ignore then.

[CharlesCCC]

@ciruz You rock !!! Thank you so much for the quick turn-around.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.