Uncaught TypeError: fs.readFileSync is not a function

Solution 1:

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.

Solution 2:

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.

Uncaught TypeError: fs.readFileSync is not a function

Solution 1:

Solution 2:

Related

Recent Posts