readFileSync is not a function

[andreinitescu]

Running npm run start I'm getting this:

[petermikitsh]

Hi Andrei,

It looks like you're using ligatures in a browser environment. Add this to your webpack configuration:

Webpack <= 4:

module.exports = {
+   node: {
+     fs: "empty",
+   },
};

Webpack 5:

module.exports = {
+   resolve: {
+     fallback: {
+       fs: false,
+     },
+   },
};

Additionally, you might need the following rule:

https://github.com/petermikitsh/ligatures/blob/35d5fbe95eecebb3b8fb3256687d7c1633c8f089/docs/webpack.config.js#L13-L18

This will run the browserify transform brfs, which inlines calls to fs.readFileSync with the file contents.

Note: use the getLigaturesFromBuffer API in browser environments; getLigaturesFromPath is for NodeJS environments only.

A full example of usage in the browser environment is in the docs folder: https://github.com/petermikitsh/ligatures/tree/master/docs

Let me know which (if any) of these steps resolved your issue, and I will update the README. Thanks!

[andreinitescu]

Hi Peter,

For now I'm just trying to build from your repo the demo site (https://petermikitsh.github.io/ligatures/).

The two configuration changes for webpack you suggested already exist in the webpack.config.js file in your repo. Just so it's clear, here's what I run after cloning the project:

npm install
npm run build:source
npm run build:docs
npm run start:docs

In the web browser, I'm getting the error from the screenshot in my previous comment.

[andreinitescu]

Also, running npm view webpack version I get 5.11.0

[andreinitescu]

It's weird it gives an error adding your suggested config for webpack 5 ( I guess it's actually using the local webpack from node_modules ?):

[petermikitsh]

The repository expects Webpack version 4:

https://github.com/petermikitsh/ligatures/blob/35d5fbe95eecebb3b8fb3256687d7c1633c8f089/package.json#L38

Be sure to install dependencies with yarn install instead of npm install. This repository uses yarn and has a yarn.lock file.

[andreinitescu]

I cloned your repo into a new folder and used yarn instead:

yarn install
yarn run build
yarn run start

I get same error going to http://localhost:8080/. I noticed however going to docs instead (http://localhost:8080/docs/) it shows no error in console but page is blank. Looking at the HTML, there's no .js included.

I think there might be some issue with how I should run the tooling to produce the build, although it's pretty obvious, not sure.

It would be helpful if you could please show exact steps to build and run the demo app from this repo. Looks like I'm a noob when it's about these tools. Thanks.

[petermikitsh]

No worries, when getting started on this I had issues too getting fontkit to bundle properly with Webpack.

Before the steps, here's my versions of yarn and node:

$ yarn -v
1.22.5
$ node -v
v12.18.0

Here are my steps.

git clone git@github.com:petermikitsh/ligatures.git ligatures-test
cd ligatures-test
yarn install
yarn build:source
yarn start:docs

The browser automatically opened to http://localhost:8080/. I was able to get a font's ligatures as well.

One side note: npm show {pkg} version will print the latest available version from the NPM registry, which is not necessarily the version you have installed in node_modules! To verify that, you can use yarn why webpack.

$ yarn why webpack
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "webpack"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "webpack@4.43.0"
info Has been hoisted to "webpack"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "2.67MB"
info Disk size with unique dependencies: "7.54MB"
info Disk size with transitive dependencies: "25.78MB"
info Number of shared dependencies: 77
✨  Done in 0.54s.

This shows webpack v4 is installed

[andreinitescu]

My info:

yarn -v
1.22.10

node -v
v12.16.2

yarn why webpack
yarn why v1.22.10
[1/4] Why do we have the module "webpack"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "webpack@4.43.0"
info Has been hoisted to "webpack"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "2.55MB"
info Disk size with unique dependencies: "7.13MB"
info Disk size with transitive dependencies: "24.84MB"
info Number of shared dependencies: 77
Done in 0.73s.

[petermikitsh]

Would it be possible to ZIP your locally cloned directory (node_modules and all) and pass over a copy? My e-mail is in my profile. I might be able to reproduce your issue then and further inspect what's happening.

[petermikitsh]

Per Zoom call, it appears the issue is, inlining calls to fs.readFileSync is not working on Windows. This could be a problem with transform-loader or Browserify's brfs, or the integration of the two. Getting a patch may be difficult since transform-loader is a deprecated project.

A possible replacement for brfs and transform-loader could be using babel plugins, e.g: https://www.npmjs.com/package/babel-plugin-static-fs

 module: { 
   rules: [ 
     { 
       test: /node_modules\/(pdfkit|fontkit|png-js|linebreak|brotli)\//, 
-      loader: "transform-loader?brfs", 
+      use: {
+        loader: 'babel-loader',
+        options: {
+          plugins: ['babel-plugin-static-fs']
+        }
+      }
     },
  ]
}

Haven't tried this, so no guarantees if it'll work.

[andreinitescu]

Thanks, I modified the webpack config like how you suggested but it doesn't work. When compiling, it complains about not knowing what 'fs' inside other modules now.

I found something interesting (but not yet useful): https://github.com/foliojs/pdfkit/issues/927#issuecomment-468946708

As you might know, pdfkit uses fontkit. The person managed to make pdfkit (and fontkit) in the web browser, his demo repo is: https://github.com/blikblum/pdfkit-webpack-example I compiled it from the repo and it works for me too.

It also uses 'transform-loader?brfs' which is quite confusing why it's working since it doesn't work for me with your repo: https://github.com/blikblum/pdfkit-webpack-example/blob/master/webpack.config.js

The only difference I can see is that you're using Typescript and he's not. Not sure. This whole transformation thing is amazingly complicated for me. I start to think that a much better approach for any library which wants to work both in node and web-browser, is to have an abstraction in the implementation itself instead of relying on the tooling (which is also confirmed by some blogs posts I found)

[petermikitsh]

Yeah, JavaScript tooling can be challenging at times. Have you had a chance to try out #7? It removes transform-loader and brfs completely, and it doesn't use babel either. I'm slightly more confident it should work for you.

[andreinitescu]

If you have time and you'd like to do it, see if you could update to the latest webpack 5.

[petermikitsh]

I do like the idea of keeping everything up to date, but I am going to hold off on upgrading to Webpack 5 until all of the plugins are ready.

Ex: HtmlWebpackPlugin (used here) does not have stable release compatible with Webpack 5 yet (see their docs).