Error: The class you are attempting to access is

Currently, I am utilizing Vite.js along with TypeScript. My TypeScript file is located in 'src/vmodel/VGraph'. Within the index.html file, I import the aforementioned file as follows:

<script type="module" src="/src/vmodel/VGraph.ts"></script>

Subsequently, I proceed with the following code snippet:

<script>
    const graph = new VGraph()
</script>

Wherein, VGraph has been properly defined and exported within the preceding file.

However, upon execution, an error message emerges: https://i.sstatic.net/E53AE.png

ReferenceError: Can't find variable: VGraph

This perplexing issue prompts me to question the root cause behind it. Despite confirming that the file loads successfully: https://i.sstatic.net/Crse7.png

typescriptvite

Answer №1

Scripts should be enclosed within js module files for better accessibility. Follow this approach.

// src/index.js
import Chart from './chart/Chart.js'
const chart = new Chart()

//....

<script type="module" src="./src/index.js"></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

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application

I have integrated a materialUI built-in component to display data on my website. While the code closely resembles examples from the MaterialUI API site, I have customized it for my specific use case with five labeled columns. You can view my code below: h ...

javascriptreactjstypescriptmaterial-uireact-props

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Encountering a mysterious error while trying to implement React's Context API in Next.js with TypeScript. The issue seems to be revolving around wrapping the context provider around the _app.tsx file. Even though I am passing values to the Context Pr ...

reactjstypescriptnext.js

Best type for an array of dictionaries

Is there a way to correctly assign the variable r without utilizing any? const d = [{ result: 'aEzRuMA6AtQ6KAql8W9V' }, { result: 'N6mkKsnFJj98MHtYMxIi' }] const result = d.map((r: HERE) => r.result) console.log(result ) // will pr ...

typescript

Incorporating a new function into a TypeScript (JavaScript) class method

Is it possible to add a method to a method within a class? class MyClass { public foo(text: string): string { return text + ' FOO!' } // Looking for a way to dynamically add the method `bar` to `foo`. } const obj = new MyCl ...

javascripttypescriptmethods

Error message in Angular 2: "__generator is not recognized"

I've been working on intercepting outgoing HTTP requests in Angular 2 in order to generate a token from the request body and attach it to the header of each post request. Below is the code snippet that I've implemented. Initially, I encountered ...

angulartypescriptrxjs

Encountering difficulty invoking a component method from d3's call() function

My current setup involves using D3 to drag and drop links in the following manner: .call(d3.drag() .on("start", linkDragStart) .on("drag", linkDragging) .on("end", linkDragEnd)); Recently, I decided to extract this functionality into a separate met ...

javascriptangulartypescriptd3.js

Learning to implement the latest language features in JavaScript on older runtimes using TypeScript

Currently, I am faced with a dilemma in my TypeScript project involving the use of flatMap. The issue arises from the fact that this project needs to be compatible with Node.js versions as old as v10, which do not support flatMap. I had assumed that TypeS ...

node.jstypescript

Import Information into Popup Window

When a user clicks on the "view" button, only the details of the corresponding challenge should be displayed: Currently, clicking on the "view" button loads all the challenges. This is because in my view-one-challenge.component.html, I have coded it as fo ...

htmlangulartwitter-bootstraptypescript

For each array element that is pushed, create and return an empty object

I am encountering an issue with an array where the objects are being generated by a push operation within a function. Despite successfully viewing the objects directly in the array, when I attempt to use forEach to count how many times each id uses the ser ...

javascriptnode.jstypescript

Error with Array type encountered in Typescript's find method

I am encountering an issue with code that looks like this: type X = { test: number; x: number; }[]; type Y = { test: number; y: number; }[]; type Z = { test: number; z: number; }[]; export const testFunc = (arg: X | Y | Z) => { return a ...

typescript

I am having trouble establishing a connection between two containers on Heroku

My web application is built using Node.js and MongoDB. After containerizing it with Docker, everything worked fine locally. However, when I tried to deploy it to production, I encountered an issue where the backend could not establish a connection with the ...

node.jstypescriptmongodbdockerheroku

Determine whether or not there are any duplicate elements within an array object

Is there a way to determine true or false if there are any duplicates within an object array? arr = [ { nr:10, name: 'aba' }, { nr:11, name: 'cba' }, { nr:10, name: 'aba' } ] arr2 = [ { year:2020, cit ...

angulartypescriptarrayobject

Transforming JSON in Node.js based on JSON key

I am having trouble transforming the JSON result below into a filtered format. const result = [ { id: 'e7a51e2a-384c-41ea-960c-bcd00c797629', type: 'Interstitial (320x480)', country: 'ABC', enabled: true, ...

javascriptarraysnode.jsreactjstypescript

Creating a custom Typescript type by leveraging Javascript variables as the key identifiers

Picture a Typescript library that serves as a database interface, giving developers the ability to specify record attributes/columns/keys to be retrieved from the database. Is it feasible to return a type that includes the keys specified by the developer? ...

typescript

Defining the structure of an object using a type interface

I am having trouble identifying the issue with this type declaration in relation to the interface. https://i.sstatic.net/3dnJk.png When using TypeScript, I encountered an error message stating: "State is an unresolved variable". Does anyone have insight ...

reactjstypescript

TypeScript: Defining a custom object type using an array of objects

Is there a way to dynamically generate an object based on the name values in an array of objects? interface TypeA { name: string; value: number; } interface TypeB { [key: string]: { value: any }; } // How can we create an OutputType without hard ...

typescripttypes

Unlocking the power of asynchronous methods within the useEffect() hook

When attempting to fetch an API within a useEffect(), I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. Here is the code snippet that caused the error: -API being fetched: ex ...

node.jsreactjstypescriptnext.js

What could be causing the TypeScript class property to be undefined?

Below is the code snippet I am working with: class FeedbackController { public homePage(req, res){ this.test(); res.send('Welcome to feedback service'); } private test(){ console.log('test called'); } } export de ...

typescriptundefined

The attribute specified is not present on the element within the array

I'm attempting to create an array that includes an object with initialized properties and a number. Yet, I encounter this error message: The error states: 'Property 'foo' does not exist on type 'number | IObj'. The proper ...

typescript

Tips for accessing a URL page in Ionic 3 without using the ionic-native plugin

Is there a method to open a specific page when a particular URL is accessed by the browser, without relying on ionic-native for deep linking? This functionality would be beneficial both for the app itself and for development purposes. For instance, can h ...

typescriptionic-frameworkdeep-linkingionic3