Skip to main content
Solved

Cognite/Reveal: e.BufferGeometry is not a constructor TypeError: e.BufferGeometry is not a constructor


I’m using cognite/reveal and cognite/sdk for a project developed in react (18.x).

While connecting cognite/reveal with react application I’m encountering this error:

e.BufferGeometry is not a constructor

TypeError: e.BufferGeometry is not a constructor

 

I would like to know what is causing this error.

 

code attached below:-

 

 

 

A help to figure out the issue would be helpful.

Thank you,

 

Regards,
Hariharan B P

 

Best answer by pramod.s

Hi Hariharan,

I feel this is an authentication issue, I would recommend you to raise new post tagging authentication.

I would be glad to help on Reveal SDK further.

Best Regards,

Pramod S

View original
Did this topic help you find an answer to your question?

18 replies

  • Practitioner
  • 15 replies
  • February 5, 2024

Hi Hariharan,

Thanks for your post. What application build system are you applying while using Reveal SDK, is it create-react-app or something else?

Regards,

Pramod


  • Author
  • Committed
  • 8 replies
  • February 5, 2024

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 


  • Practitioner
  • 15 replies
  • February 5, 2024

Hi Hariharan,

Are you building the application on Linux system?

Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 5, 2024

Hi Pramod,

No, I’m building it on Windows based system

Regards,

Hariharan


  • Practitioner
  • 15 replies
  • February 5, 2024

Hi Hariharan,

Can you add below code into config-overrides.js file in root and check

const USE_FIX = true;
module.exports = function override(config, env) {
  if(!USE_FIX) {
    return config;
  }

  config.module.rules[1].oneOf = config.module.rules[1].oneOf.map(rule => {
    if(rule.type !== 'asset/resource') {
      return rule;
    }

    return {
      ...rule,
      exclude: [
        ...rule.exclude, /node_modules(\\|\/)three/
      ]
    }
  });

  return config;
}

Let me know how it turns up.

Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 5, 2024

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

Regards,

Hariharan B P


  • Practitioner
  • 15 replies
  • February 5, 2024

Just to be sure, which version of react-app-rewired is used (refer your package.json file)

Best Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 5, 2024

Hi,

the version is:-

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

 

Which I presume is the latest.

Regards,

Hariharan


  • Practitioner
  • 15 replies
  • February 5, 2024

Hi Hariharan,

I have test create-react-app for typescript with Reveal SDK and it seems to work fine wiith the config-overrides.js changes. Below is the package.json file I am using to load my test application.

{
  "name": "test-reveal-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@cognite/reveal": "^4.9.0",
    "@cognite/sdk": "^9.7.1",
    "@cognite/sdk-core": "^4.10.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.11.16",
    "@types/react": "^18.2.53",
    "@types/react-dom": "^18.2.18",
    "@types/three": "0.158.2",
    "react": "^18.2.0",
    "react-app-rewired": "^2.2.1",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "three": "0.158.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "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"
    ]
  }
}

Can you confirm if your package.json is also similar


  • Author
  • Committed
  • 8 replies
  • February 5, 2024

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,


  • Practitioner
  • 15 replies
  • February 6, 2024

Hi Hariharan,

While looking into your package.json, is your application based on JavaScript not TypeScript?

Best Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 6, 2024

Hi Pramod,

Yes it is based on JavaScript.

I presume it wont be an issue while integrating.

Regards,

Hariharan 


  • Practitioner
  • 15 replies
  • February 6, 2024

Hi Hariharan,

I find it hard to reproduce the issue in JavaScript application, can you share your config-overrides.js file or even better simple application with this issue.

Best Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 9, 2024

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:-

3D model page response

I kindly, request to enlighten me with the process.

 

Thank you

Regards,
Hariharan

 

 


  • Practitioner
  • 15 replies
  • Answer
  • February 13, 2024

Hi Hariharan,

I feel this is an authentication issue, I would recommend you to raise new post tagging authentication.

I would be glad to help on Reveal SDK further.

Best Regards,

Pramod S


  • Author
  • Committed
  • 8 replies
  • February 13, 2024

Hi Pramod,

Thank you for the response.

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

 

Regards,

Hariharan B P


Sharizan Mohd Redzuan
Seasoned
Forum|alt.badge.img+4

Hi @Hariharan B P , May I know if you able to resolve all those issue and make your React app able to display the reveal? 

I am working on a project that related to utilize the Reveal as well. Hope you can update on this and able to help me for my project.

 

Thank you.

Regards,

Sharizan

 


Mithila Jayalath
Seasoned Practitioner
Forum|alt.badge.img

@Sharizan Mohd Redzuan feel free to create new posts if you observe specific errors/ issues along the way.


Reply


Cookie Policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings