Problem when using this in angular/webpack/browserify

[Masterxilo]

I recently wanted to use this in an angular 7 project and I got

ERROR in ./node_modules/text-to-svg/build/src/index.js
Module not found: Error: Can't resolve 'path' in '/mnt/d/Users/E513185/OneDrive/signaletikeditor/signaletikeditor-frontend/node_modules/text-to-svg/build/src'

[Masterxilo]

The solution is to use npm install path to install the 'path' module which native nodejs provides by itself but must be manually installed for webpack to understand it.

[Masterxilo]

'npm install process' is also necessary to avoid the subsequent error message in the browser

path.js:25 Uncaught ReferenceError: process is not defined
    at Object../node_modules/path/path.js (path.js:25)

[Masterxilo]

That actually does not fix the problem.

It is well known that angular has a problem with these libraries... see for example https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

Now how can I use this in an Angular client application successfully?

[Masterxilo]

I had other problems like

ERROR in src/app/_signaletic/plate/plate/plate.component.ts(50,12): error TS2339: Property 'process' does not exist on type 'Window'.
Uncaught ReferenceError: __dirname is not defined
Uncaught TypeError: Arguments to path.join must be strings

I could finally solve the problem using the following HACKFIX (after npm install'ing process and path):

//import TextToSVG from "text-to-svg"; // does not work
// HACKFIX for
// Uncaught ReferenceError: process is not defined and other problems
//at Object../node_modules/path/path.js
window["process"] = {}; window["__dirname"] = ''; const TextToSVG = require("text-to-svg");

[Masterxilo]

Which browserification library was used in this project?

[Masterxilo]

I would consider this issue resolved when it is possible to use this library in angular using

import TextToSVG from "text-to-svg";

I am not quite sure of all the steps required for you guys to enable this.

For now, I can work with my hackfix mentioned above:

//import TextToSVG from "text-to-svg"; // does not work
window["process"] = {}; window["__dirname"] = ''; const TextToSVG = require("text-to-svg");

[antoine382]

Did you fix your problem ? I have exactly the same !

[Masterxilo]

@antoine382 look at the end of my post above. You can define the missing variables as dummy globals on the window object.