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
Join our Fabric User Panel
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
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.
