[BUG] Plugins Broken when built with Twilio CLI 6.2.0

[moretalk]

Description

A clear and concise description of what the bug is.

Versions

You can find the version of your @twilio/plugin-flex by typing twilio plugins.

package	version
@twilio-labs/plugin-flex	6.2.0
flex-plugin-scripts	6.2.0
node	16.19.1
npm	8.19.3

Package.json

Please include the entire content of your package.json.

{ "name": "plugin-ciptex-template", "version": "0.2.0", "private": true, "scripts": { "build": "twilio flex:plugins:build", "preinstall": "./preinstall.mjs", "postinstall": "flex-plugin pre-script-check", "start": "twilio flex:plugins:start --include-remote" }, "dependencies": { "@ciptex/race-ui": "^1.28.13", "@twilio/flex-plugin-scripts": "^6.2.0", "react": "16.13.1", "react-dom": "16.13.1", "react-emotion": "9.2.12" }, "devDependencies": { "@twilio/flex-ui": "^1.34.4", "@typescript-eslint/eslint-plugin": "^6.7.4", "@typescript-eslint/parser": "^6.7.4", "eslint": "^8.50.0", "eslint-plugin-react": "^7.33.2", "react-test-renderer": "^16.13.1", "typescript": "^5.2.2" } }

Steps to Reproduce

Please provide the steps to reproduce this bug:

1. Build plugin with twilio flex:plugins:build

Plugins built using 6.2.0 of CLI Plugin produce the error that Uncaught ReferenceError: global is not defined when loaded in flex and contain incorrect references to global.CSS in the code. Replicated this behaviour across every plugin.

Plugins function as expected when built with 6.1.2 can contain no reference to global

Expected Behavior

Plugins to Build and work as expected

[aishwarya-tw]

Hi @moretalk. We are unable to reproduce this with a vanilla Flex Plugin without any modifications. Have you modified the webpack config in your plugin code? Please note that in the latest version of the Plugin CLI (6.2.0), we have moved to webpack 5. I would recommend checking if you are using any dependency that is not compatible with webpack 5.

[tmbdrogba]

There is definitely an issue with css loader, here we can no longer start if we import a simple .scss in the plugin.

Nothing changed in the webpack config.

resolve-url-loader: webpack misconfiguration webpack or the upstream loader did not supply a source-map

[moretalk]

I agree with @tmbdrogba. We have made no modifications to webpack config and we are finding that any npm package containing JSX fails.

[aishwarya-tw]

Thanks for the info @tmbdrogba and @moretalk . We will investigate this further and release a fix soon

[jplaisted]

I'm also getting an error, albiet different ones. We have a few plugins, and they fail in different ways.

Error 1:
ENOENT: no such file or directory, stat '/path-to-plugin/build/plugin-name.js.map'

Error 1:
export 'ColumnDefinition' (imported as 'ColumnDefinition') was not found in '@twilio/flex-plugin' (possible exports: FlexPlugin, esModule, getAssetsUrl, getRuntimeUrl, loadCSS, loadJS, loadPlugin)

Is there any way to downgrade the flex plugin installed to the cli? Doesn't seem like twilio plugins:install has the option?

Edit: can specify the version in the installation command with @: twilio plugins:install @twilio-labs/plugin-flex@6.1.2

[ypatel118]

Facing same issue in console "global is not defined" for one of my plugins after I had to re-install @twilio-labs/plugin-flex on 9th Oct in hope to resolve another issue I was facing.

Before that the plugin was working fine was working fine

A workaround I thought was to do this at the very beginning of my plugin -

init.js

window.global ||= window;
// I had used Buffer in one of my components for creating a base64 string and
// after I added above workaround for global it gave me a runtime error of Buffer not found so I had to use below workaround for it
import { Buffer } from "buffer";
window.Buffer = window.Buffer || Buffer;

index.js

import "./init";
import * as FlexPlugin from "@twilio/flex-plugin";
import AdminPlugin from "./AdminPlugin";

FlexPlugin.loadPlugin(AdminPlugin);

[aishwarya-tw]

We have released the fix for this issue in v6.2.1. Please upgrade your Plugins CLI and check again.

[ypatel118]

@aishwarya-tw Updated @twilio-labs/plugin-flex and upgraded my plugin and plugin scripts is updated- "@twilio/flex-plugin-scripts": "6.2.1".

But still facing the issue.

For me I think its not related to css, I think its related to draft-js which I have used in my plugin for some features.

Please check the stack trace of the error.

plugin-admin.js:113308 Uncaught ReferenceError: global is not defined
    at ./node_modules/fbjs/lib/setImmediate.js (plugin-admin.js:113308:18)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./node_modules/draft-js/lib/editOnBeforeInput.js (plugin-admin.js:103543:20)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./node_modules/draft-js/lib/DraftEditorEditHandler.js (plugin-admin.js:99038:21)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./node_modules/draft-js/lib/DraftEditor.react.js (plugin-admin.js:96820:30)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./node_modules/draft-js/lib/Draft.js (plugin-admin.js:96716:19)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./src/components/Admin/Email/ResponseLibrary.js (plugin-admin.js:7388:66)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./src/components/Admin/Email/Email.js (plugin-admin.js:6170:74)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./src/components/Admin/Admin.js (plugin-admin.js:1142:70)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./src/AdminPlugin.js (plugin-admin.js:692:81)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at ./src/index.js (plugin-admin.js:37580:70)
    at __webpack_require__ (plugin-admin.js:197269:42)
    at plugin-admin.js:197350:37
    at plugin-admin.js:197352:12

[aishwarya-tw]

@ypatel118 Are you are seeing this error in the browser console when you run the plugin during local development? Can you please confirm that this issue did not exist in v6.1.2?

[ypatel118]

@aishwarya-tw Yes I'm seeing this error in browser console but not just during local development, it also happens when I deploy and check on flex. Yes I can confirm that this issue didn't happened in v6.1.2.