Struggling to get troika-three-text installed via npm?

I'm having trouble integrating Troika with my three-js scene. While others seem to have no issue, I am struggling to call the module and encountering problems with references. It's frustrating because I can't seem to find any resources to help me resolve these issues.

I already have three-js running perfectly, but when I try to install Troika (npm install troika-three-text), it creates folders in the node_modules directory. The installation instructions say to call it using:

import { Text } from 'troika-three-text',

However, when I do this, I receive the error message:

'Uncaught TypeError: Failed to resolve module specifier "troika-three-text". Relative references must start with either "/", "./", or "../".'

I then attempted:

import { Text } from '../node_modules/troika-three-text/dist/troika-three-text.esm.js'

But now I am facing another issue:

'Failed to resolve module specifier "troika-worker-utils". Relative references must start with either "/", "./", or "../".'

I'm at a loss on how to proceed. Do I need to manually update all the paths within the Troika scripts, or is there another solution? Any help would be greatly appreciated. Thank you!

javascriptthree.js

Answer №1

While immersed in gameplay, I came across this issue too, specifically with troika.

Although it may not be the perfect fix, I have found a good workaround because I utilize three.js within the browser, not in nodejs. My primary script is loaded in the index.html file using type="module". Additionally, within the index.html file, there is an "import map" that defines the necessary names as shown below:

<html>
  <head>

    <script type="importmap">
      {
      "imports" : {
          "three": "http://unpkg.com/three@latest/build/three.module.js",
          "troika-three-text": "http://unpkg.com/troika-three-text@latest/dist/troika-three-text.esm.js",
          "troika-three-utils": "http://unpkg.com/troika-three-utils@latest/dist/troika-three-utils.esm.js",
          "troika-worker-utils": "http://unpkg.com/troika-worker-utils@latest/dist/troika-worker-utils.esm.js",
           ...
      }
      }
    </script>

It's worth noting that I fetch these files from the unpkg.com CDN. Your approach may require some adjustments.

Answer №2

In case anyone else is looking for a solution, this is what worked for me - an extensive importmap that includes all the dependencies of troika text. I couldn't find a better way, so here's what I used:

<script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three/build/three.module.js",
                "three/": "https://unpkg.com/three/",
                "troika-three-text": "https://unpkg.com/troika-three-text@latest/dist/troika-three-text.esm.js",
                "troika-three-utils": "https://unpkg.com/troika-three-utils@latest/dist/troika-three-utils.esm.js",
                "troika-worker-utils": "https://unpkg.com/troika-worker-utils@latest/dist/troika-worker-utils.esm.js",
                "webgl-sdf-generator": "https://unpkg.com/webgl-sdf-generator@latest/dist/webgl-sdf-generator.mjs",
                "bidi-js":             "https://unpkg.com/bidi-js@latest/dist/bidi.mjs"
            }
        }
    </script>

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

Tips on preventing the initial undefined subscription in JavaScript when using RxJS

I am having trouble subscribing to an object that I receive from the server. The code initially returns nothing. Here is the subscription code: ngOnInit() { this.dataService.getEvents() .subscribe( (events) => { this.events = events; ...

javascriptangularrxjs

Exploring end-to-end testing with NestJS and Guards

I'm trying to test an endpoint called /users using nestjs, but I encountered some errors. I'm unsure how to fix the issues and make the test pass with a guard. First Issue Nest is unable to resolve dependencies of the UserModel (?). Please en ...

javascriptnode.jstypescriptjestjsnestjs

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

When using JSX, it's important to wrap adjacent elements within an enclosing tag to avoid errors. Make sure to properly wrap the JSX tags to

import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function DisplayData(props) { //creating the DataList const dataList = data.map(data => ( <><span>{data.name}</span> nbsp; <span> ...

javascriptreactjsnpmreact-redux

Unable to access path for children through buttons in parent path

As a data scientist entering the world of frontend development, I find myself faced with the task of creating a UI at the request of my boss. Please bear with me as I attempt to explain my issue in layman's terms. Currently, I am using Vue.js and hav ...

javascriptuser-interfacevue.jsroutesfrontend

Storing the array with the highest length in a temporary array using Javascript

I am currently working with two arrays that can be of equal length or one may be longer than the other. My goal is to determine the longest array if they are not equal in length, and then use this length to control a loop. $.ajax({ url: "/static/Dat ...

javascriptarraysajaxswitch-statement

Guide to building a straightforward line graph using JSON data from a server

When I retrieve price change data from an API endpoint using axios, the response I receive is in the following format: 0: (2) [1639382650242, 48759.49757943229] 1: (2) [1639386250855, 49131.24712464529] 2: (2) [1639389730718, 48952.65930253478] 3: (2) [163 ...

javascriptreactjschartsnext.js

Node.js Interceptor: A powerful tool for controlling and

I've been attempting to construct an interceptor in Node.js, but I haven't had much success. I'm trying to create the interceptor to capture each request and include a unique header retrieved from the Koa context. Basically, when making an ...

javascriptnode.jsinterceptorkoa

Designing an interactive 3D space using JavaScript

I'm currently developing an app that allows users to visualize different wallpapers in a 3D room setting. The concept involves placing the user inside a virtual space with four walls, where they can drag and look around, as well as change wallpapers v ...

javascriptthree.js

The correct method for concealing components from unauthorized users in Vue

After much thought, I'm considering transitioning my app entirely to Vue frontend. However, there are some concerns on my mind, such as: Currently, in Laravel blade (posts page), I have the following structure: @foreach($posts as $post) <post dat ...

javascriptlaravelvue.js

Arabic Presentation of Sweetalert Error Confirmation Icon

When using sweetalert in right-to-left (RTL) direction, the checked icon on sweetalert displays a problem, as shown below: Large image view the image here Is there any solution to this issue? Note: This problem is only visible in RTL (Arabic) direction. ...

javascripthtmlcssajaxsweetalert

The search functionality in the table is experiencing a glitch where it does not work properly when trying to search with a

I created a simple mini-app with a search bar and a table displaying data. Users can enter keywords in the search bar to filter the data in the table using lodash debounce function for smoother performance. Everything works fine except for one issue - when ...

javascriptreactjslodash

Before the custom font finishes loading, useEffect is triggered

Custom font usage in my app: @font-face { font-family: "Koulen"; src: url("./assets/fonts/Koulen-Regular.ttf") format("truetype"); } body { font-family: "Koulen"; } An issue arises as the useEffect is called ...

javascriptreactjsreact-hooksfontsuse-effect

Discovering the art of incorporating various color palettes within a single stylesheet using HTML

I'm curious about incorporating multiple color schemes into a single stylesheet that can be activated by clicking, similar to the functionality found in platforms like WordPress and Magento. These platforms offer themes with various color options avai ...

javascripthtmlcss

Melodic Streaming Platform

I currently have a client-side application built using React. I have a collection of music stored on my Google Drive that I would like to stream online continuously. I lack experience in server-side programming. Can you suggest any resources or steps I s ...

javascriptphpnode.jsserverstream

Capturing all requests - javascript

I have a webpage called sample-page.html that contains 2 links: sample-page.html - link1 (GET, AJAX) - link2 (GET, new page) Clicking on link1 triggers an AJAX GET request and remains on the same page (sample-page.html). Clicking on l ...

javascriptjqueryajaxxmlhttprequest

JQGrid will automatically conceal any row that contains a false value in a given cell

I'm attempting to conceal a row if a specific cell within it contains the value false. To achieve this, I have experimented with using a formatter in the following manner: $("#list").jqGrid({ //datatype: 'clientSide', ...

javascriptjqueryjqgrid

How can you simultaneously start multiple tweens in Three.js using Tween chain?

Here's the current code snippet : function move(){ var A = new TWEEN.Tween(meshA.position).to({ z: -10 }, 2000).start(); var B = new TWEEN.Tween(meshB.rotation).to({ z: Math.PI }, 2000); var C = new TWEEN.Tween(meshC.position).to({ x: ...

javascriptthree.jschaintween.js

Trouble with sending data to child components via props

I've been trying to pass a prop to a child component in React, but when I check the props using console log, it doesn't show up at all. Even the key things is missing from the props. Any assistance with this would be greatly appreciated. export ...

javascriptreactjsroutesreact-reduxreact-router

Error Type Not Caught on Console

Could you please help me understand the error message below? I'm not very familiar with JavaScript. Uncaught TypeError: $(...).sss is not a function at HTMLDocument.<anonymous> (codejs.js:3) at i (jquery.min.js:2) at Object.fireWith [as resolve ...

javascripthtmlcsswebslider