__extends is not a function when used on page with Require.js

[BrianT1414]

Description

When I use this library on a page that uses Require.js, I get the error __extends is not a function.

Paste includes a handful of instances that attempt to use Require.js to load a dependency first, and if it isn't present on the window it loads the module normally. The problem is when Require.js is present, it loads the dependency asynchronously, causing errors like __extends not being defined. I'm not sure that the behavior is intentional, but rather probably a side-effect of other dependencies being bundled into the published code.

The @twilio-paste/uid-library seems to be the first component erroring out (actually erroring in the react-uid package used by paste's uid-library), but I believe there may be other instances of Require.js attempting to be used.

The full error stack trace is

Uncaught TypeError: __extends is not a function
at eval (index.es.js:1:10761)
at eval (index.es.js:1:11319)
at ./node_modules/@twilio-paste/uid-library/dist/index.es.js (index.js?ts=1691112061873:304:1)
at options.factory (webpack.js?ts=1691112061873:660:31)
at webpack_require (webpack.js?ts=1691112061873:37:33)
at fn (webpack.js?ts=1691112061873:315:21)
at eval (LinkExternalIcon.js:7:83)
at ./node_modules/@twilio-paste/icons/esm/LinkExternalIcon.js (index.js?ts=1691112061873:205:1)
at options.factory (webpack.js?ts=1691112061873:660:31)
at webpack_require (webpack.js?ts=1691112061873:37:33)
at fn (webpack.js?ts=1691112061873:315:21)
at eval (index.es.js:10:98)
at ./node_modules/@twilio-paste/anchor/dist/index.es.js (index.js?ts=1691112061873:18:1)
at options.factory (webpack.js?ts=1691112061873:660:31)
at webpack_require (webpack.js?ts=1691112061873:37:33)
at fn (webpack.js?ts=1691112061873:315:21)
at eval (anchor.js:1:81)
at ./node_modules/@twilio-paste/core/dist/anchor.js (index.js?ts=1691112061873:62:1)
at options.factory (webpack.js?ts=1691112061873:660:31)
at webpack_require (webpack.js?ts=1691112061873:37:33)
at fn (webpack.js?ts=1691112061873:315:21)
at eval (index.tsx:6:83)
at ./pages/index.tsx (index.js?ts=1691112061873:336:1)
at options.factory (webpack.js?ts=1691112061873:660:31)
at webpack_require (webpack.js?ts=1691112061873:37:33)
at fn (webpack.js?ts=1691112061873:315:21)
at eval (?f735:5:16)
at eval (route-loader.js:233:51)

Link to Reproduction

Codesandbox cannot reproduce this

Steps to reproduce

1. Start with the Next.js template -> npx create-next-app --example https://github.com/twilio-labs/paste/tree/main/packages/paste-nextjs-template my-paste-app
2. Go to _document.tsx and add <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"/> to the Head section.
3. Install, build, and see the error.

Paste Core Version

^19.0.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

The actual code causing the error is partially below, if it helps to see exactly where/why Require.js is being referenced

var require_tslib = __commonJS({
    "../../../node_modules/react-uid/node_modules/tslib/tslib.js"(exports, module) {
        var __extends2, __assign2, __rest2, __decorate2, __param2, __metadata2, __awaiter2, __generator2, __exportStar2, __values2, __read2, __spread2, __spreadArrays2, __await2, __asyncGenerator2, __asyncDelegator2, __asyncValues2, __makeTemplateObject2, __importStar2, __importDefault2, __classPrivateFieldGet2, __classPrivateFieldSet2, __createBinding2;
        (function(factory) {
            var root = typeof global == "object" ? global : typeof self == "object" ? self : typeof this == "object" ? this : {};
            typeof define == "function" && define.amd ? define("tslib", ["exports"], function(exports2) {
                factory(createExporter(root, createExporter(exports2)))
            }) : typeof module == "object" && typeof module.exports == "object" ? factory(createExporter(root, createExporter(module.exports))) : factory(createExporter(root));
            function createExporter(exports2, previous) {
                return exports2 !== root && (typeof Object.create == "function" ? Object.defineProperty(exports2, "__esModule", {
                    value: !0
                }) : exports2.__esModule = !0),
                function(id, v) {
                    return exports2[id] = previous ? previous(id, v) : v
                }
            }
        }

typeof define == "function" && define.amd is where it checks if Require.js' define function is present and if so uses it.

[serifluous]

Hey @BrianT1414! Check out our response to this Discussion: #2850

[SiTaggart]

We might have a fix for this in the works

[SiTaggart]

We believe this is now fixed in v20 of Paste core.