1. 技术文章
  2. Uncaught TypeError: fs.readFileSync is not a function

Uncaught TypeError: fs.readFileSync is not a function

由 拜拜、爱过 提交于 2019-11-27 09:45:27
mikewilliamson

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.

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.

This part is redundant:

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

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

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!

标签
meteor
reactjs
Webpack
mapbox-gl-js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!