Uncaught TypeError: fs.readFileSync keine Funktion

Ich versuche webpack und mapbox-gl arbeiten zusammen innerhalb von Meteor Systems. Ich habe überall suchen, über die oben genannten Fehler, aber keiner funktioniert. Hier ist mein 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"
    }
  }
}

Für Ihre Informationen, ich benutze webpack zur Verfügung gestellt von der Reaktive Stack und die Art und Weise es einrichten das webpack etwas anders.

und hier ist mein package.json für die 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"
  }

Was habe ich falsch gemacht? Schätzen Sie jemanden aus MDG erklären kann, der Fehler, weil ich glaube, es hat etwas mit Meteor-system. FYI, ich benutze npm start um die Seite auszuführen

UPDATE

Basierend auf den Vorschlag von @auch, ich bewege Teil von meinem setup zu 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'
        }]
    }
};

welcher ich das setup von hier. Und meine 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'] })" ]
}

aber ich habe noch Treffer ein weiterer Fehler

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

fs ist ein NodeJS-Modul verwendet, um auf das Dateisystem zuzugreifen. Sind Sie versuchen, führen Sie diese aus einem browser ?
Nein. es ist nicht so. Wenn ich beende das webpack dann diese Fehler angezeigt werden im browser
Webpack-setup nicht erklären, wo und warum der fs.readFileSync genannt wird. Wenn es heißt von der client-code, das ist ein Fehler. Ich würde vorschlagen, um debug-readFileSync Anrufe und gehen von call-stack.
wenn ich entfernen Sie die fs dann bei meinem build habe, habe ich diese ERROR in ./~/mapbox-gl-shaders/index.js Module not found: Error: Cannot resolve module 'fs' in /node_modules/mapbox-gl-shaders @ ./~/mapbox-gl-shaders/index.js 1:9-22

InformationsquelleAutor Muhaimin | 2016-06-03

Folgende webpack.config.js für mich funktioniert. Es umfasst @auch eine gute Idee für das 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'
      }
    ]
  },
};

Ich habe eine Beispiel, dass ich auf dem neuesten Stand.

welche version von mapboxgl
Ich bin mit 0.18.0 in meinem Projekt, und das Beispiel ist 0.20.0. Beide arbeiten ohne Fehler.
Ich traf diese Warnung ./~/mapbox-gl/dist/mapbox-gl.js Critical dependencies: 1:481-488 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/mapbox-gl/dist/mapbox-gl.js 1:481-488
Wenn Sie die Quell-Datei anstelle der vordefinierten js Sie am Ende mit dem berühmten "can' T read property 'call', der "undefined" Fehler. Es wird kompilieren in Ordnung, aber sehen Sie es im browser. Ich habe mich entschieden, ich kann Leben mit der Warnung. 🙂

InformationsquelleAutor mikewilliamson

1

Bist du mit strings für die test und include loader-Optionen, die nicht entsprechen. Diese sind nicht in regulären Ausdrücken, so Dinge wie js$ nie mit–das würde bedeuten, dass eine wörtliche $ im Dateinamen. Wenn die Bedingung ein string ist, wird es ein Vergleich mit dem vollständigen Pfad, so ./node_modules/mapbox-gl/js/render/painter/use_program.js würde nicht übereinstimmen, entweder.

Da der loader die Bedingungen nicht erfüllt, wird der loader nicht läuft und die fs.readFileSync Anruf nicht inlined durch die brfs verwandeln.

Um dies zu beheben, es sieht aus wie die Reaktive Stack Webpack plugin liest eine webpack.conf.js - Datei, wo man tatsächliche Nutzung von regulären Ausdrücken und der match alle .js Dateien oder die Dateien, die Notwendigkeit der Transformation.

Beispielsweise in webpack.conf.js (Hinweis: diese Datei ist spezifisch für diese Meteor Webpack-plugin):
```
module.exports = {
  module: {
    loaders: [
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  }
};
```
Diese passen auf alle .js Dateien mit mapbox-gl im Weg.

Denke ich, werden Sie wollen, aktualisieren Sie alle Ihre module.loaders reguläre Ausdrücke verwenden. Wenn Sie brauchen, um zu überprüfen, ob ein loader ist-Abgleich, einen schnellen hack ist das ändern der loader etwas falsch:
```
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'XXXtransform/cacheable?brfs'
      }
```
Wenn es passt, Webpack, wird eine Ausnahme ausgelöst, wenn Sie nicht finden können, den loader. Auf der anderen Seite, wenn Sie nicht sehen eine Ausnahme, Sie wissen, haben Sie ein problem mit Ihrer Konfiguration.
- danke für die Antwort. Jetzt Schiebe ich alle meine config zu webpack.conf.js. Siehe meine aktualisierte Frage oben
InformationsquelleAutor also
0

Dieser Teil ist redundant:
```
"node": {
  "fs": "empty"
}
```
Nicht sicher, ob es das problem verursacht, aber Sie brauchen es nicht.
- du hast Recht. aber es funktioniert nicht
InformationsquelleAutor Yuval Adam
0

Hatte ich ein ähnliches Problem. Versuchen Sie dies:

Identifizieren, welches Modul ist das werfen des fs.readFileSync Fehler. Für mich war es mime ist eine Abhängigkeit von url-loader.

Ersetzte ich es mit file-loader die hängt nicht von mime, und damit auch nicht die fs. Stellen Sie sicher, um deinstallieren url-loader da es immer noch werfen den Fehler!

Dann aktualisieren Sie Ihre webpack.conf mit:

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

Hoffe, das hilft!

InformationsquelleAutor Linx8

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.