TypeError: Cannot set property 'svg4everybody' of undefined

[ferdingler]

Describe the bug

Upgrading to uswds@2.10.0 causes the following error in a Typescript React application:

Uncaught TypeError: Cannot set property 'svg4everybody' of undefined
    at Object.<anonymous> (:3000/static/js/1.chunk.js:409239)
    at :3000/static/js/1.chunk.js:409240
    at Object.push../node_modules/uswds/dist/js/uswds.js.39 (:3000/static/js/1.chunk.js:409242)
    at o (:3000/static/js/1.chunk.js:402956)
    at :3000/static/js/1.chunk.js:402958
    at Object.push../node_modules/uswds/dist/js/uswds.js.37../custom-event (:3000/static/js/1.chunk.js:409199)
    at o (:3000/static/js/1.chunk.js:402956)
    at :3000/static/js/1.chunk.js:402958
    at Object.push../node_modules/uswds/dist/js/uswds.js.40../components (:3000/static/js/1.chunk.js:409391)
    at o (:3000/static/js/1.chunk.js:402956)
    at r (:3000/static/js/1.chunk.js:402965)
    at Object.<anonymous> (:3000/static/js/1.chunk.js:402971)
    at Object../node_modules/uswds/dist/js/uswds.js (:3000/static/js/1.chunk.js:409836)
    at __webpack_require__ (:3000/static/js/bundle.js:790)
    at fn (:3000/static/js/bundle.js:151)
    at Module../src/index.tsx (:3000/static/js/main.chunk.js:17835)
    at __webpack_require__ (:3000/static/js/bundle.js:790)
    at fn (:3000/static/js/bundle.js:151)
    at Object.1 (:3000/static/js/main.chunk.js:19442)
    at __webpack_require__ (:3000/static/js/bundle.js:790)
    at checkDeferredModules (:3000/static/js/bundle.js:46)
    at Array.webpackJsonpCallback [as push] (:3000/static/js/bundle.js:33)
    at :3000/static/js/main.chunk.js:1

Steps to reproduce the bug

In a standard create-react-app:

1. Upgrade from uswds@2.9.0 to uswds@2.10.0 in package.json.
2. Yarn install.
3. Yarn start.
4. App crashes with the error above.

System setup

• USWDS version: 2.10.0
• Device: Macbook Pro
• Operating system: macOS Catalina 10.15.7
• Browser and version: Google Chrome Version 87.0.4280.88

Additional context

Our application was working without a problem with the previous version uswds@2.9.0.
Our package.json can be found here: https://github.com/awslabs/performance-dashboard-on-aws/blob/mainline/frontend/package.json.

[fpigeonjr]

Getting the same error on upgrade to 2.10 in a Gatsby-React application.

[plummer-flex]

Seeing this same issue in Vue.

[thisisdano]

Fix is on the way

[linehammer]

In JavaScript almost everything is an object, null and undefined are exception. if a variable has been declared, but has not been assigned a value, is automatically assigned the value undefined . Therefore, if you try to access the value of such variable, it will throw Uncaught TypeError cannot set property '0' of undefined/null .

JavaScript null and undefined is one of the main reasons to produce a runtime errors . This happens because you don't check the value of unknown return variables before using it. If you are not sure a variable that will always have some value, the best practice is to check the value of variables for null or undefined before using them. The standard way to catch null and undefined simultaneously is this:

if (variable == null) {
     // your code here.
}

Because null == undefined is true, the above code will catch both null and undefined.

Also you can write equivalent to more explicit but less concise:

if (variable === undefined  variable === null) {
     // your code here.
}

This should work for any variable that is either undeclared or declared and explicitly set to null or undefined.