microsoft / powerbi-visuals-webpack-plugin Goto Github PK

    ERROR in C:\Dev\VSCode\Power BI\circleCard\node_modules\@types\node\assert.d.ts
        [tsl] ERROR in C:\Dev\VSCode\Power BI\circleCard\node_modules\@types\node\assert.d.ts(733,60)
      	TS1005: ';' expected.

 npx webpack --mode production
 info   Start preparing plugin template
 info   Finish preparing plugin template
Webpack Bundle Analyzer saved report to /Users/xxx/dev/powerbiaddin_new/ble/webpack.statistics.html
assets by status 733 bytes [cached] 1 asset
./.tmp/precompile/visualPlugin.ts 1.37 KiB [built] [code generated] [1 error]

ERROR in ./.tmp/precompile/visualPlugin.ts 3:21
Module parse failed: Unexpected token (3:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { Visual } from "../../src/visual";
| import powerbiVisualsApi from "powerbi-visuals-api";
> import IVisualPlugin = powerbiVisualsApi.visuals.plugins.IVisualPlugin;
| import VisualConstructorOptions = powerbiVisualsApi.extensibility.visual.VisualConstructorOptions;
| import DialogConstructorOptions = powerbiVisualsApi.extensibility.visual.DialogConstructorOptions;

webpack 5.57.0 compiled with 1 error in 203 ms

1. install latest powerbi-visuals-tools
2. create new project with pbiviz
pbiviz new ble
cd ble
3. Follow "How to build a visual with webpack" steps https://github.com/microsoft/powerbi-visuals-webpack-plugin/blob/master/README.md#how-to-build-a-visual-with-webpack

npm i webpack webpack-cli powerbi-visuals-webpack-plugin mini-css-extract-plugin webpack-bundle-analyzer extra-watch-webpack-plugin ts-loader less-loader less babel-loader json-loader base64-inline-loader @babel/preset-env @babel/core css-loader webpack-dev-server --save-dev

npm i  @babel/runtime @babel/runtime-corejs3 core-js --save

npm i powerbi-visuals-api --save

4. Build with webpack
npx webpack --mode production

        // visual plugin regenerates with the visual source, but it does not require relaunching dev server
        new webpack.WatchIgnorePlugin({paths:[
            './.tmp/precompile/visualPlugin.ts',
            "./.tmp/**/*.*"
        ]}),

const path = require('path');
const fs = require("fs");

// werbpack plugin
const webpack = require("webpack");
const PowerBICustomVisualsWebpackPlugin = require('powerbi-visuals-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Visualizer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');

// api configuration
const powerbiApi = require("powerbi-visuals-api");

// visual configuration json path
const pbivizPath = "./pbiviz.json";
const pbivizFile = require(path.join(__dirname, pbivizPath));

// the visual capabilities content
const capabilitiesPath = "./capabilities.json";
const capabilitiesFile = require(path.join(__dirname, capabilitiesPath));

const visualSourceLocation = path.join(__dirname, "src", "visual").split('\\').join('\\\\')
// const visualSourceLocation = "../../src/visual"

// string resources
const resourcesFolder = path.join(".", "stringResources");
const pluginLocation = './.tmp/precompile/visualPlugin.ts'; // path to visual plugin file, the file generates by the plugin
const localizationFolders = fs.existsSync(resourcesFolder) && fs.readdirSync(resourcesFolder);
const certPath = path.join(__dirname, "node_modules", "powerbi-visuals-tools", "certs", "PowerBICustomVisualTest_public.pfx");

// babel options to support IE11
let babelOptions = {
  "presets": [
    [
      require.resolve('@babel/preset-env'),
      {
        "targets": {
          "ie": "11"
        },
        useBuiltIns: "entry",
        corejs: 3,
        modules: false
      }
    ]
  ],
  sourceType: "unambiguous", // tell to babel that the project can contains different module types, not only es2015 modules
  cacheDirectory: path.join(".tmp", "babelCache") // path for chace files
};

module.exports = {
  configureWebpack: {
    entry: {
      'visual.js': pluginLocation,
    },
    devtool: 'source-map',
    mode: "development",
    module: {
      rules: [
        {
          parser: {
            amd: false
          }
        },
        {
          test: /\.tsx$/,
          include: /powerbi-visuals-|src|precompile\\visualPlugin.ts/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: babelOptions
            },
            {
              loader: require.resolve('ts-loader'),
              options: {
                transpileOnly: false,
                experimentalWatchApi: false,
                // appendTsSuffixTo: [/\.vue$/],
                // happyPackMode: true
              }
            }
          ]
        },
        {
          test: /\.ts$/,
          include: /powerbi-visuals-|src|precompile\\visualPlugin.ts/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: babelOptions
            },
            {
              loader: require.resolve('ts-loader'),
              options: {
                transpileOnly: false,
                experimentalWatchApi: false,
                // appendTsSuffixTo: [/\.vue$/],
                // happyPackMode: true
              }
            }
          ]
        }
      ]
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.jsx', '.js', '.css']
    },
    output: {
      filename: "[name]",
    },
    devServer: {
      disableHostCheck: true,
      contentBase: path.join(__dirname, ".tmp", "drop"), // path with assets for dev server, they are generated by webpack plugin
      publicPath: "/assets/",
      compress: true,
      port: 8080, // dev server port
      hot: false,
      inline: false,
      // cert files for dev server
      https: {
        // keep it commented to use webpack generated certificate
        // key: path.join(__dirname, "certs","PowerBICustomVisualTest_public.key"), // for darwin, linux
        // cert: path.join(__dirname, "certs", "PowerBICustomVisualTest_public.cer"), // for darwin, linux
        pfx: fs.readFileSync(certPath), // for windows
        passphrase: "22943715361889305"
      },
      headers: {
        "access-control-allow-origin": "*",
        "cache-control": "public, max-age=0"
      },
    },
    externals: {
      "powerbi-visuals-api": "null",
      "fakeDefine": "false",
      "corePowerbiObject": "Function('return this.powerbi')()",
      "realWindow": "Function('return this')()"
    },
    plugins: [
      // new MiniCssExtractPlugin({
      //   filename: "visual.css",
      //   chunkFilename: "[id].css"
      // }),
      // visual plugin regenerates with the visual source, but it does not require relaunching dev server
      new webpack.WatchIgnorePlugin([
        path.join(__dirname, pluginLocation),
        "./.tmp/**/*.*"
      ]),
      // custom visuals plugin instance with options
      new PowerBICustomVisualsWebpackPlugin({
        ...pbivizFile,
        capabilities: capabilitiesFile,
        stringResources: localizationFolders && localizationFolders.map(localization => path.join(
          resourcesFolder,
          localization,
          "resources.resjson"
        )),
        apiVersion: powerbiApi.version,
        capabilitiesSchema: powerbiApi.schemas.capabilities,
        pbivizSchema: powerbiApi.schemas.pbiviz,
        stringResourcesSchema: powerbiApi.schemas.stringResources,
        dependenciesSchema: powerbiApi.schemas.dependencies,
        devMode: false,
        generatePbiviz: true,
        generateResources: true,
        modules: true,
        visualSourceLocation: visualSourceLocation,
        pluginLocation: pluginLocation,
        packageOutPath: path.join(__dirname, "dist")
      }),
      new ExtraWatchWebpackPlugin({
        files: [
          pbivizPath,
          capabilitiesPath
        ]
      }),
      new webpack.ProvidePlugin({
        window: 'realWindow',
        define: 'fakeDefine',
        powerbi: 'corePowerbiObject'
      })
    ]
  },
  outputDir: path.join(__dirname, "/.tmp", "drop")
};

  Error: Child compilation failed:
  Module not found: Error: Can't resolve 'fakeDefine' in '.....\node_modules\lodash':
  Error: Can't resolve 'fakeDefine' in '.....\node_modules\lodash'
  Module not found: Error: Can't resolve 'realWindow' in '.....\node_modules\webpack\buildin':
  Error: Can't resolve 'realWindow' in .....\node_modules\webpack\buildin'

error  in .../visualPlugin.ts

[tsl] ERROR in .../visualPlugin.ts(3,22)
      TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'.

error  in .../visualPlugin.ts

[tsl] ERROR in .../visualPlugin.ts(11,14)
      TS7006: Parameter 'options' implicitly has an 'any' type.

ERROR in path_to_project\.tmp\precompile\visualPlugin.ts
./.tmp/precompile/visualPlugin.ts
[tsl] ERROR in path_to_project\.tmp\precompile\visualPlugin.ts(13,5)
      TS2322: Type '(options: VisualConstructorOptions) => Visual' is not assignable to type '(options?: VisualConstructorOptions | undefined) => IVisual'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'VisualConstructorOptions | undefined' is not assignable to type 'VisualConstructorOptions'.
      Type 'undefined' is not assignable to type 'VisualConstructorOptions'.
i ｢wdm｣: Failed to compile.

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "strict": true,
    "allowJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "outDir": "./.tmp/build/",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2015",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "./src/visual.ts"
  ]
}

let img = new Image(); 
img.src=earth 

GET https://localhost:8080/assets/status net::ERR_CERT_AUTHORITY_INVALID

devServer: {
        allowedHosts: 'all',
        static: path.join(__dirname, '.tmp', 'drop'), // path with assets for dev server, they are generated by webpack plugin
        compress: true,
        port: 8080, // dev server port
        hot: false,
        // cert files for dev server
        https: {
            pfx: fs.readFileSync(path.join(__dirname, 'node_modules/powerbi-visuals-tools/certs/PowerBICustomVisualTest_public.pfx')), // for windows
            passphrase: '30815153129428663',
        },
        headers: {
            'access-control-allow-origin': '*',
            'cache-control': 'public, max-age=0',
        },
    },

PS C:\Dev\VSCode\Power BI\circleCard> npm run cert

> cert
> pbiviz --install-cert

 info   powerbi-visuals-tools version - 4.0.5
 info   Use '30815153129428663' passphrase to install PFX certificate.
 info   Certificate path: C:\Dev\VSCode\Power BI\circleCard\node_modules\powerbi-visuals-tools\certs\PowerBICustomVisualTest_public.pfx

const path = require("path");
const fs = require("fs");

// werbpack plugin
const webpack = require("webpack");

console.log(require.resolve("powerbi-visuals-webpack-plugin"));
const PowerBICustomVisualsWebpackPlugin = require("powerbi-visuals-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Visualizer = require("webpack-visualizer-plugin");
const ExtraWatchWebpackPlugin = require("extra-watch-webpack-plugin");

// api configuration
const powerbiApi = require("powerbi-visuals-api");

// visual configuration json path
const pbivizPath = "./pbiviz.json";
const pbivizFile = require(path.join(__dirname, pbivizPath));

// the visual capabilities content
const capabilitiesPath = "./capabilities.json";
const capabilitiesFile = require(path.join(__dirname, capabilitiesPath));

const pluginLocation = "./.tmp/precompile/visualPlugin.ts"; // path to visual plugin file, the file generates by the plugin

// string resources
// Disable resources for now.
// const resourcesFolder = path.join(".", "stringResources");
// const localizationFolders = fs.readdirSync(resourcesFolder);
const localizationFolders = [];
const resourcesFolder = ".";

// babel options to support IE11
const babelOptions = {
    presets: [
        [
            require.resolve("@babel/preset-env"),
            {
                targets: {
                    ie: "11",
                },
                useBuiltIns: "entry",
                modules: false,
                corejs: "3",
            },
        ],
    ],
    sourceType: "unambiguous", // tell to babel that the project can contains different module types, not only es2015 modules
    cacheDirectory: path.join(".tmp", "babelCache"), // path for chace files
};

module.exports = {
    entry: {
        "visual.js": pluginLocation,
    },
    target: "web",
    node: {
        fs: "empty",
    },
    optimization: {
        concatenateModules: false,
        // minimize: true, // enable minimization for create *.pbiviz file less than 2 Mb, can be disabled for dev mode
    },
    devtool: "source-map",
    mode: "development",
    module: {
        rules: [
            {
                parser: {
                    amd: false,
                },
            },
            {
                test: /(\.ts)x|\.ts$/,
                include: /powerbi-visuals-|src|precompile\\visualPlugin.ts/,
                use: [
                    {
                        loader: require.resolve("babel-loader"),
                        options: babelOptions,
                    },
                    {
                        loader: require.resolve("ts-loader"),
                        options: {
                            transpileOnly: false,
                            experimentalWatchApi: false,
                        },
                    },
                ],
            },
            {
                test: /(\.js)x|\.js$/,
                use: [
                    {
                        loader: require.resolve("babel-loader"),
                        options: babelOptions,
                    },
                ],
            },
            {
                test: /\.json$/,
                loader: require.resolve("json-loader"),
                type: "javascript/auto",
            },
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: require.resolve("css-loader"),
                    },
                    {
                        loader: require.resolve("less-loader"),
                        options: {
                            paths: [path.resolve(__dirname, "..", "node_modules")],
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: require.resolve("css-loader"),
                    },
                ],
            },
            {
                test: /\.(woff|ttf|ico|woff2|jpg|jpeg|png|webp)$/i,
                use: [
                    {
                        loader: "base64-inline-loader",
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: [".wasm", ".tsx", ".ts", ".jsx", ".js", ".css", ".3dm"],
    },
    output: {
        path: path.join(__dirname, "/.tmp", "drop"),
        publicPath: "/assets/",
        filename: "[name]",
    },
    devServer: {
        disableHostCheck: true,
        contentBase: path.join(__dirname, ".tmp", "drop"), // path with assets for dev server, they are generated by webpack plugin
        compress: true,
        port: 8080, // dev server port
        hot: false,
        inline: false,
        // cert files for dev server
        https: {
            // key: path.join(__dirname, "certs","PowerBICustomVisualTest_public.key"), // for darwin, linux
            // cert: path.join(__dirname, "certs", "PowerBICustomVisualTest_public.cer"), // for darwin, linux
            pfx: fs.readFileSync(path.join(__dirname, "node_modules/powerbi-visuals-tools/certs/PowerBICustomVisualTest_public.pfx")), // for windows
            passphrase: "##########",
        },
        headers: {
            "access-control-allow-origin": "*",
            "cache-control": "public, max-age=0",
        },
    },
    externals: {
        "powerbi-visuals-api": "null",
        fakeDefine: "false",
        corePowerbiObject: "Function('return this.powerbi')()",
        realWindow: "Function('return this')()",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "visual.css",
            chunkFilename: "[id].css",
        }),
        new Visualizer({
            filename: "webpack.statistics.dev.html",
        }),
        // visual plugin regenerates with the visual source, but it does not require relaunching dev server
        new webpack.WatchIgnorePlugin([
            path.join(__dirname, pluginLocation),
            "./.tmp/**/*.*",
        ]),
        // custom visuals plugin instance with options
        new PowerBICustomVisualsWebpackPlugin({
            ...pbivizFile,
            capabilities: capabilitiesFile,
            stringResources: localizationFolders.map((localization) => path.join(
                resourcesFolder,
                localization,
                "resources.resjson",
            )),
            apiVersion: powerbiApi.version,
            capabilitiesSchema: powerbiApi.schemas.capabilities,
            pbivizSchema: powerbiApi.schemas.pbiviz,
            stringResourcesSchema: powerbiApi.schemas.stringResources,
            dependenciesSchema: powerbiApi.schemas.dependencies,
            devMode: true,
            generatePbiviz: false,
            generateResources: true,
            modules: true,
            visualSourceLocation: "../../src/visual",
            pluginLocation,
            packageOutPath: path.join(__dirname, "dist"),
        }),
        new ExtraWatchWebpackPlugin({
            files: [
                pbivizPath,
                capabilitiesPath,
            ],
            dirs: [
                "assets",
            ],
        }),
        new webpack.ProvidePlugin({
            window: "realWindow",
            define: "fakeDefine",
            powerbi: "corePowerbiObject",
        }),
    ],
};

[webpack-cli] Failed to load '/Users/ling/Documents/Development/dit/powerbi/[PROJECT NAME]/webpack.config.js' config
[webpack-cli] Invalid options object. Watch Ignore Plugin has been initialized using an options object that does not match the API schema.
 - options[0] should be an object:
   object { paths }
 - options[1] should be an object:
   object { paths }

    "webpack": "^5.58.2",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1".
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "babel-loader": "^8.2.2",

var powerbi;
!function (e) {
	var t;
	!function (t) {
		var n;
		!function (t) {
			t.myVisual530397A454264B59BCC98231C7453345= {
				name: "myVisual530397A454264B59BCC98231C7453345",
				displayName: "myVisual for Power BI",
				"class": "Visual",
				version: "1.0.0",
				apiVersion: "1.13.0",
				create: function (t) {
					return new e.extensibility.visual.myVisual530397A454264B59BCC98231C7453345.Visual(t)
				},
				custom: !0
			}
		}(n = t.plugins || (t.plugins = {}))
	}(t = e.visuals || (e.visuals = {}))
}(powerbi || (powerbi = {}));

 info   Start packaging...
(node:12952) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.modules was changed from Array to Set (using Array method 'reduce' is deprecated)
(node:12952) [DEP_WEBPACK_MODULE_ERRORS] DeprecationWarning: Module.errors was removed (use getErrors instead)
(node:12952) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
 info   Package compression enabled
node:internal/errors:490
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at writeFile (node:fs:2168:5)
    at go$writeFile (C:\{folder}\node_modules\graceful-fs\graceful-fs.js:138:14)
    at Object.writeFile (C:\{folder}\node_modules\graceful-fs\graceful-fs.js:135:12)
    at C:\{folder}\node_modules\powerbi-visuals-webpack-plugin\node_modules\fs-extra\lib\output\index.js:18:27
    at C:\L{folder}\node_modules\powerbi-visuals-webpack-plugin\node_modules\universalify\index.js:21:54 {
  code: 'ERR_INVALID_ARG_TYPE'
}


Node.js v18.14.0

 new webpack.WatchIgnorePlugin(           
  {paths: [
      path.join(__dirname, pluginLocation),
      "./.tmp/**/*.*"
  ]}
),

module.exports = {
    optimization: {
        runtimeChunk: true
    }
}

Uncaught ReferenceError: require is not defined 
    at <anonymous>:2:409819
    at <anonymous>:2:409958
    at Object.injectJsCode (cvSandboxPack.html?locale=de-DE:193:84605)
    at f (cvSandboxPack.html?locale=de-DE:194:6100)
    at m.loadWithoutResourcePackage (cvSandboxPack.html?locale=de-DE:194:13412)
    at m.executeMessage (cvSandboxPack.html?locale=de-DE:194:15640)
    at m.onMessageReceived (cvSandboxPack.html?locale=de-DE:194:15343)
    at cvSandboxPack.html?locale=de-DE:194:24924
    at n.invokeHandler (cvSandboxPack.html?locale=de-DE:193:105656)
    at n.dispatchMessage (cvSandboxPack.html?locale=de-DE:193:105511)