Simon_Lapointe | 2021-11-18 21:02:41 UTC | #1
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 | 2021-11-19 15:07:47 UTC | #2
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 | 2021-11-19 16:26:41 UTC | #3
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: ./nodemodules/configparser/src/configparser.js ./nodemodules/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: ./nodemodules/winston/dist/winston/transports/file.js ./nodemodules/winston/dist/winston/transports/index.js ./nodemodules/winston/dist/winston.js ./nodemodules/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: ./nodemodules/winston/dist/winston/transports/index.js ./nodemodules/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 https://dev.to/apkoponen/how-to-disable-server-side-rendering-ssr-in-next-js-1563
jacobshaw | 2021-11-19 20:58:24 UTC | #4
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 | 2021-11-22 16:38:36 UTC | #5
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 https://github.com/MyPureCloud/platform-client-sdk-javascript/blob/master/build/package.json
system | 2021-12-23 16:39:10 UTC | #6
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: 12703