Uncaught TypeError: fs.readFileSync не является функцией

Question

Я пытаюсь получить 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" 
    } 
    } 
} 

Для информации, я использую WebPack обеспечивается Reactive Stack и способ его настроить 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, который может объяснить ошибку, потому что я считаю, что она имеет что-то с системой Метеор. FYI, я использую npm start запустить страницу

UPDATE

на основе предложения от @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 

Answer 1

Для меня работает следующий webpack.config.js. Она включает в себя @ также хорошая идея для 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, что я по поддержанию в актуальном состоянии.

Answer 2

Эта часть является излишним:

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

Не уверен, если это вызывает проблемы, но это не нужно ,

Answer 3

Вы используете строки для параметров загрузчика test и include, которые не совпадают. Это not converted to regular expressions, поэтому такие вещи, как js$, никогда не будут совпадать - это означало бы литерал $ в имени файла. Когда условие будет строкой, оно будет compared against the full path, так что ./node_modules/mapbox-gl/js/render/painter/use_program.js не будет совпадать.

Поскольку условия погрузчика не выполняются, погрузчик не работает, а вызов fs.readFileSync не находится в строгом соответствии с преобразованием brfs.

Чтобы исправить эту, он выглядит как плагин Реактивная Stack WebPack будет read a webpack.conf.js file, где вы могли бы использовать фактические регулярные выражения и сопрягать все .js файлы или отдельные файлы, которые нуждаются в преобразовании.

Например, в webpack.conf.js (обратите внимание, что этот файл является специфичным для этого плагина Метеор 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 будет сгенерировано исключение, когда он не может найти загрузчик. С другой стороны, если вы не см. Исключение, о котором вы знаете, у вас возникла проблема с вашей конфигурацией.

Answer 4

У меня была аналогичная проблема. Попробуйте следующее:

Определите, в каком модуле выбрасывается ошибка 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' }

Надежда, что помогает!