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
Clone this repository which is a fresh create-react-app project.
Edit app.js to replace REPLACE_WITH_KEY with a valid Smartystreets embedded key.
Click the button that says Click me to create smarty client
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.
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.
Steps to Reproduce
create-react-app
project.app.js
to replaceREPLACE_WITH_KEY
with a valid Smartystreets embedded key.npm start
and open http://localhost:3000 to view it in your browser.Click me to create smarty client
Uncaught runtime errors
should appearContext
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 usingconst 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.