Uncaught TypeError: fs.readFileSync is not a function
Uncaught TypeError: fs.readFileSync is not a function
我正在尝试让 webpack 和 mapbox-gl 在 Meteor 系统中协同工作。我到处查看上述错误，但 none 有效。这是我的 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
这部分是多余的：
"node": {
"fs": "empty"
}
不确定是否是它引起的问题，但您不需要它。
您正在为 test 和 include 加载器选项使用不匹配的字符串。 这些是 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，所以./node_modules/mapbox-gl/js/render/painter/use_program.js 也不匹配。
由于不满足加载器条件，加载器不是 运行 并且 fs.readFileSync 调用未被 brfs 转换内联。
要解决此问题，看起来 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'
}
]
}
};
这将匹配路径中所有 .js 个带有 mapbox-gl 的文件。
我认为您需要更新所有 module.loaders 以使用正则表达式。如果您需要检查加载器是否匹配，一个快速的技巧是将 loader 更改为伪造的东西：
{
test: /mapbox-gl.+\.js$/,
loader: 'XXXtransform/cacheable?brfs'
}
如果匹配到，Webpack在找不到加载器的时候会抛出异常。另一方面，如果您没有看到异常，您就知道您的配置有问题。
以下 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 我一直保持更新。
我遇到了类似的问题。试试这个：
确定哪个模块引发了 fs.readFileSync 错误。对我来说 mime 是 url-loader.
的依赖项
我将其替换为 file-loader，它不依赖于 mime，因此不依赖于 fs。确保卸载 url-loader，因为它仍然会抛出错误！
然后将您的 webpack.conf 更新为：
{
test: /\.(ttf|eot|svg|jpg|gif|png|woff|woff2)$/,
loader: 'file-loader'
}
希望对您有所帮助！
我正在尝试让 webpack 和 mapbox-gl 在 Meteor 系统中协同工作。我到处查看上述错误，但 none 有效。这是我的 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
这部分是多余的：
"node": {
"fs": "empty"
}
不确定是否是它引起的问题，但您不需要它。
您正在为 test 和 include 加载器选项使用不匹配的字符串。 这些是 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，所以./node_modules/mapbox-gl/js/render/painter/use_program.js 也不匹配。
由于不满足加载器条件，加载器不是 运行 并且 fs.readFileSync 调用未被 brfs 转换内联。
要解决此问题，看起来 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'
}
]
}
};
这将匹配路径中所有 .js 个带有 mapbox-gl 的文件。
我认为您需要更新所有 module.loaders 以使用正则表达式。如果您需要检查加载器是否匹配，一个快速的技巧是将 loader 更改为伪造的东西：
{
test: /mapbox-gl.+\.js$/,
loader: 'XXXtransform/cacheable?brfs'
}
如果匹配到，Webpack在找不到加载器的时候会抛出异常。另一方面，如果您没有看到异常，您就知道您的配置有问题。
以下 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 我一直保持更新。
我遇到了类似的问题。试试这个：
确定哪个模块引发了 fs.readFileSync 错误。对我来说 mime 是 url-loader.
我将其替换为 file-loader，它不依赖于 mime，因此不依赖于 fs。确保卸载 url-loader，因为它仍然会抛出错误！
然后将您的 webpack.conf 更新为：
{
test: /\.(ttf|eot|svg|jpg|gif|png|woff|woff2)$/,
loader: 'file-loader'
}
希望对您有所帮助！