I'm using the javascript SDK "purecloud-platform-client-v2" version 160.0.0.
We have a react/typescript application using Vite as the build tool.
When I upgraded from 159.0.0 to 160.0.0, the app started failing to load with the error "require is not defined". See attached snapshots from Chrome dev tools.
Our app works again after downgrading to 159.0.0.
Hi Daniel,
Thanks for posting. I suspect this might be related to a fix we just implemented around our Javascript SDK proxy capabilities. I am going to have one of our team mates pulldown and build a simple React app with the SDK and see if they can figure out what it going on.
Thanks,
John Carnell
Director, Developer Engagement
Same for us, v160 breaks our Vue3 / Vite stack. This is easily reproducible with this demo app:
npm init vue@latest
cd genesys-test
npm install
npm install purecloud-platform-client-v2
src\App.vue in an editor and add this to the script setup:import platformClient from 'purecloud-platform-client-v2';
const client = platformClient.ApiClient.instance;
npm run dev
Hi guys,
We are still digging into this. We were able to update our React blueprint with Javascript version 160.0.0. of our API. It appears that this is localized to the Vite.js framework and Javascript 160. Thanks for the additional detail.
Thanks,
John
Hi Guys,
This is related to a feature of vite. Vite by default does not polyfill node modules. In version 160.0.0 of the javascript SDK we started using a new node package and it is this package that requires polyfill to be used. So for version 160 and greater of the javascript SDK with vite you will need to add a plugin to vite for polyfill. This can be done like so:
npm install vite-plugin-node-polyfills
In your vite.config.js add the following:
import { nodePolyfills } from "vite-plugin-node-polyfills";
and also add the following to the defineConfig
plugins: [
nodePolyfills({
protocolImports: true,
}),
]
Regards,
Declan
I still get the "require is not defined" error. It seems maybe more related to CommonJs.
Hi Daniel,
I can't replicate this but it is most likely a similar feature of vite with a similar fix, try the following:
npm install vite-plugin-commonjs
and in vite.config.js add:
import commonjs from 'vite-plugin-commonjs';
and the following to your plugins:
plugins: [
commonjs()
]
Regards,
Declan
Hi Declan,
Maybe we should focus on a possible different solution from Genesys, instead of trying to polyfill something that should only belong on NodeJS and not in the browser. It's not (really) a Vite problem, but it's because the package now mixes browser and node with import and requires and it shouldn't imho.
So if hpagent is not required in the web bundle, there is no issue anymore.
kind regards,
Davie
Hello @davie, doing a full rewrite of the SDK from the ground up isn't something we can do in the short term, but it is a long term plan. If you intend to use the current SDK in your application, you'll need to configure its build process to provide the required node polyfills. This process can be tricky and due the nature of every JS framework and transpilation engine and even project setup being different, we cannot provide a standard set of instructions other than "provide polyfills as appropriate per your application's architecture".
Can anyone else confirm that the polyfills actually do anything to solve this issue? They don't for me. Which is why I think the polyfills aren't necessarily the issue here.
All I know is that it's been working for a long time, and now it's broken.
Yes, it works. I personally just followed Bart's post above to replicate the issue and got the same console output. Then I followed Declan's instructions to install vite-plugin-node-polyfills and then the app loads successfully with no errors in the console anymore. The latest SDK has also been validated using React 16, which provides node polyfills automatically.
If you're still having an issue, can you provide details?
Hi @tim.smith ,
I'm not asking Genesys for a complete rewrite of your SDK, but I'm asking to keep web for web and nodejs for nodeJS 
Genesys has different builds available from your package for Node and web and now in this version there is a new dependency introduced that is of type Node (commonjs) and imho should not be in a web version of your SDK.
Since this is introduced in this recent version, which breaks code for your users who don't want to polyfill stuff, we do want a proper solution for this.
Kind regards Dave
The SDK is written for a node environment and transpiled to two web targets. What you're asking for requires starting from scratch with a different approach that doesn't begin with an SDK for node.
I'll remind everyone participating in this thread that the SDK is open source and you're allowed to use as little or as much of that source code in any way you like (up to and including simply copy/paste the parts you want into your own codebase). If you don't like the dependencies the SDK has or don't like the transpiled formats provided, you are absolutely encouraged to use the source code directly to accomplish your goals. https://github.com/MyPureCloud/platform-client-sdk-javascript
@Boggs_Daniel I just tested on our stack and v161 works with the nodePolyfills plugin. We can upgrade, so the problem is solved, but it feels like a bit of a workaround.
I must agree with @davie, if you have two web targets, I assume one for Node.js and one for browser. I would think both targets should keep on working. The CommonJS dependency should not be in the browser target of the SDK. It was working fine before v160, so fixing the incompatibility that snuck in shouldn't require an entire rewrite. It seems this change could be the culprit.
The Vite documentation explains it here:
We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library.
We're aware of what caused this change; it was intentional to fix proxy support. As stated previously, the JS SDK is a node package that is transpiled for web. It has node dependencies that must be polyfilled. It is well understood that this is not desirable for a web environment. There are plans to change that architecture in the future, but rewriting the SDK is not a simple task and is not going to happen right now.
Understood, thanks for your answers.
Correction. The dev server is now working, but I just ran a prod build and that's still broken. Also added the commonjs vite plugin to no avail. I need to do some more research to make it reproducible. Will follow up after the weekend.
I reproduced the issue I'm having here:
I'm building it as a library (run the build to get the genesys-test.js file), and the generated code still has the requires.
Haven't figured out yet what might be causing it.
Here's an example showing the platform client working with vite and vue per the instructions in this thread: charming-butterfly-3cfz27 - CodeSandbox. I've never used either before, so I don't have any troubleshooting steps to recommend, but maybe an example that isn't crashing will help.