2016-08-23 194 views
-1

更新:我仍然得到了同樣的問題如下,但是現在下面的錯誤是由JSDom發佈到控制檯:HERE地圖API

Error: Uncaught [SyntaxError: ] 
    at reportException (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:58:24) 
    at processJavaScript (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:130:7) 
    at HTMLScriptElementImpl._eval (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7) 
    at e (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:30:22) 
    at Object.check (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:97:11) 
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:116:12 
    at wrappedEnqueued (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:234:16) 
    at Request.request [as _callback] (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:184:9) 
    at Request.self.callback (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:187:22) 
    at emitTwo (events.js:106:13) 
    at Request.emit (events.js:191:7) 
    at Request.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:1044:10) 
    at emitOne (events.js:96:13) 
    at Request.emit (events.js:188:7) 
    at Gunzip.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:965:12) 
    at emitNone (events.js:91:20) 
    at Gunzip.emit (events.js:185:7) 
    at endReadableNT (_stream_readable.js:934:12) 
    at _combinedTickCallback (internal/process/next_tick.js:74:11) 
    at process._tickCallback (internal/process/next_tick.js:98:9) SyntaxError 
    at XMLHttpRequest.open (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:451:15) 
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:51:86 
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:51:383 
    at http://js.api.here.com/v3/3.0/mapsjs-core.js:290:26 
    at Object.exports.runInContext (vm.js:44:17) 
    at processJavaScript (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:128:10) 
    at HTMLScriptElementImpl._eval (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7) 
    at e (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:30:22) 
    at Object.check (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:97:11) 
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:116:12 
    at wrappedEnqueued (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:234:16) 
    at Request.request [as _callback] (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:184:9) 
    at Request.self.callback (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:187:22) 
    at emitTwo (events.js:106:13) 
    at Request.emit (events.js:191:7) 
    at Request.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:1044:10) 
    at emitOne (events.js:96:13) 
    at Request.emit (events.js:188:7) 
    at Gunzip.<anonymous> (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/request/request.js:965:12) 
    at emitNone (events.js:91:20) 
    at Gunzip.emit (events.js:185:7) 
    at endReadableNT (_stream_readable.js:934:12) 
    at _combinedTickCallback (internal/process/next_tick.js:74:11) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

我m試圖讓HERE Maps JavaScript API在使用Mocha編寫的測試中正常工作。

it("should generate a map when the component gets rendered", function generateMapTest(done) { 
    this.timeout(0); 
    const scriptMap = getScriptMap(); 
    const scriptNames = Object.keys(scriptMap); 
    const finalScriptToLoad = last(scriptNames); 

    getScript(finalScriptToLoad).onLoad((err: any, res?: any) => { 
     global.H = window.H; 

     const platform = new H.service.Platform({ 
      app_id: 'app_id', 
      app_code: 'app_code', 
     }); 

     console.log(window.H); 
     done(err); 
    }); 
}); 

要解釋上述情況 - scriptMap變量用於存儲包含要加載的每個HERE Maps腳本的URL的對象。每個腳本通過使用JavaScript將標籤附加到DOM(使用jsdom)來按順序加載。當每個腳本加載時,將調用回調數組中的每個回調,並傳遞通常的錯誤和響應對象。使用下面顯示的onLoad方法將回調添加到此數組。

當最終腳本從HERE服務器完成加載後,我將H對象附加到Mocha中的全局變量並嘗試創建平臺服務。這將導致以下錯誤:

Unhandled rejection TypeError: Cannot read property 'mapsjs-core' of undefined 
    at Hi (http://js.api.here.com/v3/3.0/mapsjs-core.js:287:626) 
    at Ji (http://js.api.here.com/v3/3.0/mapsjs-core.js:288:350) 
    at V.Es (eval at <anonymous> (http://js.api.here.com/v3/3.0/mapsjs-core.js:47:404), <anonymous>:13:188) 
    at new V (eval at <anonymous> (http://js.api.here.com/v3/3.0/mapsjs-core.js:47:404), <anonymous>:12:257) 
    at Object.getPlatform (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/get-platform.js:9:16) 
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/HEREMap.js:34:50 
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/cache.js:52:104 
    at arrayEach (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/lodash/lodash.js:522:11) 
    at Function.forEach (/Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/node_modules/lodash/lodash.js:9011:14) 
    at /Users/joshua/Dropbox/Projects/Web Development/NPM Modules/react-here-maps/src/utils/cache.js:52:30 

我奮力調試提供的代碼的精縮版,所以如果我能有一些幫助追查這個bug的來源我將不勝感激。可能值得說明的是,所有這些都是在構建HERE Maps React組件的環境中,源代碼可以在這裏找到:https://github.com/josh-es/react-here-maps

〜^〜

回答

0

我設法將問題隔離到JSDom實現了XMLHttpRequest API的。用'xmlhttprequest'npm包替換它解決了這個問題。通過運行安裝:

npm install --save-dev xmlhttprequest 

,然後修復上述問題:

import { XMLHttpRequest } from "xmlhttprequest"; 

global.window.XMLHttpRequest = XMLHttpRequest;