When utilizing three.js/react/vite in a project, the build process may encounter issues when built with vite and the TypeScript compiler. However, the project functions properly when running npm run dev

I recently embarked on a project utilizing three.js, react, and vite. As I delved deeper into the development process, I found myself hesitant to fully commit to integrating React into my project. Consequently, most of the React code within my project serves as placeholder or skeleton code, such as the default App component. With my focus shifting towards mastering three.js exclusively, I made the decision to proceed with this setup.

While my project functions smoothly when executed using npm run dev, my aim was to deploy it on Github Pages. Therefore, I proceeded to build the project using npm run build, which resulted in the creation of a 'dist' folder containing an index.html file and an assets subfolder. Within the assets subfolder were three files:

index.02582158.css

index.c83bad18.js

vendor.5957e3fb.js

The first file appears to be compressed CSS, while the remaining two seem to be transpiled TypeScript/TypeScript React files.

Upon attempting to serve the built dist folder using npm run serve, the console output indicated that the Vite v2.3.8 build preview server was running successfully at: Local: http://localhost:5000/. However, upon visiting the page, all I encountered was a blank screen accompanied by the error message:

index.c83bad18.js:1 Uncaught TypeError: Cannot read property 'adjustOrbit' of undefined

'adjustOrbit' is a member function of an object from an exported class defined in a TypeScript file. Despite confirming that the .ts file had been successfully built during the npm run build process, the error persisted without resolution.

Subsequently, when attempting to host the project on GitHub Pages, I encountered 404 errors for all three aforementioned files. By adjusting the source paths and hrefs in the index.html file within the dist directory from

/assets/index.c83bad18.js to ./assets/index.c83bad18.js for each of the three files (adding a dot at the beginning of each path), the 404 not found errors ceased. However, the same issue experienced during the attempt to run the build preview with Vite still persisted.

Update: Upon omitting the code calling member functions on objects from the exported .ts class mentioned previously, approximately 25% of my three.js code rendered on the screen. Regrettably, this rendered portion lacked functionality, and additional errors regarding

Uncaught (in promise) DOMException: The element has no supported sources
emerged.

Answer №1

I believe I may have found the solution to this issue. It seems that a while back, I had successfully solved the problem but neglected to document the process. From what I can recall, it appears that my three.js code was unable to locate the necessary assets, causing the entire project to fail when transitioning from TypeScript to JavaScript. To rectify this situation, I made sure to include all assets in the import so that they are compiled along with everything else:

import skyboxTop from './assets/skyboxwithsun/top.png?url'

Prior to this, I would have done something like

txtLoader = new THREE.TextureLoader("./assets/skyboxwithsun/top.png", callbackfunc)

Now, I simply use

txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)

However, it's worth mentioning that the reason for the failure could be due to the fact that the asset, top.png, gets transformed into a cryptic filename during Vite's app building process, such as c3ga867fj34.png.

Therefore, since my loaders were having trouble resolving these URLs, I suspect this caused the breakdown. By importing, I ensure that skyboxTop is accessible at runtime.

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 argument type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be assigned to the parameter type 'HTMLElementEvent<HTMLButton>'

Here is the code snippet that I am currently working on and encountering an error in the console: type HTMLElementEvent<T extends HTMLElement> = Event & { target: T; } toggleHandler = (e: HTMLElementEvent<HTMLButtonElement>) => ...

Using Ionic to send email verification via Firebase

I have encountered an issue while attempting to send an email verification to users upon signing up. Even though the user is successfully added to Firebase, the email verification is not being sent out. Upon checking the console for errors, I found the f ...

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

Running my API in a website application works flawlessly, but encountering SyntaxError when testing it in Postman - specifically "No number after minus sign in JSON at position 1" (line 1 column 2). The data is correctly inputted into the body of Postman a ...

Extraction of properties from an object in an ES6 class

How should object destructuring be properly applied for methods within ES6 classes? user.ts import { Request, Response } from "express"; export class User { constructor (){ Object.assign(this,{ root:this.root, get:this.get ...

Encountering an issue while attempting to import the react-autosuggest module, receiving the following error

I recently encountered an issue while trying to import the react-autosuggestion module in my TypeScript file on Ubuntu v18 OS. Initially, I executed the following command: sudo npm install react-autosuggest --save import Autosuggest from 'react- ...

Tips for modifying the width of the mat-header-cell in Angular

Is there a way to customize the mat-header-cell in Angular? I've been trying to change its width without success. Any suggestions would be greatly appreciated. <ng-container cdkColumnDef="name"> <mat-header-cell *cdkHeaderCellDe ...

The React property has been mistakenly initialized as an empty object instead of the desired array

I've been working on implementing a GroupedList from the Office UI Fabric control library and referring to the demo code here. Although I'm close to the demo code, I'm facing an issue when passing the items array into the function component ...

I would like to customize the Primeng switch by changing the values from boolean to 'N' or 'Y'

I integrated the primeNg p-switch component into my Angular 2 project. By default, the input switch's values are boolean. However, I would like to have the values set to 'N' or 'Y' instead of true or false. @export class MyCompone ...

Updating a separate component in Next.js upon the deletion of an item from the Supabase database

I am facing an issue with updating my parent component after deleting an item from the database. To fetch items from the database, I use a simple approach: const filter = useFilter((query) => query.eq("createDate", date), [date]); const [{ ...

What is the reason for the return of undefined with getElementsByClassName() in puppeteer?

Currently, I am utilizing puppeteer to fetch certain elements from a webpage, specifically class items (divs). Although I understand that getElementsByClassName returns a list that needs to be looped through, the function always returns undefined for me, e ...

TypeScript test framework for testing API calls in VS Code extensions

My VS Code extension in TypeScript uses the Axios library for API calls. I have written tests using the Mocha framework, which are run locally and through Github Actions. Recently, I integrated code coverage reporting with `c8` and I am looking to enhanc ...

Decorators are not allowed in this context, the Angular component constructor may not include them

Currently working on developing a dialog component in Angular 17 using Angular Material 17 Encountering an issue inside the constructor of the dialog component where utilizing the @Inject decorator as shown in the official documentation example is not pos ...

Tips for sorting an array with various data types in TypeScript while explicitly defining the type

I need help with a class that contains two fields, each being an array of different types but sharing the common field id. I am trying to create a method that filters the array and removes an item based on the provided id. enum ItemType { VEGETABLES = &a ...

Utilizing NgModelGroup nesting in various components for improved data management

Whenever I attempt to nest NgModelGroup inside another NgModelGroup, Angular seems to just ignore it. I'm currently utilizing Angular 12 and Template-driven Forms. Here is how my code appears: app.component.html <form #form="ngForm"> ...

Guide to Configuring Vue 2.7 with Vite to Properly Handle Subfolders on Refresh without Error 404

I'm currently working on a Vue 2.7 project that utilizes Vite for my setup. Within my vite.config.ts file, I have the following configuration: resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), ...

Embedding Globalize.js into an Angular component

Hey there! I'm currently working on building an Angular 4 application that needs to support L10n. I've decided to incorporate globalize into my project. Below is a snippet of my App component: import { Component, OnInit } from '@angular/c ...

Instructions on invoking a function from another Material UI TypeScript component using React

In this scenario, we have two main components - the Drawer and the AppBar. The AppBar contains a menu button that is supposed to trigger an event opening the Drawer. However, implementing this functionality has proven challenging. I attempted to use the li ...

Incorporating a .glb file into a React Native Expo application

I'm currently tackling a project that involves displaying 3D avatars in react native. However, I encountered an issue when trying to add my .glb model using GLTFLoader imported from three/examples/jsm/loaders/GLTFLoader, which resulted in a FileReader ...

What makes TypeScript believe that the variable could possibly be undefined when it is clearly not the case?

I recently encountered an issue where TypeScript incorrectly identifies a variable as possibly being undefined. Here is a simplified example: const func = (val1?: boolean, val2?: boolean) => { if (!val1 && !val2) return; let result: boolean; ...

Switch the Angular app written in Javascript to Typescript

I am looking to create a pluginable Angular app and came across this tutorial that uses RequireJs for loading scripts in the correct order. Now, I want to convert this project to TypeScript but I am unsure of how to incorporate RequireJs into TypeScript. ...