[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/[email protected]

[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.

[aishwarya-tw]

Thank you. We will investigate further and release a fix if necessary.

[shyamasish-twilio]

@ypatel118 We have released a new patch version v6.2.2 with the fix, Please check and confirm.

[ypatel118]

@aishwarya-tw @shyamasish-twilio I am not getting the "global is not defined" error anymore. Thanks for that.

But as I said before, I am still getting "Buffer is not defined" error when I navigate to my plugin view.

Buffer is not defined
ReferenceError: Buffer is not defined
at ReleaseNotes.getData (http://localhost:3000/plugins/plugin-admin.js:9208:19)
at ReleaseNotes.componentDidMount (http://localhost:3000/plugins/plugin-admin.js:9241:12)
at commitLifeCycles (https://unpkg.com/[email protected]/umd/react-dom.development.js:20693:26)
at commitLayoutEffects (https://unpkg.com/[email protected]/umd/react-dom.development.js:23456:9)
at HTMLUnknownElement.callCallback (https://unpkg.com/[email protected]/umd/react-dom.development.js:3942:16)
at Object.invokeGuardedCallbackDev (https://unpkg.com/[email protected]/umd/react-dom.development.js:3991:18)
at invokeGuardedCallback (https://unpkg.com/[email protected]/umd/react-dom.development.js:4053:33)
at commitRootImpl (https://unpkg.com/[email protected]/umd/react-dom.development.js:23181:11)
at unstable_runWithPriority (https://unpkg.com/[email protected]/umd/react.development.js:2764:14)
at runWithPriority$1 (https://unpkg.com/[email protected]/umd/react-dom.development.js:11306:12)
at commitRoot (https://unpkg.com/[email protected]/umd/react-dom.development.js:23020:5)
at performSyncWorkOnRoot (https://unpkg.com/[email protected]/umd/react-dom.development.js:22359:5)
at https://unpkg.com/[email protected]/umd/react-dom.development.js:11357:28
at unstable_runWithPriority (https://unpkg.com/[email protected]/umd/react.development.js:2764:14)
at runWithPriority$1 (https://unpkg.com/[email protected]/umd/react-dom.development.js:11306:12)
at flushSyncCallbackQueueImpl (https://unpkg.com/[email protected]/umd/react-dom.development.js:11352:11)
at flushSyncCallbackQueue (https://unpkg.com/[email protected]/umd/react-dom.development.js:11339:5)
at scheduleUpdateOnFiber (https://unpkg.com/[email protected]/umd/react-dom.development.js:21923:11)
at Object.enqueueSetState (https://unpkg.com/[email protected]/umd/react-dom.development.js:12497:7)
at Component.setState (https://unpkg.com/[email protected]/umd/react.development.js:390:18)
at http://localhost:3000/plugins/plugin-admin.js:1228:18

[shyamasish-twilio]

@ypatel118 ,
I am not able to reproduce this particular issue,
can you provide additional details about the specific plugin?

[ypatel118]

@shyamasish-twilio What kind of details do you need?

FYI, I am using buffer module for following use case:

const token = Buffer.from(
      `${params.accountId}:${params.authToken}`,
      "utf8"
    ).toString("base64");

[ypatel118]

@shyamasish-twilio @aishwarya-tw Any updates?

[aishwarya-tw]

@ypatel118 Hi. With the webpack 5 upgrade, all the native node libraries require a polyfill in the webpack config for webpack to understand it in the browser environment. If you'd like to be on webpack 5, please refer the solution here and make the required changes in your plugin webpack.config.js otherwise, we would highly recommend using v6.1.2 which is on webpack 4 as it looks like your plugin might be using native modules that need polyfills.

[shyamasish-twilio]

@ypatel118 ,
We have released a new version of plugin-flex
v6.3.1
Can you please try and confirm if that works in your scenario?

[ypatel118]

@shyamasish-twilio Confirming, issue resolved in v6.3.1. Thanks for the efforts.

[aishwarya-tw]

@ypatel118 Thanks for confirming. Closing the issue.