topic Re: Problem creation custom visual mapbox in Developer

Problem creation custom visual mapbox

Anonymous — Thu, 26 Aug 2021 12:00:37 GMT

Hi,

I try to create a new visual (it's my first without tuto) where i put a map mapbox in the problem is when I run with pbiviz start I have this :

with this error in the console

Uncaught ReferenceError: _typeof is not defined at Lr (blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1) at blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1 at new ui (blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1) at new wi (blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1) at blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1 at blob:null/b0cda90a-5d8c-4998-954b-032d7ebd42c7:1

I search and i find it's probably a problem that come from node_modules being transpiled by webpack, so I try to create a webpack.config.js for exclude it to being transpiled, but I find that pbiviz don't take the webpack.config.js so I try to run it with webpack-dev-server and it works I have no more error... But i have absolutely nothing more... My visual is totaly white without nothing inside but i have my custom field on the right, here is my webpack config :

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

// werbpack plugin
var 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
const resourcesFolder = path.join(".", "stringResources");
const localizationFolders = fs.readdirSync(resourcesFolder);
 
// babel options to support IE11
let babelOptions = {
    "presets": [
        [
            require.resolve('@babel/preset-env'),
            {
                "targets": {
                    "ie": "11"
                },
                useBuiltIns: "entry",
                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 = {
    entry: './src/visual.ts',
    output: {
        path: path.join(__dirname, "/.tmp","drop", "assets"),
        publicPath: 'assets',
        filename: "visual.js",
    },
    mode: "development",
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' },
            {
                test: /\.js$/, use: {
                    loader: 'babel-loader',
                    options: {
                        ignore: ['./node_modules/mapbox-gl/dist/mapbox-gl.js']
                    }
                }
            },
            { test: /\.css$/, use: 'css-loader' },
            { test: /\.less$/, use: [
                {
                    loader: 'css-loader',
                },
                {
                    loader: 'less-loader',
                },
            ] }
        ]
    },
    devServer: {
        // disableHostCheck: true,
        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,
        // inline: 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: "24770761934569774"
        },
        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({paths:[
            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: false,
            generatePbiviz: true,
            generateResources: true,
            modules: true,
            visualSourceLocation: './src/visual', // "../../src/visual",
            pluginLocation: pluginLocation,
            packageOutPath: path.join(__dirname, "dist")
        }),
        new ExtraWatchWebpackPlugin({
            files: [
                pbivizPath,
                capabilitiesPath
            ]
        }),
        new webpack.ProvidePlugin({
            window: 'realWindow',
            define: 'fakeDefine',
            powerbi: 'corePowerbiObject'
        }),
    ]
};

I put a console.log at the start of my constructor for seing if the problem come from here but it print nothing in the console... I think the problem come from the webpack but i'm not sure... Please someone can help me ? Thanks in advance !

Re: Problem creation custom visual mapbox

Anonymous — Thu, 26 Aug 2021 09:36:09 GMT

If you want to see my project structure :

Re: Problem creation custom visual mapbox

Anonymous — Mon, 30 Aug 2021 01:29:23 GMT

HI @Anonymous,

I'd like to suggest you take a look at the below link about 'webpack' plugin usages in power bi custom visual:

GitHub - microsoft/powerbi-visuals-webpack-plugin: powerbi-visuals-webpack-plugin

In addition, you can also check your device settings(firewall, policy) and trace the request to confirm if they block the custom visual requests.

Regards,

Xiaoxin Sheng

Re: Problem creation custom visual mapbox

Anonymous — Mon, 30 Aug 2021 06:54:58 GMT

Thanks I see this and I say after if it works or not (for the moment it don't works, I have an error when I run npm start)

Re: Problem creation custom visual mapbox

Anonymous — Mon, 30 Aug 2021 09:25:17 GMT

@Anonymous

I try the example of webpack used in the github, but it don't works and when I do it works I have the same problem "GET https://localhost:8080/assets/status 404 (Not Found)"

For do it works I put, in devServer, in comment the line

inline: false, disableHostCheck: true, contentBase: path.join(__dirname, ".tmp", "drop"),

Else I have the error just after the npm run start:

- options has an unknown property 'disableHostCheck'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

And I comment the lines, in the module: rule: test: .less:

options: { paths: [path.resolve(__dirname, "..", 'node_modules')] }

Else I have during the compilation :

ERROR in ./style/visual.less Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/less-loader/dist/cjs.js): ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'paths'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation? } at validate (C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at Object.getOptions (C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\webpack\lib\NormalModule.js:547:19) at Object.lessLoader (C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\less-loader\dist\index.js:19:24) at processResult (C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\webpack\lib\NormalModule.js:721:19) at C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\webpack\lib\NormalModule.js:827:5 at C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\loader-runner\lib\LoaderRunner.js:399:11 at C:\Users\Corwin.Mangin\Desktop\Test_ViualBI\Map\VisualMapBox\node_modules\loader-runner\lib\LoaderRunner.js:251:18 @ ./src/visual.ts 216:0-32 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:8-14 11:17-23 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack 5.51.1 compiled with 2 errors in 40951 ms

And i don't know how to see if the problem come from the firewall, can you help me again please ?

Re: Problem creation custom visual mapbox

Anonymous — Wed, 01 Sep 2021 07:04:29 GMT

Hi @Anonymous,

I'm not so sure why that sample got 404 error, this error message usually means your requests are access to invalid resources. Perhaps you can report to the team of that project about these issues.

For the trace operations. you can deploy a local proxy server to trace all types of requests from your applications.

Fiddler | Web Debugging Proxy and Troubleshooting Solutions (telerik.com)

In addition, this issue also can be related to your environments, have you try to run these codes on other devices or IDE? (e.g. MS visual studio)

Regards,
Xiaoxin Sheng