Uncaught TypeError: fs.readFileSync is not a function

Question

I am trying to get webpack and mapbox-gl work together within Meteor system. I have look everywhere about the error mentioned above but none works. Here is my webpack setup

Answer 1

I had a similar issue. Try this:

Identify which module is throwing the fs.readFileSync error. For me it was mime which is a dependency of url-loader.

I replaced it with file-loader which doesn't depend on mime, and hence not the fs. Ensure to uninstall url-loader as it will still throw the error!

Then update your webpack.conf with:

{ test: /\.(ttf|eot|svg|jpg|gif|png|woff|woff2)$/, loader: 'file-loader' }

Hope that helps!

Answer 2

The following webpack.config.js is working for me. It incorporates @also's good idea for the brfs matcher:

var webpack = require('webpack')
var path = require('path')

module.exports = {
  entry: './app.js',
  output: { path: __dirname, filename: 'bundle.js' },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      webworkify: 'webworkify-webpack',
      'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'node_modules/webworkify/index.js'),
        loader: 'worker'
      },
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  },
};

I have a working example that I have been keeping up to date.

Answer 3

You're using strings for the test and include loader options which won't match. These are not converted to regular expressions, so things like js$ will never match–that would mean a literal $ in the filename. When the condition is a string, it will be compared against the full path, so ./node_modules/mapbox-gl/js/render/painter/use_program.js wouldn't match either.

Since the loader conditions aren't being met, the loader isn't running and the fs.readFileSync call isn't being inlined by the brfs transform.

To fix this, it looks like the Reactive Stack Webpack plugin will read a webpack.conf.js file, where you could use actual regular expressions and match all .js files or the particular files that need the transform.

For example, in webpack.conf.js (note that this file is specific to this Meteor Webpack plugin):

module.exports = {
  module: {
    loaders: [
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  }
};

This will match all .js files with mapbox-gl in the path.

I think you'll want to update all your module.loaders to use regular expressions. If you need to check if a loader is matching, a quick hack is to change the loader to something bogus:

      {
        test: /mapbox-gl.+\.js$/,
        loader: 'XXXtransform/cacheable?brfs'
      }

If it matches, Webpack will throw an exception when it can't find the loader. On the other hand, if you don't see an exception you know you've got a problem with your configuration.

Answer 4

This part is redundant:

"node": {
  "fs": "empty"
}

Not sure if it's causing the problem, but you don't need it.