Optional chaining in axios-retry causes Webpack errors in Create React App

[Josehower]

Description

I encountered an issue when using the latest version of axios-retry in a project created with Create React App (CRA). The library's use of optional chaining (?.) in the distributed package causes Webpack to fail with a syntax error because CRA does not transpile code from node_modules by default.

This makes it difficult to use the library in projects with standard CRA configurations without additional customization.

---

Steps to Reproduce

1. Create a new CRA project:

   npx create-react-app my-app
   cd my-app
   npm install axios-retry

2. Add the following code to App.js:

   import axios from 'axios';
   import axiosRetry from 'axios-retry';
   
   axiosRetry(axios, { retries: 3 });

3. Start the development server:

   npm start

---

Observed Behavior

The development server fails to start and shows the following error:

Module parse failed: Unexpected token (27:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

---

Expected Behavior

The library should work seamlessly in a default CRA setup without requiring additional Webpack customization.

---

Possible Solution

To improve compatibility, consider:

1. Transpiling the distributed code to ES5 before publishing to npm.
2. Including a pre-transpiled version in the dist/ directory or similar.
3. Specifying the supported environments using the engines field in package.json.

---

Environment

• axios-retry version: 4.5.0
• react-scripts: 5.0.1
• Node.js version: 10.9.0
• react: 18.3.1

---

[Jeremy-F]

Node.js version: 10.9.0

Optional chaining (?.) is only available starting from Node.js version 14 (see: Node.js v14.0.0 release & Stack Overflow).

You should upgrade your Node.js version to 14 or higher — this will resolve the issue.

However:

• This library specifies TypeScript typings for Node.js 20 (see package.json).
• Node.js 10 has been end-of-life since April 30, 2021 (Node.js release schedule).
• The current LTS version of Node.js is 22 (Node.js release schedule).
• If you check your package-lock.json, you’ll likely see several sections with "engine" fields requiring Node.js versions >= 14.

In summary:

1. Upgrade your Node.js version to resolve the issue.
2. The repository might also consider building with a lower target (e.g., ES5) to ensure compatibility with older Node.js versions, but IMO upgrading Node.js is the recommended approach.

[Josehower]

This issue does not appear to be related to the Node.js version. I have already updated to Node.js 20, and the error persists. Instead, the root cause lies with the Babel and Webpack versions bundled with Create React App (CRA), which are not fully compatible with the optional chaining (?.) syntax used in the axios-retry package.

While more recent Babel and Webpack configurations can handle this syntax, CRA abstracts these tools, preventing users from updating or configuring them directly without ejecting or patching react-scripts.

Given that the use of optional chaining here is non-critical, it might be worth considering a more compatible approach to avoid breaking projects built with older CRA versions. This would improve the library's usability across a broader range of setups.

This is the exact error

Error: Webpack Compilation Error
./node_modules/axios-retry/dist/esm/index.js 27:22
Module parse failed: Unexpected token (27:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| export function isSafeRequestError(error) {
>     if (!error.config?.method) {
|         // Cannot determine if the request can be retried
|         return false;