Hi Pramod,

Thank you for the response.

I’m using the create-react-app while using the Reveal SDK. On a side note, the reveal SDK integration is the last bit of the project that required to be done.

Regards,

Hariharan 

Hi Pramod,

No, I’m building it on Windows based system

Regards,

Hariharan

Hi Pramod,
Tried the solution but, the issue is persisting.

Regards,

Hariharan B P

Hi,

the version is:-

"react-app-rewired": "^2.2.1",

Which I presume is the latest.

Regards,

Hariharan

Hi Pramod

It’s similar to my package,json file with some additional requirements for this app.

here’s my package.json for reference:

{
  "name": "fire-wire-management",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@azure/msal-browser": "^3.7.1",
    "@azure/msal-common": "^14.6.1",
    "@azure/msal-react": "^2.0.10",
    "@cognite/reveal": "^4.9.0",
    "@cognite/sdk": "^8.3.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.0",
    "@mui/joy": "^5.0.0-beta.18",
    "@mui/material": "^5.15.0",
    "@mui/x-date-pickers": "^6.18.5",
    "@mui/x-date-pickers-pro": "^6.18.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "apexcharts": "^3.45.1",
    "bootstrap": "^5.3.2",
    "d3": "^7.8.5",
    "d3-timer": "^3.0.1",
    "dayjs": "^1.11.10",
    "dotenv": "^16.4.1",
    "i18next": "^23.7.9",
    "i18next-browser-languagedetector": "^7.2.0",
    "i18next-http-backend": "^2.4.2",
    "leaflet": "^1.9.4",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-app-rewired": "^2.2.1",
    "react-axios": "^2.0.6",
    "react-bootstrap": "^2.9.1",
    "react-d3-library": "^1.1.8",
    "react-dom": "^18.2.0",
    "react-i18next": "^13.5.0",
    "react-icons": "^4.12.0",
    "react-router-dom": "^6.21.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^10.0.4",
    "rxjs": "^7.8.1",
    "three": "^0.158.0",
    "topojson-client": "^3.1.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/d3": "^7.4.3",
    "@types/topojson-client": "^3.1.4"
  }
}

Regards,

Hi Pramod,

Yes it is based on JavaScript.

I presume it wont be an issue while integrating.

Regards,

Hariharan 

Hi, 
Pramod. 

My apologies for the delay in response.

I have solved the BufferGeometry issue, apparently the react-app-wired was not the latest which is why the override was not working.

But, now when I try to connect to cognite/reveal using the project, appId and all other details. The server responds with 

This api.cognitedata.com page can’t be found

I’m attaching the component’s source code from where I’m trying to connect to cognite. And I would appreciate if I can be enlightened with a way to work this out.

 

import React, { useEffect } from "react"
import { Cognite3DViewer } from "@cognite/reveal"
import { CogniteClient, CogniteAuthentication } from "@cognite/sdk"

import { getToken } from "../../utils/MsGraphApiCall"

import "./Models.css"

function Models() {
  const appId = "KPI-Dev"
  const project = "celanese-dev"
  const clientId = "my-client-id"
  const tenantId = "my-tenant-id"
  const cluster = "az-eastus-1"
  const modelId = 7575155737800092
  const revisionId = 3624517118008353

  async function start() {
    await client.authenticate(clientId, tenantId, cluster)

    const viewer = new Cognite3DViewer({
      sdk: client,
      domElement: document.querySelector("#your-element-for-viewer"),
    })
    viewer.addModel({ modelId: modelId, revisionId: revisionId })
  }

  const legacyInstance = new CogniteAuthentication({
    project,
  })

  // getToken();

  const getToken = async () => {
    await legacyInstance.handleLoginRedirect()
    let token = await legacyInstance.getCDFToken()
    console.log("Token: ", token)
    if (token) {
      console.log("Token: ", token.accessToken)
      return token.accessToken
    }
    token = await legacyInstance.login({ onAuthenticate: "REDIRECT" })
    if (token) {
      return token.accessToken
    }
    throw new Error("authentication error")
  }

  console.log("TOken: ", getToken())

  const client = new CogniteClient({
    appId,
    project,
    getToken,
  })

  useEffect(() => {
    start()
  }, []) // Empty dependency array to ensure it runs only once after mounting

  return <div id='your-element-for-viewer'>Models</div>
}

export default Models

The error it throws:-

I kindly, request to enlighten me with the process.

Thank you

Regards,
Hariharan

Hi Pramod,

Thank you for the response.

Sure, I would raise another Q’s on the authentication part.

Regards,

Hariharan B P