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.
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.