未捕获的 TypeError：fs.readFileSync 不是函数答案

【问题标题】：Uncaught TypeError: fs.readFileSync is not a function未捕获的 TypeError：fs.readFileSync 不是函数
【发布时间】：2016-10-03 03:36:50
【问题描述】：

我正在尝试让 webpack 和 mapbox-gl 在 Meteor 系统中一起工作。我到处寻找上面提到的错误，但没有一个有效。这是我的 webpack 设置

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "node": {
    "fs": "empty"
  },
  "externals": {
    "fs": "{}",
    "tls": "{}",
    "net": "{}",
    "console": "{}"
  },
  "module": {
    "loaders": [
      { 
        "test": "/\\.js$/", 
        "include": "./node_modules/mapbox-gl/js/render/painter/use_program.js", 
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/mapbox-gl-shaders/index.js",
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/webworkify-webpack/index.js",
        "loader": "worker"
      }, {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.json$/", 
        "loader": "json-loader" 
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ],
  "postLoaders": [
    {
      "include": "./node_modules/mapbox-gl/",
      "loader": "transform",
      "query": "brfs"
    }
  ],
  "resolve": {
    "alias": {
      "webworkify": "webworkify-webpack"
    }
  }
}

为了您的信息，我使用Reactive Stack 提供的 webpack，它设置 webpack 的方式略有不同。

这是我的 package.json 用于 npm 设置

"dependencies": {
    "meteor-node-stubs": "^0.2.3",
    "meteoredux": "0.0.2",
    "numeral": "^1.5.3",
    "object-assign": "^4.0.1",
    "react": "^0.14.8",
    "react-addons-create-fragment": "^0.14.8",
    "react-addons-css-transition-group": "^0.14.8",
    "react-addons-linked-state-mixin": "^0.14.8",
    "react-addons-perf": "^0.14.8",
    "react-addons-pure-render-mixin": "^0.14.8",
    "react-addons-test-utils": "^0.14.8",
    "react-addons-transition-group": "^0.14.8",
    "react-addons-update": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-helmet": "^3.0.0",
    "react-mixin": "^3.0.4",
    "react-redux": "^4.4.4",
    "react-tap-event-plugin": "^0.2.2",
    "redux": "^3.4.0",
    "string": "^3.3.1"
  },
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "brfs": "^1.4.3",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "geojson": "^0.3.0",
    "less": "^2.3.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.6.0",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.2.0",
    "sass-loader": "^3.2.0",
    "sass-resources-loader": "^1.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-hot-middleware": "^2.4.1",
    "json-loader": "^0.5.4",
    "webworkify-webpack": "^1.1.0",
    "transform-loader": "^0.2.3",
    "mapbox-gl": "^0.19.0"
  }

我做错了什么？感谢MDG 的某个人可以解释该错误，因为我相信它与 Meteor 系统有关。仅供参考，我使用npm start 来运行页面

更新

根据@also 的建议，我将部分设置移至webpack.conf.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            webworkify: 'webworkify-webpack'
        }
    },
    module: {
        loaders: [{
            test: /\.json$/,
            loader: 'json-loader'
        }, {
            test: /\.js$/,
            include: path.resolve('./node_modules/mapbox-gl-shaders/index.js'),
            loader: 'transform/cacheable?brfs'
        }],
        postLoaders: [{
            include: /node_modules\/mapbox-gl-shaders/,
            loader: 'transform',
            query: 'brfs'
        }]
    }
};

我从here 获得设置。还有我的webpack.json

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "module": {
    "loaders": [
      {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules",
          "./src/SewApps/client/css",
            "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules",
          "./src/SewApps/client/css",
          "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ]
}

但我仍然遇到另一个错误

=> Exited with code: 8                        
W20160609-14:26:04.106(8)? (STDERR) 
W20160609-14:26:04.107(8)? (STDERR) /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/app/server.js:59
W20160609-14:26:04.107(8)? (STDERR)     import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr';
W20160609-14:26:04.107(8)? (STDERR)     ^^^^^^
W20160609-14:26:04.107(8)? (STDERR) SyntaxError: Unexpected reserved word
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/suolja/src/.meteor/local/build/programs/server/boot.js:278:30
W20160609-14:26:04.107(8)? (STDERR)     at Array.forEach (native)
W20160609-14:26:04.107(8)? (STDERR)     at Function._.each._.forEach (/Users/muhaimincs/.meteor/packages/meteor-tool/.1.3.1.r1m70++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/boot.js:133:5

【问题讨论】：

fs 是一个用于访问文件系统的 NodeJS 模块。您是否尝试从浏览器运行它？
没有。不像那样。当我成功完成 webpack 时，浏览器中会出现此错误
Webpack 设置没有解释调用 fs.readFileSync 的位置和原因。如果它被客户端代码调用，这是一个错误。我建议调试 readFileSync 调用并从调用堆栈继续。
如果我删除了fs，那么在我的构建过程中我将拥有这个ERROR in ./~/mapbox-gl-shaders/index.js Module not found: Error: Cannot resolve module 'fs' in /node_modules/mapbox-gl-shaders @ ./~/mapbox-gl-shaders/index.js 1:9-22

标签： meteor reactjs webpack mapbox-gl-js

【解决方案1】：

这部分是多余的：

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

不确定是否是导致问题的原因，但您不需要它。

【讨论】：

【解决方案2】：

您正在为 test 和 include 加载器选项使用不匹配的字符串。 这些是 not converted to regular expressions，所以像 js$ 这样的东西永远不会匹配——那会表示文件名中的文字$。当条件为字符串时，为compared against the full path，所以./node_modules/mapbox-gl/js/render/painter/use_program.js也不匹配。

由于未满足加载程序条件，加载程序未运行，brfs 转换未内联 fs.readFileSync 调用。

要解决这个问题，看起来 Reactive Stack Webpack 插件将 read a webpack.conf.js file，您可以在其中使用实际的正则表达式并匹配所有 .js 文件或需要转换的特定文件。

例如，在webpack.conf.js 中（注意这个文件是特定于这个 Meteor Webpack 插件的）：

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

这将匹配路径中带有mapbox-gl 的所有.js 文件。

我想你会想要更新你所有的module.loaders 以使用正则表达式。如果您需要检查加载程序是否匹配，一个快速的技巧是将loader 更改为虚假内容：

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

如果匹配，Webpack 会在找不到 loader 时抛出异常。另一方面，如果您没有看到异常，则说明您的配置有问题。

【讨论】：

感谢您的回答。现在我将所有配置移至webpack.conf.js。请参阅上面的更新问题

【解决方案3】：

以下 webpack.config.js 对我有用。它结合了@also 对 brfs 匹配器的好主意：

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'
      }
    ]
  },
};

我有一个working example，我一直在更新。

【讨论】：

mapboxgl 的版本
我在我的项目中运行的是 0.18.0，工作示例是 0.20.0。两者都正常工作。
我收到了这个警告./~/mapbox-gl/dist/mapbox-gl.js Critical dependencies: 1:481-488 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/mapbox-gl/dist/mapbox-gl.js 1:481-488
如果您包含源文件而不是预构建的 js，您最终会遇到著名的“无法读取未定义的属性‘调用’”错误。它会编译得很好，但你会在浏览器中看到它。我决定我可以忍受这个警告。 :)

【解决方案4】：

我遇到了类似的问题。试试这个：

确定哪个模块引发了fs.readFileSync 错误。对我来说，它是 mime，它是 url-loader 的依赖项。

我将它替换为不依赖于mime 的file-loader，因此不依赖于fs。确保卸载url-loader，因为它仍然会抛出错误！

然后更新您的webpack.conf：

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

希望有帮助！

【讨论】：