How to add purecloud sdk in NextJs typescript react?

Simon_Lapointe · November 18, 2021, 9:02pm

Is it possible to use the "purecloud-platform-client-v2" librairy in nextJs in typescript? Without headache !

I've looked at so many posts, but none of them gave me an answer that works.

But maybe for the moment it is just not possible? Can someone tell me if it succeeded or if it is excluded until a later modification of the librairy?

jacobshaw · November 19, 2021, 3:07pm

Hi Simon,
I've been able to import the library into a typescript react project using this line that gives you the same functionality via a different entry point:
const platformClient = require('purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js');

These are the contents of my tsconfig.json file:

{
  "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"
  ]
}

Simon_Lapointe · November 19, 2021, 4:04pm

I did a trial run, however it is in a slightly different environment. It is in a NEXT.JS. project created with the :
npx create-next-app --ts nameProject

/** package.json*/
{
  "name": "nameProject",
  "private": true,
  "scripts": {
    "dev": "next -p 3000",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "@types/fs-extra": "^9.0.13", // added to resolve the error display below  but the error persist
    "@types/react-dom": "^17.0.10",
    "fs": "0.0.1-security",  // added to resolve the error display below  but the error persist
    "fs-extra": "^10.0.0",   // added to resolve the error display below  but the error persist
    "jquery": "^3.6.0",
    "jsonpath-plus": "^6.0.1",
    "next": "12.0.2",
    "purecloud-platform-client-v2": "^125.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-quill": "^1.3.5",
    "react-session-api": "^1.1.0",
    "webpack-merge": "^5.8.0"
  },
  "devDependencies": {
    "@types/jquery": "^3.5.8",
    "@types/node": "16.11.6",
    "@types/react": "17.0.33",
    "cross-env": "^7.0.3",
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.2",
    "typescript": "4.4.4"
  }
}


/** tsconfig.json*/
{
  "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": "preserve", //      - jsx was set to preserve (next.js implements its own optimized jsx transform)
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": [
    "node_modules"
  ]
}

/** I didn't add 'src' in 'include' because it's doesn't exist in Nextjs shema, added in a try but don't change anything

/* error in console */
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully in 2.1s (174 modules)
wait  - compiling /...
error - ./node_modules/configparser/src/configparser.js:2:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

/ In browser/
hot-dev-client.js?1600:118 ./node_modules/configparser/src/configparser.js:2:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
handleErrors @ hot-dev-client.js?1600:118
processMessage @ hot-dev-client.js?1600:168
eval @ hot-dev-client.js?1600:30
eval @ websocket.js?a9be:44
handleMessage @ websocket.js?a9be:43
hot-dev-client.js?1600:118 ./node_modules/mkdirp/index.js:2:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/configparser/src/configparser.js
./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
handleErrors @ hot-dev-client.js?1600:118
processMessage @ hot-dev-client.js?1600:168
eval @ hot-dev-client.js?1600:30
eval @ websocket.js?a9be:44
handleMessage @ websocket.js?a9be:43
hot-dev-client.js?1600:118 ./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js:267:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
handleErrors @ hot-dev-client.js?1600:118
processMessage @ hot-dev-client.js?1600:168
eval @ hot-dev-client.js?1600:30
eval @ websocket.js?a9be:44
handleMessage @ websocket.js?a9be:43
hot-dev-client.js?1600:118 ./node_modules/winston/dist/winston/tail-file.js:9:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/winston/dist/winston/transports/file.js
./node_modules/winston/dist/winston/transports/index.js
./node_modules/winston/dist/winston.js
./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
handleErrors @ hot-dev-client.js?1600:118
processMessage @ hot-dev-client.js?1600:168
eval @ hot-dev-client.js?1600:30
eval @ websocket.js?a9be:44
handleMessage @ websocket.js?a9be:43
hot-dev-client.js?1600:118 ./node_modules/winston/dist/winston/transports/file.js:33:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/winston/dist/winston/transports/index.js
./node_modules/winston/dist/winston.js
./node_modules/purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js
./components/NewCall.tsx
./components/App.tsx
./pages/index.tsx

https ://nextjs.org/docs/messages/module-not-found

Question is, Is the next.js ts environment compatible ?

Maybe we have to do something in next.config.js for webpack , but what ?
ps : to avoid pre-render

jacobshaw · November 19, 2021, 8:58pm

I was able to create a boilerplate nextjs/react/typescript app and get the import working. In addition to the import path I mentioned, const platformClient = require('purecloud-platform-client-v2/dist/node/purecloud-platform-client-v2.js');

I also needed to add a webpack configuration to my next.config.js file:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

Let me know if this helps
Thanks

Simon_Lapointe · November 22, 2021, 4:38pm

Thank you.
Your precisions for the NextJs environment work.
I take note of the syntax in webpack and the path for 'require'.

Finally we don't need the modifications in package.json indicated at

github.com

MyPureCloud/platform-client-sdk-javascript/blob/master/build/package.json

{
  "name": "purecloud-platform-client-v2",
  "version": "125.0.0",
  "description": "A JavaScript library to interface with the PureCloud Platform API",
  "license": "MIT",
  "main": "dist/node/purecloud-platform-client-v2.js",
  "types": "index.d.ts",
  "module": "src/purecloud-platform-client-v2/index.js",
  "jsnext:main": "src/purecloud-platform-client-v2/index.js",
  "browser": "dist/web-cjs/purecloud-platform-client-v2.min.js",
  "files": [
    "dist/*",
    "src/*",
    "package.json",
    "README.md",
    "LICENSE",
    "index.d.ts"
  ],
  "repository": {
    "type": "git",

This file has been truncated. show original

system · December 23, 2021, 4:39pm

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.