ab923x | 2024-07-02 14:56:01 UTC | #1
Hi, I'm trying to import the purecloud-platform-client-v2 npm package into my typescript+react project. For some reason when I import it I just get an empty object and then when I try to access the api instance I get the following error: TypeError: Cannot read properties of undefined (reading 'instance')
import platformClient from 'purecloud-platform-client-v2';
const client = platformClient.ApiClient.instance;
I have a sample project to illustrate the issue. Somehow this doesnt happen with the GenesysCloudBlueprints sample in github. The only difference I can find is that this one uses vite and I am not, but not sure why that would make a difference.
I found a hacky "solution" in the forum where I need to create webpack aliases to point to the correct entry point and then I will need to add pollifyll fallbacks. I dont want to do this. The library per-se should be smart enough to do this for your, right?
Am I missing something?
jacobshaw | 2024-07-09 14:55:10 UTC | #2
Hi @ab923x I've been able to import the platform javascript SDK into a TS+React project without using vite in the past using this syntax
const platformClient = require('purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js');
Here's the tsconfig.json file for that project
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
This blueprint provides an example using vite, which handles bundling differently (uses esbuild internally), which allows the use of a standard ES6 import
import platformClient from 'purecloud-platform-client-v2';
https://github.com/GenesysCloudBlueprints/react-app-with-genesys-cloud-sdk/blob/main/blueprint/index.md
hs554n | 2024-07-10 15:41:32 UTC | #3
We experimented with the suggestions made in the forum post.
It kind of works, but it brings up a few points and questions:
- Is it okay to import directly from the dist folder? The following seems to at least initialise the instance:
import platformClient from 'purecloud-platform-client-v2/dist/web-cjs/bundle'; That said, it is also working around the normal wiring of the rest of the project and has an impact on the maintainability.
- What are the implications of not having the polyfills (e.g. browserfy)?
We get error messages, but at least the initialization seems to work. Is it going to break further down the flow?
- Is there a reason, needed dependencies (like the previously mentioned polyfills) are not defined as peer dependencies directly?
- Using
import platformClient from 'purecloud-platform-client-v2/dist/web-cjs/purecloud-platform-client-v2.min.js' does not solve the issue, the package still appears empty. It would be interesting to understand why it breaks and how we can fix it. That said, the npm module documentation tells us, it should work
Looking forward to your thoughts.
jacobshaw | 2024-07-10 16:39:36 UTC | #4
When you say it kind of works, what is not working? I used the /dist/node/purecloud-platform-client-v2.js entrypoint in the browser without doing anything extra with polyfills and had no issues, was able to call various API endpoints. I can't speak on the other entrypoints for use with browserify, which I don't have experience with.
hs554n | 2024-07-12 12:48:42 UTC | #5
"Kind-a working" is defined as:
- We do see an initialized object
BUT:
- We get errors, hinting on missing pollyfills like browserfy in the build process output
The important part is, that we use the SDK as part of a bigger project. So we do not just import dependencies on HTML files but have a build process involved. That might be the reason why we have to import from the web-cjs/bundle instead of the JS, as suggested by the NPM package description.
I am currently trying to reproduce the different scenarios that made me say "kind of working" and will post snippets and screenshots later.
hs554n | 2024-07-12 14:03:44 UTC | #6
As promised, here are more details and a new blocker:
- The project uses Storybook for internal use. Using the suggested solution produces build errors and makes Storybook unusable.
Here is the corresponding output:
ModuleNotFoundError: Module not found: Error: Can't resolve 'purecloud-platform-client-v2/dist/web-cjs/bundle' in '/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/src/_next/payment-method-modules/card/genesys'
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compilation.js:2022:28
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:817:13
at eval (eval at create (/Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:275:22
at eval (eval at create (/Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:448:22
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:118:11
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:689:25
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:893:8
at /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/NormalModuleFactory.js:1013:5
resolve 'purecloud-platform-client-v2/dist/web-cjs/bundle' in '/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/src/_next/payment-method-modules/card/genesys'
Parsed request is a module
using description file: /Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/package.json (relative path: ./src/_next/payment-method-modules/card/genesys)
aliased with mapping 'purecloud-platform-client-v2': '/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2' to '/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle'
using description file: /Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/package.json (relative path: ./src/_next/payment-method-modules/card/genesys)
Field 'browser' doesn't contain a valid alias configuration
root path /Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront
using description file: /Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/package.json (relative path: ./Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.jsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.tsx doesn't exist
as directory
/Users/XXX/IdeaProjects/paykit-web/packages/paykit-storefront/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle doesn't exist
using description file: /Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/package.json (relative path: ./src/purecloud-platform-client-v2/dist/web-cjs/bundle)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.jsx doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle.tsx doesn't exist
as directory
/Users/XXX/IdeaProjects/paykit-web/node_modules/purecloud-platform-client-v2/src/purecloud-platform-client-v2/dist/web-cjs/bundle doesn't exist
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
child_process.js:655
throw err;
^
Error: Command failed: node /Users/XXX/IdeaProjects/paykit-web/node_modules/@storybook/react/bin/index.js
at checkExecSyncError (child_process.js:616:11)
at Object.execSync (child_process.js:652:15)
at Command.<anonymous> (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/project-common/shared-scripts/index.js:270:10)
at Command.listener [as _actionHandler] (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/node_modules/commander/index.js:426:31)
at Command._parseCommand (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/node_modules/commander/index.js:1002:14)
at Command._dispatchSubcommand (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/node_modules/commander/index.js:953:18)
at Command._parseCommand (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/node_modules/commander/index.js:970:12)
at Command.parse (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/node_modules/commander/index.js:801:10)
at Object.<anonymous> (/Users/XXX/IdeaProjects/paykit-web/node_modules/@YYY/lib/bin/index.js:82:9)
at Module._compile (internal/modules/cjs/loader.js:1063:30) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 24308,
stdout: null,
stderr: null
}
error Command failed with exit code 1.
This happens, when we import the bundle.
- We reproduced the errors, the build process throws but finishes somehow anyway:
Failed to compile:
Module not found: Error: Can't resolve 'os' in '/Users/xxxxx/project-name/node_modules/purecloud-platform-client-v2/dist/web-cjs'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
Module not found: Error: Can't resolve 'path' in '/Users/xxxxx/project-name/node_modules/purecloud-platform-client-v2/dist/web-cjs'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
In this case, we did see an initialised instance of platformClient though. But I assume we would run into further issues later on (or crash Storybook, as mentioned in 1).
ab923x | 2024-07-16 09:33:51 UTC | #7
Hi @jacobshaw,
Thanks for coming back to me. I've tried your suggestion importing directly from dist but it doesnt work due to webpack not being able to resolve node modules.To fix that we will need to apply the hacky solution that I mentioned before (https://developer.genesys.cloud/forum/t/how-to-add-purecloud-sdk-to-angular-12/12948), which we want to avoid. I've created a branch with your suggestion: https://github.com/asierba/sample-genesys-ts-react-app/tree/jacobshaws-solution
If you pull that branch to your local machine and run npm run start you should be able to see the error.
The webpack error for reference:
Failed to compile.
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/configparser/src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
WARNING in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 758:32-65
Module not found: Error: Can't resolve 'crypto' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/purecloud-platform-client-v2/dist/node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
ERROR in ./node_modules/configparser/src/configparser.js 1:13-28
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/configparser/src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/configparser/src/configparser.js 2:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/configparser/src'
ERROR in ./node_modules/configparser/src/configparser.js 3:13-28
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/configparser/src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./node_modules/logform/dist/pretty-print.js 3:14-37
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/logform/dist/splat.js 73:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/logform/node_modules/@colors/colors/lib/colors.js 34:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/node_modules/@colors/colors/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/logform/node_modules/@colors/colors/lib/system/supports-colors.js 28:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/logform/node_modules/@colors/colors/lib/system'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/mkdirp/index.js 1:11-26
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/mkdirp'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./node_modules/mkdirp/index.js 2:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/mkdirp'
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 221:17-30
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/purecloud-platform-client-v2/dist/node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 222:19-34
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/purecloud-platform-client-v2/dist/node'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js 245:21-34
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/purecloud-platform-client-v2/dist/node'
ERROR in ./node_modules/readable-stream/lib/_stream_readable.js 43:13-37
Module not found: Error: Can't resolve 'buffer' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/readable-stream/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/readable-stream/lib/_stream_writable.js 66:13-37
Module not found: Error: Can't resolve 'buffer' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/readable-stream/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/readable-stream/lib/internal/streams/buffer_list.js 74:15-32
Module not found: Error: Can't resolve 'buffer' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/readable-stream/lib/internal/streams'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/safe-buffer/index.js 3:13-30
Module not found: Error: Can't resolve 'buffer' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/safe-buffer'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
- install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "buffer": false }
ERROR in ./node_modules/winston-transport/dist/legacy.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston-transport/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/winston-transport/dist/modern.js 3:11-26
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston-transport/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/winston-transport/legacy.js 3:13-28
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston-transport'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/winston-transport/modern.js 3:13-28
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston-transport'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/winston/dist/winston/common.js 10:15-30
Module not found: Error: Can't resolve 'util' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/winston/dist/winston/exception-handler.js 55:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/rejection-handler.js 55:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/tail-file.js 10:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston'
ERROR in ./node_modules/winston/dist/winston/transports/console.js 110:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 110:9-22
Module not found: Error: Can't resolve 'fs' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
ERROR in ./node_modules/winston/dist/winston/transports/file.js 111:11-26
Module not found: Error: Can't resolve 'path' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 113:11-26
Module not found: Error: Can't resolve 'zlib' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
ERROR in ./node_modules/winston/dist/winston/transports/file.js 121:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
ERROR in ./node_modules/winston/dist/winston/transports/http.js 144:11-26
Module not found: Error: Can't resolve 'http' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
Did you mean './http'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/asier/dev/sample-genesys-ts-react-app/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
ERROR in ./node_modules/winston/dist/winston/transports/http.js 145:12-28
Module not found: Error: Can't resolve 'https' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
ERROR in ./node_modules/winston/dist/winston/transports/stream.js 112:9-22
Module not found: Error: Can't resolve 'os' in '/Users/asier/dev/sample-genesys-ts-react-app/node_modules/winston/dist/winston/transports'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
webpack compiled with 32 errors and 1 warning
No issues found.
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
jacobshaw | 2024-07-22 13:45:02 UTC | #8
@hs554n @ab923x My project where my solution works is using webpack v4. Based on the above error regarding webpack versions 5 and greater, the solution to not using polyfills or other hacks will most likely be to reduce the webpack version to < 5. Webpack is a dependency within react-scripts, so changing the react-scripts version changes the webpack version Here's the output of the npm ls webpack command in my project
ab923x | 2024-07-22 15:09:45 UTC | #9
Hey @jacobshaw Thanks for coming back to me. Unfortunately in the production ready project that we are trying to import the genesys sdk we cant just downgrade webpack. Apart from security implications, we are sharing a common project with other libraries, so this is a no go. Isn't there any other option? And why is the library not working out of the box with webpack 5?
jacobshaw | 2024-07-22 15:52:56 UTC | #10
@ab923x I will loop in the team that works on the SDKs to see if out of the box compatibility with webpack > v5 is something that can be added.
jacobshaw | 2024-07-22 18:15:49 UTC | #11
After talking with the SDK team, they referenced this thread https://developer.genesys.cloud/forum/t/purecloud-platform-client-v2-version-160-0-0-require-is-not-defined/18824/13
Basically, the JavaScript SDK was designed for use in the node environment, so transpiling for the web environment is not the main focus. There are plans to tackle this in the future but it's a big job and won't be happening for a while.
ab923x | 2024-07-24 07:46:07 UTC | #12
Ok, that's a bit unfortunate. Could you ask the sdk team to update the docs to say that please?
JavaScript SDK was designed for use in the node environment, so transpiling for the web environment is not the main focus.
And add something like this
Be mindful that you will need to use an old version of webpack (<5) or add custom pollyfills to you web application if you want to use this in the browser..
My team wasted 3-4 weeks chasing this issue and now we found out that we won't be able to use the sdk. Within that in the docs, hopefully, this won't happen to more people in the future.
jacobshaw | 2024-07-26 13:56:32 UTC | #13
I will let the team know about this request.
John_Carnell | 2024-07-26 14:01:34 UTC | #14
Purecloud-platform-client-v2 version 160.0.0 "require is not defined", post:13, topic:18824
dency introduced that is of type Node (commonjs) and imho should not be in a web version of your SDK.
Hi Asier,
Sorry for your frustration on this. I will definitely work with my team to get the documents on this. We are scheduled at some point to move look at generating two different JS SDKs. We are busy working through moving from Swagger -> Open API 3 and then we were going to tackle the JavaScript SDK rewrite.
Thanks, John Carnell Director, Developer Engagement
system | 2024-08-26 14:01:45 UTC | #15
This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.
This post was migrated from the old Developer Forum.
ref: 27047