Expected Behavior

core.ClientBuilder.buildUsStreetApiClient() should return a client object without any errors. The SDK should work in a React project using Webpack 5.

Current Behavior

Calling that SDK method on the client builder causes the following runtime error.

Cannot read properties of undefined (reading 'create')
TypeError: Cannot read properties of undefined (reading 'create')
    at new HttpSender (http://localhost:3000/static/js/bundle.js:36960:32)
    at ClientBuilder.buildSender (http://localhost:3000/static/js/bundle.js:36782:24)
    at ClientBuilder.buildClient (http://localhost:3000/static/js/bundle.js:36799:28)
    at ClientBuilder.buildUsStreetApiClient (http://localhost:3000/static/js/bundle.js:36802:17)
    at getSmartyclient (http://localhost:3000/main.39f59549c9ac987ab5ea.hot-update.js:32:30)
    at onClick (http://localhost:3000/main.39f59549c9ac987ab5ea.hot-update.js:41:24)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:9589:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:9633:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:9690:35)
    at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:9704:29)

Steps to Reproduce

1. Clone this repository which is a fresh create-react-app project.
2. Edit app.js to replace REPLACE_WITH_KEY with a valid Smartystreets embedded key.
3. Run npm start and open http://localhost:3000 to view it in your browser.
4. Click the button that says Click me to create smarty client
5. Uncaught runtime errors should appear

Context

This line of HttpSender.js appears to be the cause of the error. It attempts to call Axios.create(); but the reference to Axios does not load it correctly.

This issue from webpack might be related. The suggested fix is to use ES6 module syntax to import Axios.

On the example repository, there are two other buttons which highlight the issue with HttpSender using const Axios = require("axios").default;

Click me to create an axios instance with CommonJS require.default syntax will result in the same runtime error when it attempts to create an axios instance using const Axios = require("axios").default;

Click me to create an axios instance with ES6 import syntax will work without errors and log the instance object into the console.