잡히지 않은 타입 오류 : fs.readFileSync가 함수가 아닙니다.

Question

webpack과 mapbox-gl을 Meteor 시스템 내에서 함께 사용하려고합니다. 나는 위에서 언급 한 오류에 대해 사방을 보았지만 아무도 작동하지 않습니다. 여기 내 웹팩 설정하여 정보

{ 
    "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" 
    } 
    } 
} 

이다, 나는 웹팩 Reactive Stack 제공하고 사용하는 방법이 설정 웹팩 약간 다릅니다.

여기 내 package.json 고궁 박물원 설정

"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에서 오류를 설명 할 수 있습니다. 유성 시스템과 관련이 있다고 생각하기 때문입니다. 참고로, 내가 @also에서 제안을 바탕으로 페이지

에게 UPDATE

을 실행하는 데 npm start을 사용하여, 나는 here에서 설정을 얻을 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 

Answer 1

다음 webpack.config.js가 저에게 효과적입니다. 나는 최신 상태로 유지되어왔다 working example이

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' 
     } 
    ] 
    }, 
}; 

: 또한 BRFS의 정규 좋은 생각입니다 @이 통합되어 있습니다.

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 변환에 의해 인라인되지 않습니다.

이를 해결하려면, 당신이 실제 정규 표현식을 사용하여 모든 .js 파일이나 변환을 필요로하는 특정 파일과 일치 할 수있는 반응성 스택 웹팩 플러그인 것이다 read a webpack.conf.js file처럼 보인다. 예를 들어

, webpack.conf.js에서 (이 파일이 유성 웹팩 플러그인에 특정주의) :

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

이 경로에 mapbox-gl 모든 .js 파일을 일치합니다.

모든 module.loaders을 정규식을 사용하도록 업데이트하려고한다고 생각합니다.로더가 일치하는 경우 당신이 확인해야하는 경우, 빠른 해킹 가짜 뭔가에 loader을 변경하는 것입니다 :

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

가 일치하는 경우는 로더를 찾을 수 없을 때, 웹팩이 예외가 발생합니다. 반면에 이 아닌 경우 예외가 발생하면 구성에 문제가 있음을 알 수 있습니다.

Answer 4

비슷한 문제가있었습니다. 이것을 시도하십시오 :

fs.readFileSync 오류를 던지는 모듈을 식별하십시오. 나를 위해 그것이 url-loader의 종속성 인 mime이었습니다.

나는이를 으로 바꿨는데 이는 mime에 의존하지 않으므로 fs이 아닙니다. 아직 오류가 발생하므로 url-loader을 제거하십시오!

는 그런 다음이 webpack.conf로 업데이트 :

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

희망하는 데 도움이!