パワービジュアルビジュアルビジュアル - $がjqueryプラグインをロードしようとしたときに機能しない

Question

何かが発生する可能性があります$ is not a function Pbivizを使用してカスタムPower Bi Visualsを開発するとエラーが発生しますか？

jqueryプラグインを指定するときに問題が発生します。ライブラリの順序が間違っているように見えますが、出力ファイルには正しいものがあります。

tsconfig.json：

{ 
    "compilerOptions": { 
    "allowJs": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "ES5", 
    "sourceMap": true, 
    "out": "./.tmp/build/visual.js" 
    }, 
    "files": [ 
    ".api/v1.7.0/PowerBI-visuals.d.ts", 
    "src/settings.ts", 
    "src/visual.ts", 
    "node_modules/@types/jquery/index.d.ts", 
    "node_modules/@types/datatables.net/index.d.ts", 
    "node_modules/@types/lodash/index.d.ts", 
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts" 
    ] 
} 

pbiviz.json：

"externalJS": [ 
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js", 
    "node_modules/jquery/dist/jquery.js", 
    "node_modules/datatables.net/js/jquery.dataTables.js", 
    "node_modules/lodash/lodash.min.js" 
    ], 

package.json：

"dependencies": { 
    "@types/datatables.net": "^1.10.1", 
    "@types/jquery": "^2.0.48", 
    "@types/lodash": "^4.14.50", 
    "datatables.net": "^1.10.15", 
    "jquery": "^2.1.0", 
    "lodash": "^4.17.4", 
    "powerbi-visuals-utils-dataviewutils": "1.2.0" 
    }, 

エラー：

Uncaught TypeError: $ is not a function 
    at <anonymous>:14820:21 
    at <anonymous>:10387:3 
    at Window.<anonymous> (<anonymous>:10390:1) 
    at <anonymous>:25969:20 
    at Object.r [as injectJsCode] (visualhostcore.min.js:2) 
    at i.loadWithoutResourcePackage (visualsandbox.min.js:1) 
    at i.executeMessage (visualsandbox.min.js:1) 
    at i.onMessageReceived (visualsandbox.min.js:1) 
    at visualsandbox.min.js:1 
    at e.invokeHandler (visualhostcore.min.js:2) 

Answer 1

問題はサンドボックスにあり、すべてのカスタムビジュアルはサンドボックス内で動作します。ここで、ウィンドウオブジェクトは偽のウィンドウオブジェクトです。

は、次のコードでJSファイルを作成します：

var jQuery = typeof jQuery !== 'undefined' 
    ? jQuery 
    : window['$']; 

をしてpbiviz.jsonのexternalJSセクションにこのファイルを含める

は次のように試してみてください。 しかし、 "node_modules/jqueryの/ DIST/jquery.js" の間で行を入れ と "node_modules/datatables.net/JS/jquery.dataTables.js"、 （そう、jqueryの後、しかし、jQueryのプラグインの前に）

サンプル： https://github.com/Microsoft/powerbi-visuals-heatmap/blob/master/pbiviz.json#L24