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

Я пытаюсь заставить 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" } 

Что я сделал не так? Ценить кого-то из ЦРТ может объяснить ошибку, потому что я считаю, что она имеет что-то с системой Метеор. FYI, я использую 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' }] } }; 

который я получаю отсюда . И мой 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 

Для меня работает следующий 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' } ] }, }; 

У меня есть рабочий пример, который я постоянно обновляю.

Вы используете строки для test и include параметры загрузчика, которые не совпадают. Они не преобразуются в регулярные выражения , поэтому такие вещи, как js$ , никогда не будут совпадать – это означало бы буквальный $ в имени файла. Когда условие является строкой, оно будет сравниваться с полным путем , поэтому ./node_modules/mapbox-gl/js/render/painter/use_program.js не будет совпадать.

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

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

Эта часть избыточна:

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

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

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

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

Надеюсь, это поможет!

  • Когда следует использовать скобки с импортом
  • jQuery не определен в bootstrap-sass
  • Как добавить шрифт-awesome в проект Angular 2 + CLI
  • Как сделать сервер webpack dev запущенным на порту 80 и 0.0.0.0, чтобы сделать его общедоступным?
  • Как загрузить все файлы в каталог с помощью webpack без запросов
  • Динамически импортировать изображения из каталога с помощью webpack
  • Webpack ProvidePlugin vs externals?
  • Угловой 2 CLI огромный пакет поставщиков: как улучшить размер для prod?
  • Interesting Posts

    Разделение вокруг сектора жестких дисков?

    Как включить приглашение классического входа в систему вместо экрана приветствия в Windows 7

    Готово ли java final помочь компилятору создать более эффективный байт-код?

    Почему этот код печатает два раза?

    Как интерпретировать светодиодные и звуковые сигналы платы ASUS?

    Как вернуть набор результатов / курсор из анонимного блока Oracle PL / SQL, который выполняет Dynamic SQL?

    Может ли медиа-запрос изменять размер на основе элемента div вместо экрана?

    Установка Windows на Mac

    Диалоговое окно Office 2003 не может переключать язык ввода с Windows 7

    Аннотирование функционального интерфейса выражения Lambda

    Загрузить профиль Chrome с помощью Selenium WebDriver с помощью java

    Какой предпочтительный шаблон для чтения строк из файла на C ++?

    Android: как измерить общую высоту ListView

    Проверка строки для непечатаемых символов при чтении текстового файла

    Ограничение размера хранилища HTML5 для субдоменов

    Давайте будем гением компьютера.