Error: Unable to execute SVG as a function

Encountering an issue while trying to import Svg.js into my TypeScript project. After calling SVG, an error message is displayed: 

Uncaught (in promise) TypeError: SVG is not a function

Various approaches have been attempted to import Svg.js without success. Additionally, different methods of calling 'SVG' have been tested. Current Svg.js version in use is @svgdotjs/svg.js": "^3.0.11

Example:

import * as SVG from "@svgdotjs/svg.js";
const svgjs: any = SVG;
export default svgjs;

    let draw = new SVG.Doc('drawing');
    let rect = draw.rect(100, 100).attr({fill: "#f06"})

Unfortunately, the above approach triggers an error: 

Uncaught (in promise) TypeError: SVG.Doc is not a constructor

Below is the method used for importing Svg.js: 

import * as SVG from '@svgdotjs/svg.js'

How 'SVG' is utilized:

let draw = SVG('drawing');
let rect = draw.rect(100, 100).attr({fill: "#f06"})
typescriptsvg.js

Answer №1

import SVG from "@svgdotjs/svg.js/src/svg-cdn" //v3.0

let newDrawing = SVG().addTo('#canvas').viewbox(0, 0, 300, 140)
let rectangle = newDrawing.rect(100, 100).attr({fill: "#f06"})

Answer №2

Your Babel configuration could impact this, but from what I've seen, using import * as X generates an object that contains all the exports from a module. This means you would need to do the following:

let draw = SVG.default('drawing');

Alternatively, you can improve this by changing the import to import X:

import SVG from "@svgdotjs/svg.js";
...
let draw = SVG('drawing');

Answer №3

The SVG() function is now functioning properly in version 3.0.12

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

What is the reason behind using `Partial<>` to enclose the Vue props?

I am currently working with a combination of technologies, and I am struggling to pinpoint the root cause of the issue. Here is the Tech Stack: Vue 3 TypeScript Vite VSCode / Volar unplugin-vue-macros (https://github.com/sxzz/vue-macros) unplugin-vue-com ...

typescriptvue.jsvuejs3volar

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

Encountering the following error log while executing a firebase function to fetch documents and values from the recentPosts array field. Error: Unknown error status: Error: Unknown error status: TypeError: elements.get is not a function at new HttpsEr ...

javascripttypescriptfirebasegoogle-cloud-firestoregoogle-cloud-functions

Why is it considered an error when an index signature is missing in a type?

Consider the TypeScript code snippet below: type Primitive = undefined | null | boolean | number | string; // A POJO is simply meant to represent a basic object, without any complexities, where the content is unknown. interface POJO { [key: string]: ...

typescript

Is there a way to change an ISO 8601 date into the format '/Date(1525687010053)/' using JavaScript?

Is there a way to convert a date value that is formatted as 9999-12-31T00:00:00Z to the format /Date(1525687010053)/ using javascript? I tried implementing the following code, but it doesn't seem to be working: var datevalue = '9999-12-31T00:00 ...

javascripttypescriptdatedate-formattime-format

Transformed Vue code with TypeScript using a more aesthetically pleasing format, incorporating ref<number>(0)

Original Format: const activeIndex = ref<number>(0) Formatted Version: const activeIndex = ref < number > 0 Prettier Output: click here for image description Prettier Configuration: { "$schema": "https://json.schemastore.org ...

typescriptwebvuejs3code-formattingprettier

What is the best way to extract items from another array that have approved IDs - is it through using map(), filter(),

I am unsure about the best approach to retrieve only the items (array with objects) that have been approved based on their id. Should I start by using map() and then filter(), or should I filter() them first and then map()? export class AppComponent { ...

arraysangulartypescriptdictionaryfilter

ag-grid's onGridReady function is not functioning properly

I am trying to dynamically load ag-grid when a button is clicked, but I have encountered issues with both of my approaches. Here is my code for the first method: onBtnClick(){ this.gridOptions ={ onGridReady : function(){ console ...

javascriptangulartypescriptgridag-grid

Troubleshoot an Office add-in using VS Code

Looking for guidance on Office add-ins and VS code... I recently went through the steps outlined in this tutorial by Microsoft to create an Excel custom functions add-in. To debug it using VS code, I had to select TypeScript as the script type while creat ...

exceltypescriptoffice-jsoffice-addinsexcel-web-addins

Has anyone tried integrating Reveal JS with Angular 8?

Encountering a problem with the integration of Reveal JS in an Angular component. Despite being initialized after DOM processing, it is not displaying anything. What is the appropriate time to initialize the reveal library? Is there a way to incorporate ...

angulartypescriptreveal.js

Tips on preventing image previews from consuming too much text data while updating a database in Angular 12 using Material UI for image uploads within a FormGroup object

Currently working with Angular 12 and Angular Material for image uploads with preview. I have a formgroup object below, but I'm running into issues with the 197kb image preview text being inserted into the database. Despite trying setValue/patchValue/ ...

typescriptangular-materialangular12

Next.js 14 useEffect firing twice upon page load

Having an issue with a client component in next js that is calling an API twice at page load using useEffect. Here's the code for the client component: 'use client'; import { useState, useEffect } from 'react'; import { useInView ...

javascripttypescriptnext.jsreact-hooks

What method can be used to verify if a username exists within Angular data?

We want to display online users on a webpage by checking if they are currently active. The current code logs all online users in the console, but we need to show this visually on the page. public isOnline: boolean = false; ... ... ngOnInit() { ...

angulartypescriptangular6

Having issues with your Typescript in Sublime Text?

The issue with the TypeScript plugin in Sublime Text (version 3126) suddenly arose without any identifiable cause. It seems that the plugin no longer recognizes types, resulting in disabled error highlights and autocompletions. This problem occurred on M ...

typescriptpluginssublimetext

Clear drop down selections after button is pressed

I am currently working with a grid in my template that contains multiple dropdowns, each row having its own. When I click a button, I gather the values from these dropdowns. However, upon clicking this button, I wish to reset all the dropdowns back to thei ...

angulartypescript

Develop a type definition utilizing dotted paths from a recursive object model

Working with TypeScript, I am dealing with a nested object structure of functions defined as: type CallbackFn = (args: any) => any type CallbackObj = { [key: string]: CallbackFn | CallbackObj } const callbacks = { foo: function(args: { x: num }): st ...

typescript

What is the best method for showcasing information within an Angular Material table?

When using Angular material to display a list, I am facing an issue where the content of the list is not being displayed but the header is. Component: export class CompaniesComponent implements OnInit { displayedColumns: string[] = ['id']; ...

angulartypescripthtml-tableangular-material

The logic behind combining elements from two arrays in JavaScript/TypeScript

Explanation of two different array formats const arr1 = [ { "elementName": "one" }, { "elementName": "two" } ] const arr2 = [ { "type": "RPT_PROPERTY_DEMOGRP", "values": [ { "label": "HH" }, { " ...

javascripttypescript

Using Required and Partial with an Array of Generic Types

I'm currently working with the following types: interface Color { color: string } type DarkerColor<T> = T & Color & { darker: string } type ColorInfo<T> = DarkerColor<T> & { hue: number luminance: number opacity ...

typescript

The Typescript hello world example encounters an issue with Karma

Recently, I encountered an issue while working on a TypeScript project with Jasmine and Karma. It seems that Karma is unable to execute the compiled unit tests due to an error showing up in Chrome: Uncaught ReferenceError: define is not defined To illust ...

typescriptjasminekarma-runner

Get the data property from the interface and define the return type

In my function, I am trying to extract data from an object structured by an interface. I want this function to specifically resolve the property data from the data object. While it works when I have any as the return type, I believe there should be a more ...

typescript