Uncaught TypeError: fs.readFileSync non è una funzione

Sto cercando di far interagire webpack e mapbox-gl con il sistema Meteor. Ho cercato ovunque l’errore di cui sopra ma nessuno funziona. Ecco la mia configurazione del 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" } } } 

Per vostra informazione, utilizzo il webpack fornito dallo stack reattivo e il modo in cui il pacchetto web è stato configurato in modo leggermente diverso.

ed ecco il mio package.json per l’installazione di 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" } 

Cosa ho fatto di sbagliato? Apprezzare qualcuno di MDG può spiegare l’errore perché credo che abbia qualcosa con il sistema Meteor. Cordiali saluti, io uso npm start a eseguire la pagina

AGGIORNARE

Sulla base del suggerimento di @also, sposto parte del mio setup su 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' }] } }; 

da cui ottengo il setup da qui . E il mio 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'] })" ] } 

ma ho ancora colpito un altro errore

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

Il seguente webpack.config.js sta funzionando per me. Incorpora @ è anche una buona idea per l’abbinatore 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' } ] }, }; 

Ho un esempio funzionante che mi sono tenuto aggiornato.

Stai utilizzando le stringhe per il test e include opzioni del caricatore che non corrispondono. Questi non vengono convertiti in espressioni regolari , quindi cose come js$ non corrisponderanno mai, ciò significherebbe un letterale $ nel nome del file. Quando la condizione è una stringa, verrà confrontata con il percorso completo , quindi ./node_modules/mapbox-gl/js/render/painter/use_program.js non corrisponderebbe a nessuno dei due.

Poiché le condizioni del caricatore non vengono soddisfatte, il caricatore non è in esecuzione e la chiamata fs.readFileSync non viene inarcata dalla trasformazione brfs .

Per risolvere questo problema , sembra che il plug-in Webpack di Reactive Stack leggerà un file webpack.conf.js , in cui è ansible utilizzare espressioni regolari effettive e abbinare tutti i file .js o i file specifici che richiedono la trasformazione.

Ad esempio, in webpack.conf.js (si noti che questo file è specifico per questo plug-in Meteor Webpack):

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

Questo corrisponderà a tutti i file .js con mapbox-gl nel percorso.

Penso che vorrai aggiornare tutti i tuoi module.loaders per usare le espressioni regolari. Se hai bisogno di verificare se un caricatore è compatibile, un trucco rapido è di cambiare il loader in qualcosa di falso:

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

Se corrisponde, Webpack genererà un’eccezione quando non trova il loader. D’altra parte, se non vedi un’eccezione sai che hai un problema con la tua configurazione.

Questa parte è ridondante:

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

Non sono sicuro se sta causando il problema, ma non ne hai bisogno.

Ho avuto un problema simile. Prova questo:

Identifica quale modulo sta fs.readFileSync errore fs.readFileSync . Per me era un mime che è una dipendenza di url-loader .

L’ho sostituito con file-loader che non dipende dal mime , e quindi non dal fs . Assicurati di disinstallare url-loader poiché continuerà a generare l’errore!

Quindi aggiorna il tuo webpack.conf con:

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

Spero possa aiutare!