Troubleshooting ThreeJS import issues in Vue test utilities using Jest

I'm currently facing a challenge with my Jest tests for a VueJS SPA after integrating Three.js into one of my components. While everything runs smoothly in the app, the tests fail with this error:

/Users/Whomever/FE/node_modules/three/examples/jsm/controls/OrbitControls.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {
                                                                                             ^^^^^^

SyntaxError: Cannot use import statement outside a module

It seems that the issue originates from OrbitControls, and I've been struggling to find a workaround. I attempted importing /js instead of /jsm in my component, but then faced an error stating "THREE is not defined." What baffles me the most is that this particular component (nested four layers deep from App.vue) causes all tests to crash, even those unrelated to Three.js.

I also tried declaring THREE globally in the main Vue definition without luck. Below is how my component file looks:

import Vue from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as THREE from "three";
export default Vue.extend({
  name: "Some3DComponent",
  components: {}
  data: () => ({
    displayModes: [],
    viewWidth: 100,
    viewHeight: 100,
    modelClickableElements: null,
    has3dModel: false,
    ground: null,
    animationFrame: null,
    editorMode: null,
    renderGround: true,
    scales: null
  }),
//Remaining code utilizing THREE and OrbitControls

    });

I even attempted importing THREE in the index.html file with no success, leaving me feeling stuck.

These challenges only arose after incorporating Three.js; previously, all tests functioned properly. Any assistance would be greatly appreciated!

Answer №1

Avoid importing OrbitControls from the examples folder as it is a custom function tailored for specific use cases.

Instead, consider copying and pasting the necessary example code into a new TypeScript class within your project. This will allow you to import it successfully. Keep in mind that both files may be importing THREE, which could lead to context issues.

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

My mongoose record is properly saved but does not reflect any updates

let updateNoteForUser = await UserRecords.findOne({userid: message.author.id}) updateNoteForUser.content[1].note = `SWAMISHREEJI` updateNoteForUser.save().then((doc) => { console.log(doc); }).catch(err => console.log(err)) schema ...

Switching between 3 text options with the click of a button

I am in the process of creating a website and I want to be able to switch between displaying three different text values with the click of a button. Specifically, I am trying to toggle between USD and GBP values for standard and premium fees. Currently, I ...

Utilizing vuetify color properties in conjunction with personalized theme modifications

Using vuetify (2.5.8) with a custom theme color is presenting some challenges. We have established our own color names using Strings or Objects to have more control over the variations generated and reduce the number of css variables needed. In the docume ...

Leveraging 2-dimensional indexes in collaboration with the $geoNear operator

I encountered an issue while attempting to use geoNear with aggregate as I received the following error message: errmsg: "'near' field must be point" The reason for this error is because my location field is represented as [Number]: var locati ...

Implementing dynamic ng-forms with real-time validation

My directive includes a template with an ng-form: <ng-form name="autocompleteForm"> <div class="form-group" show-errors> <input type="text" class="form-control" ng-model="ctrl.val.value" name="autocompleteField" required> < ...

How can buttons be inserted into individual rows within the <v-data-table> component in Vuetify?

Check out this example below from the Vuetify documentation: https://i.sstatic.net/EYyPX.png Here is the code for it: <template> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" >&l ...

Exploring the selected object in VueJs

I am attempting to showcase a fullName function using the selected value HTML : <div id="test"> <h1>{{ sayHello }}</h1> <select v-model="selected"> <option v-for="person in persons" v-bind:value="person.about"> {{ per ...

In Vue.js, cycle through items and create a new row for every group of 3 items

I am currently working on a code that displays 3 items in each row. <b-container class="tags"> <b-row v-for="index in 3" :key="index"> <b-col> <MovieItem /> </b-col> <b-col> ...

Incorporating the id attribute into the FormControl element or its parent in Angular 7

I'm attempting to assign an id attribute to the first invalid form control upon form submission using Angular reactive forms. Here is my current component code: onSubmit() { if (this.form.invalid) { this.scrollToError(); } else { ...

Strange glitch in the rendering of rectangles on HTML5 canvas?

While experimenting with pre-rendering sprites using HTML5 canvas, I encountered some strange behavior that appears to be a rendering bug. The issue can be seen in the following minimal example: var CT = document.getElementById("myCanvas").getContext("2 ...

Caution: It is important for each child in a list to possess a distinct "key" prop. This is a crucial step in

Just started learning react and encountered this warning message: Warning: Each child in a list should have a unique "key" prop. Check the render method of `TravelerStoriesPage`. Here's the code snippet for TravelerStoriesPage: const Trave ...

Tips for ensuring the middle row remains sandwiched between the header and footer rows in Bootstrap

After adding styles for img with max-height:100% and max-width:100%, the display looked fine with just images. However, upon further inspection, I noticed that if the middle row (which can contain one or two columns side by side) has multiple images or an ...

What steps can be taken to display the English translation if the desired translation is not found in the designated language file?

My setup includes two different locales: ru and en. If a translation is not found in the selected language file, how can I display the English version? Here are my current internationalization settings: i18n: { defaultLocale: 'en', f ...

What is the best way to distinguish between the paths for administrators and regular users?

Currently, I am in the process of setting up routes using node js for a dashboard. Firstly, users will need to log in to obtain a JWT token. With the Token, users can access various user-related routes such as editing, deleting, and logging out. However, ...

Steps for integrating WebRTC recording functionality with a Node.js server

Looking to develop a user-friendly video blogging solution that utilizes WebRTC technology for direct recording of video/audio within the browser, similar to Youtube's My_Webcam. The backend should be powered by Node.js. While exploring various Node. ...

Unable to fetch a new session from the selenium server due to an error

I'm currently in the process of setting up Nightwatch.js for the very first time. I am following the tutorial provided at this link: https://github.com/dwyl/learn-nightwatch Unfortunately, I have encountered a barrier and require assistance to resolv ...

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

Conceal specific select menu choices in VueJS based on a specified condition

I am working on a project that involves 3 select drop-down menus. The goal is to dynamically hide specific options in the drop-down menus based on the selections made in the other 2 menus. For example: If I choose 'English' as the subject in the ...

Combining mongoose distinct, skip, and limit functions for efficient querying

To implement pagination, I need to utilize the skip and limit functions, as well as the distinct function to ensure unique values are returned. When I use MyModel.find().distinct('blaster', function(err, results) { res.render('index&ap ...

Fill in input field based on choice from the drop-down menu - JavaScript

I am facing an issue where I cannot add text inside the text box based on the dropdown selection. For example, if I select option2 from the dropdown, the textbox should be populated with option2. (function() { 'use strict'; setInterva ...