Error: `THREE is not defined` was encountered in `app.js` on line 3524 when trying to load `three-bmfont-text/index.js`

My goal is to utilize Three.js along with three-bmfont-text in order to generate 3D text and enhance its appearance using shaders.

After installing three and three-bmfont-text via npm, I imported them into my JS file:

import * as THREE from 'three';
const loadFont = require('load-bmfont');
const createGeometry = require('three-bmfont-text');

Upon running npm run dev and npm run watch, everything appears to be functioning properly. However, an error is logged in the Chrome developer console:

app.js:3524 Uncaught ReferenceError: THREE is not defined at Object../node_modules/three-bmfont-text/index.js

Despite attempting to reinstall both three and three-bmfont-text, the issue persists. What could I be overlooking?

javascriptthree.js

Answer №1

Perhaps this information could be beneficial for someone who comes across this query. It seems to be quite popular on Google.

To incorporate this into webpack, you can refer to this link:

plugins: [
    new webpack.ProvidePlugin({
      THREE: 'three'
    })
  ]

If you are working with Next.js, you might find this guide useful (link):

config.plugins.push(
 new webpack.ProvidePlugin({
  THREE: 'three',
 })
)

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

Ways to transfer a variable from JavaScript/jQuery to Java

I am trying to access data retrieved from another server in a Java class using JavaScript/jQuery. The data I receive from the server as a post result to my servlet is in the form of a JSON String. The response looks like this: [{"id":"1","bool_m":"0","na ...

javajavascriptjqueryliferay

deleting an object from an array in JavaScript

I have a collection of objects that looks like this: [{ "id": 2, "price": 2000, "name": "Mr Robot T1", "image": "http://placehold.it/270x335" }, { "id": 1, "price": 1000, "name": "Mr Robot T2", "image": "http://placehold.it ...

javascriptjqueryobject

What is the best method for using XMLhttpRequest in PHP to append options to a select element?

I'm looking to dynamically fetch values from a MySQL database using PHP and then add them as choices within a select element. Here is my HTML code: <label for='listDivision'>Division</label><select id='listDivision&apos ...

javascriptphphtmlajax

Receiving an 'undefined' result in an asynchronous response even with 'await' and 'then' statements implemented

I'm struggling with sending a GET request, parsing the response, and passing it to another function. It seems like I'm having difficulty dealing with the asynchronous nature of the response. I prefer to stick to using Node.js' built-in modu ...

javascriptnode.jsasync-await

Retrieve information from a JSON string

My function is not returning the title of the interval, it keeps returning undefined. Function filterByCategories () { return _.orderBy(this.meetups.filter(item => { console.log('title: ' + JSON.stringify(item.interval.title, n ...

javascriptjsonvue.jsvuejs2

React is generating an error when attempting to use hooks without the appropriate class name prefix

I'm encountering an error when I use hooks without a class name prefix. Can someone help me troubleshoot this issue? import React, {Fragment,useState} from 'react'; function App (props) { const [x,updateX] = useState(1) /* throwing error ...

javascriptnode.jsvue.jsvue-componentvuejs3

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

I'm contemplating the idea of transitioning my existing JavaScript codebase to incorporate TypeScript in NodeJS. One aspect that I am concerned about is being able to view the stack trace in AWS CloudWatch (request log) in case an error occurs during ...

javascriptnode.jsamazon-web-serviceslambdatypescript

Develop a novel function

I am working on a new Order page where users can select a category, then a service, and fill out the quantity field for their order. I have an idea to create a function using @if and @else statements. In this function, I want to display the quantity fiel ...

javascriptphphtmllaravel

Obtain the identification of a div that was generated using jQuery

I have been struggling with two functions that don't seem to work as expected. The first function creates a div in the dom, and the second function is supposed to get the ID using getElementById(), but it's just returning null. I tried using $.D ...

javascriptjquery

Passing variables to the ajax.done() function from within a loop - what you need to know

How can I pass a variable to the .done() method of an ajax call that is inside a loop? The code snippet below shows my initial attempt: <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </ ...

javascriptjqueryajaxasynchronous

Creating messages from an array using vanilla JavaScript or jQuery

I have an array of objects containing messages that I want to display on my webpage, but I'm unsure how to approach it. [{"message":"dwd","user":"csac","date":"07.04.2021 20:46"}, {"mes ...

javascriptjqueryarraysjson

The method is triggered multiple times

Why does calling a method in my controller result in the object.name being logged multiple times? (function(){ var app = angular.module('portfolio', ['ngRoute' ]); app.controller('ReferenceController', function(){ ...

javascriptangularjs

An issue arises even with the proper configuration in place: "SessionNotCreatedError: session cannot be established as Chrome version needs to fall within the range of 70 to 73."

During my automated testing with selenium-webdriver, I encountered an issue while building a driver using chromedriver. Everything was functioning perfectly until one day, when I ran a test and received the following error message: SessionNotCreatedErro ...

javascriptselenium-webdrivernpmwebdriverselenium-chromedriver

Manipulate input fields dynamically with JavaScript

I am currently working on a functionality that involves generating an alert button based on a selection from a drop-down menu. The JavaScript part of the code is able to successfully read and send the values from the <select> drop-down as intended. H ...

javascripthtmldom

Unable to cancel $interval within factory

I created a factory for long-polling, complete with start and stop methods. However, I am struggling to cancel the timer. Any suggestions or ideas? app.controller("AuthCtrl", function($scope, $http, $window, User, Poller) { Poller.start(1, $scope.sess ...

javascriptangularjs

Is it possible to remove a specific directory from the webpack build configuration in a vue-cli-3 setup?

After spending 3 hours adding the line: exclude: ['./src/assets/sass'] in 20 different places, I am seeking guidance on where it should actually be placed. Below is my current setup for the css-loader (util.js): 'use strict' const path ...

javascriptvue.jswebpackvue-cli-3

Using Angular to retrieve JSON data from a static file

Currently, I am attempting to implement this AngularJS example from a tutorial on Login Tutorial Example. Instead of storing the username and password as simple strings, I am trying to retrieve them from a local file. I understand that this may not be the ...

javascriptjqueryangularjsjson

Angular template src variable issue with no solution in sight

The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...

javascripthtmlangularjs

Is there a way to adjust a 5-minute countdown interval timer by 1 minute in a react JS application?

I am in need of creating a 5-minute interval timer using react JS, with a 1-minute offset. The current timer I have functions like this: 1:00 => 1:05 => 1:10 => 1:15 => 1:20. However, I require it to be adjusted to display: 1:01 => 1:0 ...

javascriptreact-hooksnext.jssetintervalecmascript-2016

"SyntaxError: import statements can only be at the top level of a module" is the error message that I keep encountering.`

For the complete code, click here: https://github.com/vscodr/axios_issue After spending some time away from JavaScript working in Python, I decided to come back and try to tackle similar tasks using JS. However, I seem to be stuck at a very basic issue! D ...

javascriptnpmwebpackaxios