Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using canvg in React project gives a compile error

See original GitHub issue

I am using canvg in a React project.

yarn add canvg
import canvg from 'canvg';

It gives a compile error.

ERROR in ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js Module not found: Error: Can’t resolve ‘child_process’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/lib/jsdom/living’ @ ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js 4:18-42 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/cssstyle/lib/CSSStyleDeclaration.js Module not found: Error: Can’t resolve ‘fs’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/cssstyle/lib’ @ ./node_modules/cssstyle/lib/CSSStyleDeclaration.js 7:9-22 @ ./node_modules/jsdom/lib/jsdom/level2/style.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/lib/jsdom.js Module not found: Error: Can’t resolve ‘fs’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/lib’ @ ./node_modules/jsdom/lib/jsdom.js 6:11-24 @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js Module not found: Error: Can’t resolve ‘fs’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/lib/jsdom/browser’ @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js 7:11-24 @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/lib/jsdom/living/xhr-utils.js Module not found: Error: Can’t resolve ‘fs’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/lib/jsdom/living’ @ ./node_modules/jsdom/lib/jsdom/living/xhr-utils.js 5:11-24 @ ./node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js @ ./node_modules/jsdom/lib/jsdom/browser/Window.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/node_modules/request/lib/har.js Module not found: Error: Can’t resolve ‘fs’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/node_modules/request/lib’ @ ./node_modules/jsdom/node_modules/request/lib/har.js 3:9-22 @ ./node_modules/jsdom/node_modules/request/request.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/forever-agent/index.js Module not found: Error: Can’t resolve ‘net’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/forever-agent’ @ ./node_modules/forever-agent/index.js 6:10-24 @ ./node_modules/jsdom/node_modules/request/request.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/node_modules/request/node_modules/tough-cookie/lib/cookie.js Module not found: Error: Can’t resolve ‘net’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/node_modules/request/node_modules/tough-cookie/lib’ @ ./node_modules/jsdom/node_modules/request/node_modules/tough-cookie/lib/cookie.js 32:10-24 @ ./node_modules/jsdom/node_modules/request/lib/cookies.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/jsdom/node_modules/tough-cookie/lib/cookie.js Module not found: Error: Can’t resolve ‘net’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/jsdom/node_modules/tough-cookie/lib’ @ ./node_modules/jsdom/node_modules/tough-cookie/lib/cookie.js 32:10-24 @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/tunnel-agent/index.js Module not found: Error: Can’t resolve ‘net’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/tunnel-agent’ @ ./node_modules/tunnel-agent/index.js 3:10-24 @ ./node_modules/jsdom/node_modules/request/lib/tunnel.js @ ./node_modules/jsdom/node_modules/request/request.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/forever-agent/index.js Module not found: Error: Can’t resolve ‘tls’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/forever-agent’ @ ./node_modules/forever-agent/index.js 7:10-24 @ ./node_modules/jsdom/node_modules/request/request.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

ERROR in ./node_modules/tunnel-agent/index.js Module not found: Error: Can’t resolve ‘tls’ in ‘/Users/vijayst/Documents/react/dandi/dandi-ui/node_modules/tunnel-agent’ @ ./node_modules/tunnel-agent/index.js 4:10-24 @ ./node_modules/jsdom/node_modules/request/lib/tunnel.js @ ./node_modules/jsdom/node_modules/request/request.js @ ./node_modules/jsdom/node_modules/request/index.js @ ./node_modules/jsdom/lib/jsdom/browser/resource-loader.js @ ./node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js @ ./node_modules/jsdom/lib/jsdom/living/node-iterator.js @ ./node_modules/jsdom/lib/jsdom/living/index.js @ ./node_modules/jsdom/lib/jsdom.js @ ./node_modules/canvg/canvg.js @ ./src/reports/SummaryWidget.js @ ./src/comp/Summary.js @ ./src/layout/Routes.js @ ./src/Main.js @ ./src/App.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch webpack/hot/only-dev-server ./src/App.js

Issue Analytics

State:
Created 5 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

gabelernercommented, Nov 5, 2018

That’s related to https://github.com/canvg/canvg/issues/647, I unpublished

1reaction

Pauancommented, Aug 5, 2018

This is not a runtime error, it is an error while Webpack is bundling the code. It happens because canvg has jsdom and xmldom dependencies (in package.json) but those dependencies cause Webpack to break.

The correct solution is for canvg to change its package.json and add a browser property which lets Webpack know that jsdom and xmldom should not be loaded in the browser:

{
    "browser": {
        "jsdom": false,
        "xmldom": false
    }
}

This is used by fabric (and many other npm packages).

Top Results From Across the Web

Build error while compiling create-react-app - Stack Overflow

This means eslint-plugin-import not available in your node_modules . A fresh npm install eslint-plugin-import and restart the application ...

canvg - npm

Start using canvg in your project by running `npm i canvg`. There are 193 other projects in the npm registry using canvg.

jspdf | Yarn - Package Manager

A library to generate PDFs in JavaScript. You can catch me on twitter: @MrRio or head over to my company's website for consultancy....

Tutorial: Create a Node.js and React app in Visual Studio

In this tutorial, you create a Node.js web app project from a Visual Studio template. Then, you create a simple app using React....

canvg | canvg

const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); v = await Canvg.from(ctx, './svgs/1.svg'); // Start SVG rendering with ...