Uncaught TypeError: fs.readFileSync is not a function

问题:

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

{   "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"     }   } }

For your information, I use webpack provided by the Reactive Stack and the way it setup the webpack slightly different.

and here is my package.json for the npm setup

"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"   }

What have I done wrong? Appreciate someone from MDG can explain the error because I believe it has something to with Meteor system. FYI, I use npm start to run the page

UPDATE

Based on suggestion from @also, I move part of my setup to 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'         }]     } };

which I get the setup from here. And my 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'] })" ] }

but I still hit another error

=> 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

回答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.

回答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$$ 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.

回答3:

This part is redundant:

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

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

回答4:

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!

转载请标明出处:Uncaught TypeError: fs.readFileSync is not a function

文章来源: Uncaught TypeError: fs.readFileSync is not a function