koltyakov / generator-sppp

🐾 SP Pull-n-Push - Yeoman generator for SharePoint client-side applications
MIT License
64 stars 12 forks source link

Question: what am I missing adding RTF-to-HTML third-party library? .. #92

Closed Gennady-G closed 1 year ago

Gennady-G commented 1 year ago

Greetings Andrew!

Want to read rtf template and then create modified report in sp library.

https://www.npmjs.com/package/@iarna/rtf-to-html https://github.com/iarna/rtf-to-html

I'm new in typescript and got stuck on "Uncaught Error: Cannot find module 'fs'" error..

Don't understand how to reference fs module (as I understand it should be part of NodeJs, but it is not found..)

My example code is:

import { loadContext } from "@utils/env";
import { logger } from "@utils/logger";
import { setupPnp } from "@utils/odata";

// import * as fs from "fs";         // <- tried to load like this
const fs = require("fs");            // and like this
import rtfToHTML from "@iarna/rtf-to-html";

loadContext()
  .then(() => {
    setupPnp();

    const container = document.getElementById("example-cewp-container");

    const rtfString = "{\\rtf1\\ansi\\deff0 hi \\b there\\b0  \\ul there \\ulnone\\i there is\\i0\\par }";
    rtfToHTML.fromString(rtfString, (err, html) => {
      console.log(html);

      // This works ok, prints a document containing:
      // <p>hi <strong>there</strong> <u>there </u><em>there</em></p>
    });

    rtfToHTML.fromStream(fs.createReadStream(`C:\qdr_template_en.rtf`), (err, html) => {      // <-----  Uncaught Error: Cannot find module 'fs'

      // rtfToHTML.fromStream(fs.createReadStream("http://sppp/sites/site/web/Shared%20Documents/qdr_template_en.rtf"), (err, html) => { // not sure if it works by url..
      console.log("html");
    });
  })
  .catch(logger.error);

fs-missing-2023-09-07_210852

index.ts:8 Uncaught Error: Cannot find module 'fs' at webpackMissingModule (index.ts:8:20) at ./src/scripts/index.ts (index.ts:8:20) at webpack_require__ (bootstrap:19:1) at 4 (app.js?v=1.0.0_1694106066194:22590:18) at webpack_require (bootstrap:19:1) at bootstrap:83:1 at bootstrap:83:1 webpackMissingModule @ index.ts:8 ./src/scripts/index.ts @ index.ts:8 webpack_require @ bootstrap:19 4 @ app.js?v=1.0.0_1694106066194:22590 __webpack_require @ bootstrap:19 (anonymous) @ bootstrap:83 (anonymous) @ bootstrap:83 client:52 [WDS] Live Reloading enabled. client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts' errors @ client:159 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:52 [WDS] Live Reloading enabled. client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts' errors @ client:159 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:55 [WDS] App updated. Recompiling... client:55 [WDS] App updated. Recompiling... client:55 [WDS] App updated. Recompiling... client:55 [WDS] App updated. Recompiling... client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts' errors @ client:159 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts' errors @ client:159 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts' errors @ client:159 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:150 [WDS] Errors while compiling. Reload prevented. errors @ client:150 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 (anonymous) @ sockjs.js:885 SockJS._transportMessage @ sockjs.js:883 EventEmitter.emit @ sockjs.js:86 WebSocketTransport.ws.onmessage @ sockjs.js:2958 client:159 ./src/scripts/index.ts Module not found: Error: Can't resolve 'fs' in 'C:_prj\html-to-rtf-test\src\scripts'

Best regards, Gennady

koltyakov commented 1 year ago

Hi @Gennady-G,

fs module is the Node.js one (runs on a server, not in a browser).

When you bundle a solution for the frontend you can't use server side modules. That's why the error, as the generator's solutions is client side browser apps targeted.

Gennady-G commented 1 year ago

Arghh... Thank You much Andrew!) And also thank You much for sppp generator! :) 👍