2

I am consistently getting the error "Cannot find module '@svgdotjs/svg.js'" in a TypeScript project, even though VSCode sees the library in node_modules just fine. Maybe I'm just completely not understanding how modules work! The library builds fine using tsc and tslint.

I'm developing a library that will render SVG's based on JSON input. I am trying to run unit tests. I am using svgdom to mock the requisite DOM container.

Abbreviated package.json:

"dependencies": {
    "@svgdotjs/svg.js": "github:svgdotjs/svg.js",
},
"devDependencies": {
    "chai": "^4.2.0",
    "jest": "^23.6.0",
    "svgdom": "0.0.18",
    "ts-jest": "^23.10.5",
    "ts-loader": "^5.3.3",
    "ts-node": "^8.0.2",
    "tslint": "^5.12.1",
    "typescript": "^3.3.1",
}

ls node_modules:

    Directory: D:\github\renderer\node_modules


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2019-02-01   6:01 PM                .bin
d-----       2019-02-01   6:00 PM                @babel
d-----       2019-02-01   6:00 PM                @svgdotjs

Top of index.ts:

import SVG from "@svgdotjs/svg.js";
import Ajv from "ajv";
import { renderers } from "./renderers";
import { APRenderRep } from "./schema";
import schema from "./schema.json";

Relevant portions of of index.test.js:

import { render } from "../src/index";

test("debugging outputter", () => {
    const data = {};
    // As per the `svgdom` docs
    const window = require("svgdom");
    const {SVG, registerWindow} = require("@svgdotjs/svg.js");
    registerWindow(window, window.document);
    const canvas = SVG(document.documentElement);
    render(canvas, data);
    console.log(canvas.svg());
});

And if that weren't enough code, here's tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2015",
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": true,
        "outDir": "build",
        "resolveJsonModule": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

and jest.config.js:

module.exports = {
    globals: {
        'ts-jest': {
            tsConfig: 'tsconfig.json'
        }
    },
    'coverageDirectory': undefined,
    'collectCoverage': false,
    'collectCoverageFrom': [
        '**/src/**/*.{ts,js}'
    ],
    moduleFileExtensions: [
        'ts',
        'js'
    ],
    transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest'
    },
    testMatch: [
        '**/test/**/*.test.(ts|js)'
    ],
    testEnvironment: 'node'
};

I expect that the rendered SVG will magically appear on the console. Instead, I get the following:

FAIL  test/index.test.ts
● Test suite failed to run

    Cannot find module '@svgdotjs/svg.js' from 'index.ts'

    > 1 | import SVG from "@svgdotjs/svg.js";
        | ^
    2 | import Ajv from "ajv";
    3 | import { renderers } from "./renderers";
    4 | import { APRenderRep } from "./schema";

    at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
    at Object.<anonymous> (src/index.ts:1:1)

I have tried nuking node_modules and reinstalling. I tried a fresh clone of the repo and installing.

The actual repo is here: https://github.com/AbstractPlay/renderer.

Aaron
  • 87
  • 2
  • 9
  • Could it be that typescript picks up the d.ts file in the svg.js repo? Unfortunately that file is not up to date for version 3. It is not meant to be used with the esm version of svg.js. It only has the typings for the standalone bundle. I am not used to typescript and therefore don't know how to have an esm version if d.ts and one for the bundle – Fuzzyma Feb 02 '19 at 15:15
  • Would this all work with version 2? I really want to make this work with 3, but fundamentally I just want to get this to work. – Aaron Feb 02 '19 at 16:06
  • I am not sure. The d.ts file for version 2 works. But you have to take it from there yourself because I don't know typescript well enough to guide you – Fuzzyma Feb 02 '19 at 16:16
  • I'll just revert to the NPM version of svg.js and see if I can get things working. I wish I knew enough to tackle this problem. I'll do some reading. – Aaron Feb 02 '19 at 16:21
  • You seem to mix import statements and require statements. The import should pick up the esm bundle and the require should pick up the node bundle. You should decide for one – Fuzzyma Nov 16 '21 at 10:49

2 Answers2

1

it seems to me that the rollup.config.js file for @svgdotjs/svg.js wasn't updated for 3.0. It has:

format: node ? 'cjs' : 'iife',

and I think it should be

format: node ? 'cjs' : 'umd',

If I change that and rebuild I am able to load it. There are still errors in the d.ts file, but at least you can get started.

keithb
  • 176
  • 1
  • 5
0

In short, as of now (v3.0.11), svg.js appears to simply not work with Typescript in the way I'm using it. When I reverted to the NPM version (v2.7.1), everything worked as expected.

Aaron
  • 87
  • 2
  • 9