Adding connect-js to page reassigns window._ to lodash v4.17.21

[mikejacobson-MyTime]

I have a hybrid AngularJS/Angular app. To support the legacy code, window._ references Underscore.

However, when I make the call to loadConnectAndInitialize (which adds the connect-js library to the page because I'm importing it using @stripe/connect-js/pure), window._ is reassigned to reference Lodash (v4.17.21), which breaks our legacy code (Underscore has some methods that Lodash does not).

This is using connect-js v3.3.16.

Would it be possible to scope that reference within the connect-js library instead of rewriting _ on the window object?

Here's a StackBlitz demonstrating the issue:
https://stackblitz.com/edit/stackblitz-starters-5mcvnf?file=src%2Fmain.ts
Instructions are on its page.

[marcusbolton]

I have ran into this exact problem as well. This breaks some of our legacy code that depends on window._ using Underscore.js which gets overwritten when connect.js loads.

[tophersimon]

This issue is preventing us from using ANY of the Stripe Embeddable Components. :-(

[mikejacobson-MyTime]

@marcusbolton @tophersimon not sure if it helps your scenarios, but I implemented a workaround to prevent it from being reassigned.

Before calling loadConnectAndInitialize, we call this method to make window._ readonly:

private preventUnderscoreReassign() {
  if (this.isUnderscoreFrozen) {
    return
  }

  Object.defineProperty(this.window, '_', {
    value: (this.window as any)._,
    writable: false,
  })

  this.isUnderscoreFrozen = true
}

Not a great solution but it's worked so far, and hasn't broken anything yet. 🤷‍♂️

[marcusbolton]

@marcusbolton @tophersimon not sure if it helps your scenarios, but I implemented a workaround to prevent it from being reassigned.

Before calling loadConnectAndInitialize, we call this method to make window._ readonly:

private preventUnderscoreReassign() {
  if (this.isUnderscoreFrozen) {
    return
  }

  Object.defineProperty(this.window, '_', {
    value: (this.window as any)._,
    writable: false,
  })

  this.isUnderscoreFrozen = true
}

Not a great solution but it's worked so far, and hasn't broken anything yet. 🤷‍♂️

It looks like this workaround solved the issue for us and we were able to call loadConnectAndInitialize and load the script without breaking our underscore.js usage. Ideally Stripe will fix this issue long term.

Thanks for sharing this was helpful!

[jorgea-stripe]

Hello, we have fixed this issue on our end. Thank you for reporting it! The window._ should no longer be affected when loading Connect embedded components. If it is, please reactivate or file another issue!