Closed crystalfp closed 1 year ago
svg.js has no UMD wrapper for the global version. That is true.
However, the typescript compiler should pick up the esm version anyway.
To use svg.js you either load it in a script tag and can use it like v2: SVG().addTo(selector)
,
or you use esm syntax and do:
import { SVG } from '@svgdotjs/svg.js'
SVG().addTo(selector)
The typescript compiler is producing AMD modules, so your import statement is compiled to a define(["require", "exports", "@svgdotjs/svg.js"], ...
so I'm back to square one.
At the end I'm using a very ugly workaround. In the module using SVG I have:
import SVG from "node_modules/@svgdotjs/svg.js/dist/svg.min";
import type {Point, Svg} from "@svgdotjs/svg.js";
and in the shim
section of RequireJS configuration:
"node_modules/@svgdotjs/svg.js/dist/svg.min": {
exports: "SVG"
}
That is, I'm using SVG.js as a legacy library. It is a shame, but at least I'm able to use it together with all other libraries. Have a nice day! mario
You sound offended. I had no intention to offend you.
As far as I know, typescript support esm modules. That means you need to use the esm module, not the global version. In fact I used svg.js with typescript already and it worked just as you would expect
No, I'm not offended. Sorry if I give this impression.
Is that I'm trying to recover my application from a monumental misunderstanding, that is, I was adding AMD modules by hand instead of letting typescript compile them. And was hoping in a smooth transition to the correct module usage. But seems it is really hard with some libraries to make Typescript and RequireJS collaborate. With other libraries instead was smooth as silk.
The workaround I mentioned is more or less the same as your suggestion even if I have to add // @ts-uncheck
before because I still are not able to satisfy the typescript requirement of pointing to the right .d.ts file for the library.
Anyway, thanks. I'm going to fight with the next library...
I can really relate to that :D.
Hm, if typescript does not pick up the right file, you can try to point to dist/svg.esm.js
or src/svg.js
. The second one is untranspiled but typescript should handle that. Both export all the stuff according to the d.ts file
I'm also having this issue in a TypeScript project. I import the SVG
like this
import {SVG} from "@svgdotjs/svg.js"
Then when compiling I get this error,
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (11122:0) while parsing /~/node_modules/@svgdotjs/svg.js/dist/svg.esm.js
I couldn't get the workaround of @crystalfp to work. Is there any other way to solve this?
I dont know. If possible tell typescript to load the file with sourceType:module because that is what seems to be required from typescript
+1 this problem
@tmirun My solution is not pretty, but at least solved the problem. 1) In the source I import SVG.js this way:
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
import SVG from "../node_modules/@svgdotjs/svg.js/dist/svg.min";
2) Import the SVG types this way:
import type {Point, Svg} from "@svgdotjs/svg.js";
3) In the shim section of requirejs.config()
I added:
shim: {
"../node_modules/@svgdotjs/svg.js/dist/svg.min": {
exports: "SVG"
},
Then I can call and use SVG.js Hope it helps mario
P.S.: In another project I used svg native, it is not much more complex.
hey @crystalfp thank your solution, the 1rt one resolve my problem
thanks
Bug report
Loading SVG.js package (version 3.0.16) using RequireJS fails, apparently because svg.js does not conform to AMD rules.
Code to reproduce
Have Typescript (4.0.x) installed (
npm i -g typescript
)Download the minimal example svg-requirejs.zip and unzip it in an empty directory, then change to this directory.
Finish installation by:
npm i
Compile the example code with
tsc
Run the test by loading
index.html
in a browser (Firefox or Chrome) and open the console to see the error.Test cases
In
client.ts
there are three import statements corresponding to three test cases. Leave uncommented the one you are interested in. As written in the comments, you could have to changeSVG()
toSVG.SVG()
.Case 1
Using the following:
import SVG from "@svgdotjs/svg.js";
compilation fails:Changing the call to
SVG.SVG()
the compilation succeeds, but at runtime the error is:Uncaught TypeError: svg_js_1.default is undefined
Case 2
Using
import * as SVG from "@svgdotjs/svg.js";
withSVG.SVG()
at runtime the error is:Uncaught TypeError: SVG.SVG is not a function
Case 3
Using
import {SVG} from "@svgdotjs/svg.js";
gives a runtime error:Uncaught TypeError: svg_js_1 is undefined
Explanation
What is the behaviour you expect? Case 3 to succeeded. See below for an example. Page https://svgjs.com/docs/3.1/getting-started/ mentions
import { SVG } from '@svgdotjs/svg.js'
So I think this is the right way.What is happening instead? See above
What error message are you getting? See above
A working example
If this could help, the package
tippy.js
has a similar main entry point asSVG.js
. After adding torequirejs.config()
packages section this:And loading it with
import tippy from "tippy.js";
it can be called as:tippy(selector, {...});