Problems importing leaflet.glify with react

Hello guys I’m having this error when I import ‘leaflet.glify’ package:

TypeError: fs.readFileSync is not a function (anonymous function) C:/Users/leo_c/Documents/projects/leo-gis-web/node_modules/leaflet.glify/src/js/index.js:212 209 | }, 210 | mapMatrix: mapMatrix, 211 | shader: { 212 | vertex: fs.readFileSync(__dirname + ‘/…/shader/vertex/default.glsl’), | ^ 213 | fragment: { 214 | dot: fs.readFileSync(__dirname + ‘/…/shader/fragment/dot.glsl’), 215 | point: fs.readFileSync(__dirname + ‘/…/shader/fragment/point.glsl’), View compiled ./node_modules/leaflet.glify/src/js/index.js http://localhost:3000/static/js/1.chunk.js:8881:30 webpack_require C:/Users/leo_c/Documents/projects/leo-gis-web/webpack/bootstrap:785 782 | }; 783 | 784 | // Execute the module function 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 786 | 787 | // Flag the module as loaded 788 | module.l = true; View compiled fn

my code importing it: import 'leaflet.glify';

[mathieugalle]

Hi,

I have no experience with the React part of your problem so this may not work for you, but here’s how I managed to get rid of the fs problem and import leaflet.glify with webpack :

• npm install leaflet.glify (obviously)
• Go to the file node_modules/leaflet.glify/src/js/index.js
• delete the first line var fs = require('fs');
• go at the end of the file, you will find all the usages of fs, like vertex: fs.readFileSync(__dirname + '/../shader/vertex/default.glsl'). It is just used to import the shaders
• remove references to fs and copy-paste the content of the shader instead (between `` quotes) for shaders you use. For example, as I only used points, I copy-pasted vertex/default.glsl and fragments/point.glsl, and leaved the rest as ``

This is obviously a hack, but the fs library here is brfs which is a browserify dependency. You can also check on webpack-contrib , webpack tools to allow browserify transforms, but for a few shaders, I think it’s not really worth the pain.

In the long run, I hope that it will be possible to remove the dependency to brfs and go for something like glslify-require instead, like done here.

Hope this works for you !

[leodavinci1]

I have encoded the shader into a base64 string,

vertex: Buffer("dW5pZm9ybS ... yOwp9", "base64")

Definitely a hack but fixed my problem developing with react.