Encountering a BufferAttribute error in Three JS + Angular 7 when imported into the controller

I am facing an issue with adding Three JS to my Angular 7 project. Despite installing npm install three --save and its type npm install @type/webgl2, I encountered an error after importing it into my component controller. The import statement used was import * as THREE from 'three';. Following a guide on Stackblitz helped somewhat, but I am still getting errors that prevent me from building the project. Here is the specific error message:

ERROR in node_modules/three/src/core/BufferAttribute.d.ts(21,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error 
TS1086: An accessor cannot be declared in an ambient context.
node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error 
TS1086: An accessor cannot be declared in an ambient context.
angulartypescriptthree.jsbabeljs

Answer №1

Be sure to add these devDependencies

npm install --save-dev @types/offscreencanvas
npm install --save-dev @types/webgl2

Don't forget to update your tsconfig.app.json

 "types": ["node", "webgl2", "offscreencanvas"]

Your package.json should resemble the following.

{
  "name": "sketch",
  "version": "0.0.0",
  (...)
}

This is how your tsconfig.app.json file should look like.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node", "webgl2", "offscreencanvas"]
  },
  (...)
}

Answer №2

Just incorporate the

"triple": "^0.110.0"

Answer №3

To utilize Angular 8, a potential solution is to follow the recommendation of Omar Arturo and downgrade threejs to version 0.110.0. However, this downgrade may not be seamless and additional steps are required:

npm install @types/webgl2

Adjust the tsconfig.app.json file by including:

"types": ["node", "webgl2", "offscreencanvas"]

These modifications should resolve the issue.

Answer №4

It appears that this issue has been resolved in the most recent release of Three version r115. Everything is now working smoothly.

Answer №5

To resolve the issue at hand, there are two essential steps you must take. Firstly, ensure that you have properly installed the necessary modules,

Step 01 : Incorporate devDependencies

npm install --save-dev @types/offscreencanvas

followed by updating tsconfig.app.json

"types": ["node", "webgl2"]

Step 02 : Navigate to the tsconfig.json file and insert skipLibCheck: true within the "compilerOptions" object. e.g.

"compilerOptions": {
    ...
    ...
    "skipLibCheck": true, 
  },

Moreover, this error commonly arises due to version discrepancies in TypeScript. By opting to skip lib check, you can effectively alleviate this issue. This dilemma is particularly prevalent among individuals working with three.js. Therefore, implementing these solutions should rectify any WebGL-related challenges you may be encountering.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The variable 'xxx' is not defined in this context

I am attempting to incorporate a dark theme into ngx-charts, and I'm relatively new to using less. Here is the code snippet: My IDE is showing an error message "Cannot find variable 'color-bg-darker'" which leads to compilation failure. Err ...

cssangularlessngx-charts

The Enum object in TypeScript has not been declared or defined

For my TypeScript application, I am utilizing WebPack to transpile and bundle the code. The final result is intended to be used in a pure JavaScript website. One of the components in my application is an enum defined as follows: export const enum ShapeTyp ...

javascripttypescriptwebpack

Utilize a custom enum from a separate file to extend and redefine the i18next TFunction

I am attempting to customize the TFunction from the i18next package. The goal is to enforce typing on the i18n keys being used as follows: t('invalid-key') // should be invalid t('key1') // should be valid To achieve this, I created a ...

typescripti18next

Angular HTTP Patch method requires explicitly defined HTTP options as input parameters

I encountered a challenge with using Angular's HTTP patch method and noticed that the overloaded function patch(url, body, options) only accepts hardcoded values for HTTP options. An example of a hardcoded approach that works: patchEntity(id: number) ...

angulartypescript

Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

I'm working with an array of arrays, for example: const input = [['A', 'X'], ['B', 'Y'],...]; In addition to that, I have two enums: enum MyMove { Rock = 'X', Paper = 'Y', Scis ...

typescriptannotationsdestructuring

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

c#htmlangulartypescriptnvd3.js

How can I incorporate a three.js element into my React application?

Struggling to create a React component that displays a three.js scene properly. Instead of seeing the expected scene, all I get is the text [object HTMLCanvasElement]. Check out my code below: import React from 'react'; import * as THREE from & ...

reactjsthree.js

Struggling to fetch a DropDown menu from an Array in ReactJS

Trying to utilize an array of City Names in a Auto Complete text field within ReactJS. The array is successfully printed, but encountering difficulty displaying the list in the browser's Dropdown. An error message is being displayed in the browser r ...

javascriptreactjstypescript

I need to know the required WEBGL version or level for the smaa post-processing example

After testing various antialiasing methods, I have found that the SMAA post-processing example is highly effective. However, its complexity raises concerns for compatibility with older PCs and devices due to possible incompatibility with WEBGL-1.0. Can any ...

three.jsantialiasing

What is the best way to handle and showcase the retrieved values in ngOnInit through filtering?

Is it possible to display the values of fastFoodShopList, bakeryShopList, generalStoreList variables on the screen without actually showing them? Although I can confirm that the value is being retrieved using console.log, it seems like the screen is being ...

angularrxjsangular-material

Utilizing TypeScript JSDoc notations for managing React PropTypes

When creating react components with TypeScript, we typically declare them like this: class SomeComponent extends React.Component<PropInterface, StateInterface> { // ... } Is it possible to achieve the same prop type-checking functionality using J ...

javascripttypescriptjsdoc

What is the best way to compare input to 2 distinct patterns in order to produce 2 separate error messages accordingly?

Is there a way to use HTML and angular to validate input against two patterns and generate two different inline error messages? The "pattern" attribute in the input tag doesn't seem to work for this. For instance, I need to validate if the input star ...

htmlangular

Ways to display the chosen value based on the item's index using Javascript in Angular

If you want to view the complete code, just click on this link. I have identified the main issue here. Check out the code here: https://stackblitz.com/edit/test-trainin-2?file=src/app/app.component.html The problem is when you interact with the green bal ...

javascripthtmlangular

Tips for customizing the legend color in Angular-chart.js

In the angular-chart.js documentation, there is a pie/polar chart example with a colored legend in the very last section. While this seems like the solution I need, I encountered an issue: My frontend code mirrors the code from the documentation: <can ...

angularjschartstypescriptchart.js

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

How to retrieve a parameter value within the app component in Angular 2

Within my appcomponent, I have incorporated a dropdown functionality. Whenever the user selects an option from the dropdown, it loads a new page in the router outlet. However, if I refresh the page, the router loads correctly but the dropdown selection i ...

angular

"Unlock the power of NGXS by leveraging the raw state values

I'm having trouble locating an example in the NGXS documentation that demonstrates how to properly type the state object. Specifically, I am looking for guidance on typing the return value of the snapshot method of Store. For instance: this.store.sn ...

angulartypescriptngxs

Struggling to adjust the camera's orientation in Three.js

I've been struggling to determine the camera's upward direction and have attempted several methods without success. Since I'm not well-versed in quaternions, I'm uncertain if I did it correctly. My attempts included: camera.up camera. ...

three.js3d

Ways to showcase information retrieved from an API onto an Angular Material card

The process involves calling two different APIs. The first API gathers user information such as name, ID, and the IDs of applications where the user is registered. The second API retrieves details from each application based on its ID. Despite successfully ...

angulartypescriptangular-material

Issue with Angular 6: Textarea displaying value as Object Object

I have data saved in local storage using JSON.stringify, and I want to display it in a textarea. Here are the relevant code snippets: { "name": "some name" } To retrieve the data, I'm using this: this.mydata = localStorage.getItem('mydata&a ...

jsonangulartypescriptlocal-storageangular6