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 !
If you want to see my project structure :
Helpful resources
Power BI Monthly Update - June 2025
Check out the June 2025 Power BI update to learn about new features.
Fabric Community Update - June 2025
Find out what's new and trending in the Fabric community.
