meteor - mapboxgl - react-< mapbox>- gl

Unkeught TypeError: fs.readFileSync no es una función

Question

Estoy intentando hacer que el paquete web y mapbox-gl trabajen juntos dentro del sistema Meteor. He buscado en todas partes el error mencionado anteriormente, pero ninguno funciona. Aquí está mi configuración de 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"
    }
  }
}

Para su información, utilizo el paquete web provisto por Reactive Stack y la forma en que configura el paquete web ligeramente diferente.

y aquí está mi package.json para la configuración de 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"
  }

¿Qué he hecho mal? Aprecie a alguien de MDG que pueda explicar el error porque creo que tiene algo que ver con el sistema Meteor. FYI, uso npm start para ejecutar la página

ACTUALIZAR

Según la sugerencia de @also, traslado parte de mi configuración a 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''
        }]
    }
};

que obtengo la configuración desde aquí . Y mi 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''] })" ]
}

pero todavía golpeo otro error

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

Esta parte es redundante:

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

No estoy seguro de si está causando el problema, pero no lo necesita.

Answer 2

Está utilizando cadenas para la test e include opciones de carga que no coincidirán. Estos no se convierten en expresiones regulares , por lo que cosas como js$ nunca coincidirán, lo que significaría un $ literal en el nombre del archivo. Cuando la condición es una cadena, se comparará con la ruta completa , por lo que ./node_modules/mapbox-gl/js/render/painter/use_program.js tampoco coincidirá.

Dado que las condiciones del cargador no se están cumpliendo, el cargador no se está ejecutando y la llamada a la llamada fs.readFileSync no está siendo inlineada por la transformación de brfs .

Para solucionarlo , parece que el complemento Reactive Stack Webpack leerá un archivo webpack.conf.js , donde podría usar expresiones regulares reales y .js todos los archivos .js o los archivos particulares que necesitan la transformación.

Por ejemplo, en webpack.conf.js (tenga en cuenta que este archivo es específico de este plugin Meteor Webpack):

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

Esto hará coincidir todos los archivos .js con mapbox-gl en la ruta.

Creo que querrás actualizar todos tus module.loaders para usar expresiones regulares. Si necesita comprobar si un cargador está haciendo juego, un truco rápido es cambiar el loader a algo falso:

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

Si coincide, Webpack generará una excepción cuando no encuentre el cargador. Por otro lado, si no ve una excepción, sabe que tiene un problema con su configuración.

Answer 3

Tuve un problema similar. Prueba esto:

Identifique qué módulo arroja el error fs.readFileSync . Para mí fue mime que es una dependencia de url-loader .

Lo reemplacé con file-loader que no depende de mime , y por lo tanto no de fs . ¡Asegúrate de desinstalar url-loader ya que aún arrojará el error!

Luego actualiza tu webpack.conf con:

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

¡Espero que ayude!

Answer 4

El siguiente webpack.config.js está trabajando para mí. Incorpora @ también es una buena idea para el emparejador de 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''
      }
    ]
  },
};

Tengo un ejemplo de trabajo que he estado manteniendo al día.