TypeError: fs.readFileSync is not a function

[switchtrue]

I'm trying to use this with create-react-app but I get the following error. Is there something additional I need to do?

TypeError: fs.readFileSync is not a function
(anonymous function)
node_modules/webgl-heatmap/webgl-heatmap.js:8
   5 | var fs = require('fs');
   6 | var path = require('path');
   7 | /* eslint-disable max-len */
>  8 | var vertexShaderBlit = fs.readFileSync(path.join(__dirname, './vertex-shader-blit.glsl'), 'utf-8');
   9 | var fragmentShaderBlit = fs.readFileSync(path.join(__dirname, './fragment-shader-blit.glsl'), 'utf-8');
  10 | /* eslint-enable max-len */
  11 | var HeatmapTexture = require('./heatmap-texture');

[ptchiangchloe]

Hi Mike,

Have you found a solution for that? I bumped into the same issue, I think it needs some transformation in webpack.

Thanks,

Han

[stivaugoin]

Hey guys, I fixed it to add this in my Webpack config:

module: {
  rules: [
    ...
    {
      test: /node_modules.+js$/,
      loader: require.resolve("ify-loader"),
    },
  ],
},

Don't forget to add ify-loader (yarn add -D ify-loader)

I never used Webpack so I do not know what I did, but it works 😄

Source: mapbox/mapbox-gl-js#1649 (comment)

[redrobotdev]

Hey guys, still having trouble with this. Why is fs.readFileSync being called from client anyway?
error message

TypeError: fs.readFileSync is not a function
    at webgl-heatmap.js (constants.js:128)
    at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
    at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
    at index.js (constants.js:128)
    at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
    at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
    at index.js (constants.js:128)
    at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
    at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
    at heatmap_map_box.jsx (heatmap_map_box.jsx:1)

[yocontra]

Not from this module - the codebase has 0 reference to fs. The culprit is right in your stacktrace - webgl-heatmap which is a different module. If you have issues with webgl-heatmap you should open a ticket here: https://github.com/pyalot/webgl-heatmap

fs is used to load the webgl shaders, use webpack or some other bundler to solve your problem.

[vjpr]

You should update the webgl-heatmap dep to something that works in the browser, seeing as this package is only for running in a browser.

---

EDIT: Seems that it has browserify transforms already specified in its package.json, so it is indeed a webpack-user issue. Solution is ify-loader as mentioned from earlier commenter. Wish webpack had that package.json transform feature...

[2a3b4c]

I met the same issue, the above solution did not work. Someone could give me a help?

[amandakoster]

Having the same exact issues and building on create-react-app and using react-map-gl. Trying to avoid ejecting from build tool and config. Anyone find a workaround? The Uber tutorial doesn't address this:
https://visgl.github.io/react-map-gl/docs/get-started/adding-custom-data

Error:

var fs = require('fs');
   5 | var path = require('path');
   6 | /* eslint-disable max-len */
>  7 | var vertexShaderBlit = fs.readFileSync(path.join(__dirname, './vertex-shader-blit.glsl'), 'utf-8');
   8 | var fragmentShaderBlit = fs.readFileSync(path.join(__dirname, './fragment-shader-blit.glsl'), 'utf-8');
   9 | /* eslint-enable max-len */
  10 | var HeatmapNode = require('./heatmap-node');