Stripe CLI setup Fixed Priced Subs with Node + React not working

[ElliottJPerry]

Bug report

Describe the bug

Setting up the Fixed Priced Subs subscription use case Stripe sample using the Stripe CLI with options Node + React is not working. After running the Stripe CLI tool, installing dependencies and running the server, navigating to / throws error:

Error: ENOENT: no such file or directory, stat '../subscription-use-cases/client/register.html'

This is because of the following endpoint in server.js:

app.get('/', (req, res) => {
  const path = resolve(process.env.STATIC_DIR + '/register.html');
  res.sendFile(path);
});

To Reproduce

1. Using the Stripe CLI, run stripe samples create subscription-use-cases.
2. Select fixed-priced-subscriptions.
3. Select react.
4. Select node.
5. Run cd subscription-use-cases/server (as per README).
6. Run npm install (as per Node server README).
7. Run npm start (as per Node server README).
8. Navigate to /.

Expected behavior

Successful launch of Fixed Priced Subs subscription use case Stripe sample.

Screenshots

File tree after running Stripe CLI:

[davidgs]

Not working for me, but with a different error.

% npm start

> fixed-price-subscription@0.2.0 start
> react-scripts start

ℹ ｢wds｣: Project is running at http://192.168.120.226/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/davidgs/github.com/subscription-use-cases/client/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/davidgs/github.com/subscription-use-cases/client/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/davidgs/github.com/subscription-use-cases/client/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/davidgs/github.com/subscription-use-cases/client/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v21.5.0

Is Node v21.5.0 not supported?

EDIT: Seems the packages in this sample are extremely out of date:

% npx npm-check-updates
Checking /Users/davidgs/github.com/subscription-use-cases/client/package.json
[====================] 11/11 100%

 @stripe/react-stripe-js        ^1.1.2  →    ^2.4.0
 @stripe/stripe-js              ^1.6.0  →    ^2.3.0
 @testing-library/jest-dom      ^4.2.4  →    ^6.2.0
 @testing-library/react         ^9.3.2  →   ^14.1.2
 @testing-library/user-event    ^7.1.2  →   ^14.5.2
 autoprefixer                   ^9.8.0  →  ^10.4.16
 postcss-cli                    ^7.1.1  →   ^11.0.0
 react                        ^16.13.1  →   ^18.2.0
 react-dom                    ^16.13.1  →   ^18.2.0
 react-router-dom               ^5.2.0  →   ^6.21.2
 react-scripts                   3.4.1  →     5.0.1

Run npx npm-check-updates -u to upgrade package.json

Unfortunately, upgrading them introduces a whole host of other problems:

ERROR in ./src/Subscribe.js 172:21-31
export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

(about a dozen of these, with different line numbers in Subscribe,js

I think this demo needs some work ... :-)

[hideokamoto-stripe]

@davidgs Thank you for the report. The react sample was created using Create React App. The error reported seems to be due to a library used internally by Create React App: https://github.com/facebook/create-react-app/issues/11708#issuecomment-986309926

As there seems to be no releases from Create React App from the year 2022, it may be necessary to consider migrating to something like Vite. As a temporary workaround, please use NODE_OPTIONS='--openssl-legacy-provider' option like the following: NODE_OPTIONS='--openssl-legacy-provider' react-scripts start

Best.

[davidgs]

Turns out that, I believe, it's because you rely on React 16, so any attempt to use React 18 (or even Node >16.x) fails.

Might be time to update the libraries and dependencies. :-)

[hideokamoto-stripe]

Hello @davidgs , I update the React example to replace from CRA to Vite.

956

Could you try to create a new one from Stripe CLI (stripe samples create subscription-use-cases) ? Thanks.

[davidgs]

Vite? So an entirely different build system? I'm a little lost as to how that's going to help rather than just updating the requirements to more modern versions of Node and React?

"react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0"

So still React 16.

Also:

Checking /Users/davidgs/github.com/subscription-use-cases/package.json
[====================] 8/8 100%

 autoprefixer    ^9.7.6  →  ^10.4.17
 body-parser    ^1.19.0  →   ^1.20.2
 concurrently     4.1.2  →     8.2.2
 cookie-parser   ^1.4.5  →    ^1.4.6
 dotenv          ^8.0.0  →   ^16.4.1
 express        ^4.17.1  →   ^4.18.2
 postcss-cli     ^7.1.1  →   ^11.0.0
 stripe          ^7.4.0  →  ^14.15.0

So it's way out of date with the stripe library as well.

On the client side, things are not much better:

Checking /Users/davidgs/github.com/subscription-use-cases/client/package.json
[====================] 9/9 100%

 @stripe/react-stripe-js    ^1.1.2  →    ^2.4.0
 @stripe/stripe-js          ^1.6.0  →    ^2.4.0
 autoprefixer               ^9.8.0  →  ^10.4.17
 postcss-cli                ^7.1.1  →   ^11.0.0
 react                    ^16.13.1  →   ^18.2.0
 react-dom                ^16.13.1  →   ^18.2.0
 react-router-dom           ^5.2.0  →   ^6.22.0

Everything is at least a full major-release behind.

[hideokamoto-stripe]

We migrated this example code to Vite for resolving this error: https://github.com/stripe-samples/subscription-use-cases/issues/730#issuecomment-1890778148

Now we're continuing to work to upgrade each package.

[davidgs]

Interesting that I have never encountered this issue with any other CRA application. I've never had to resort to Vite.