How to properly import SVG.js 3.0.x version into a Typescript Create-React-App project

Question

As my problems' topic hasn't been answered in detail in any other thread nor there is no good answer at the official Svg.js web-site I am posting it in a new thread with a detailed specification of the problem.

1. My dev stack is:

a.) CRA (create-react-app) - "react-scripts": "3.1.2"

b.) Typescript - "typescript": "3.6.3"

c.) SVG.js - "@svgdotjs/svg.js": "^3.0.13"

2. What I want to achieve:

I want to import properly SVG.js in order to use it in my element with id="drawing" to draw svg shapes inside of the element.

3. My problem is:

If I import my Svg.js library this way:

import * as SVG from "@svgdotjs/svg.js";

or in this way:

import SVG from "@svgdotjs/svg.js/src/svg";

Then I can't use SVG later in any way in my project.

Doing this for example doesn't work:

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

I receive messages about "could not find declaration file for module @svgdotjs/svg.js/src/svg" when using the second import which I have shown above

and

when using the first import presented by me above, suddenly Intellij Idea shows the types in the code but does not recognize the SVG() and says "This expression is not callable. Type 'typeof import("@svgdotjs/svg.js")' has no call signatures."

Either way I can't make it working like it should.

My test code is here:

import React from 'react';
import * as SVG from "@svgdotjs/svg.js";
//import SVG from "@svgdotjs/svg.js/src/svg";
import './App.css';
const App: React.FC = () => {
  let draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
  let rect = draw.rect(100, 100).attr({fill: "#f06"})
  return (
    <div className="App">
    SVG.js test :)
      <div id="drawing">
      </div>
    </div>
  );
}
export default App;

4. My question is:

How to import and use with success Svg.js in a create-react-app with typescript ?

Only answers with real solutions and not assumptions welcome.

Best regards!

Answer 1

I did things more like this

import React from 'react';
import * as svgjs from "@svgdotjs/svg.js";
import './App.css';
const App: React.FC = () => {
  let draw = svgjs.SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
  let rect = draw.rect(100, 100).attr({fill: "#f06"})
  ....

But I get excetption at runtime in webpack:///node_modules/@svgdotjs/svg.js/src/elements/Dom.js