Weird graphical artifacts (black dots) when using labeled entities in combination with webpack

Hello everyone,

I encountered a weird graphical artifact. The label of entities is surrounded by small black dots. The issue first occured when I was building the project using webpack (according to https://cesium.com/docs/tutorials/cesium-and-webpack/ and https://github.com/CesiumGS/cesium-webpack-example). The issue itself is not reproducable in cesium sandcastle and must somehow be caused by webpack / the webpack config. I don’t get any errors while building the project or viewing it in the browser.
The issue persists in chrome and firefox, im using windows and the latest recommended node.js version and the latest node.js dependencies:

"dependencies": {
    "cesium": "^1.80.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^8.1.0",
    "css-loader": "^5.2.0",
    "source-map-loader": "^2.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  }

(snippet from package.json).

Here are some pictures of the artifact:

.

I’m gonna share a simplified code example where the issue still persists, since it might be useful to find the error:

webpack.config.js:

const webpack = require("webpack");
const CopywebpackPlugin = require("copy-webpack-plugin");
const cesiumBuild = "./node_modules/cesium/Build/Cesium/";
module.exports = {
    entry: "./src/cesiumtest.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "cesiumtest.js",
        library: {
            type: "umd",
            name: "cesiumtest"
        },
        // Needed to compile multiline strings in Cesium
        sourcePrefix: ""
    },
    amd: {
        // Enable webpack-friendly use of require in Cesium
        toUrlUndefined: true
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: ["url-loader"]
        }]
    },
    plugins: [
        // Copy Cesium Assets, Widgets, and Workers to a static directory
        new CopywebpackPlugin({ 
            patterns: [
                { from: path.join(cesiumBuild, "Workers"), to: "Workers" },
                { from: path.join(cesiumBuild, "Assets"), to: "Assets" },
                { from: path.join(cesiumBuild, "Widgets"), to: "Widgets" }
            ]
        }),
        new webpack.DefinePlugin({
            CESIUM_BASE_URL: JSON.stringify("/dist/"),
        })
    ]
};

/src/cesiumTest.js:

import * as Cesium from "../node_modules/cesium/Source/Cesium";
import "../node_modules/cesium/Build/Cesium/Widgets/widgets.css";
Cesium.Ion.defaultAccessToken = "........................................................."; //removed for obvious reasons

export class cesiumTest {
    constructor() {

        var options = {
            animation: false,
            baseLayerPicker: false,
            fullscreenButton: false,
            vrButton: false,
            geocoder: false,
            homeButton: false,
            timeline: false,
            infoBox: true,
            sceneModePicker: false,
            selectionIndicator: false,
            navigationHelpButton: false,
            navigationInstructionsInitiallyVisible: false,
            sceneMode: Cesium.SceneMode.SCENE3D  
        };
        var viewer = new Cesium.Viewer("cesiumContainer", options);

        if (viewer.scene.highDynamicRangeSupported) {
            viewer.scene.highDynamicRange = true;
        }
        viewer.scene.postProcessStages.fxaa.enabled = true;

        var coordinates = [
            5,
            10,
            10000
        ];
        var entity = viewer.entities.add({
            name: "Testlabel",
            description: "\
                Longitude: "+ coordinates[0] + " °<br>\
                latitude: "+ coordinates[1] + " °",
            position: Cesium.Cartesian3.fromDegreesArrayHeights(coordinates)[0],
            point: {
                pixelSize: 6,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2
            },
            label: {
                text: "TestLabel",
                font: "14pt arial",
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(0, -9)
            },
            viewFrom: new Cesium.Cartesian3(0, 0, 40000000)
        });
    }
}

index.html:


<head>
    <script src="./dist/cesiumtest.js"></script>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        let cesiumTest = new cesiumtest.cesiumTest();
    </script>
</body>

</html>

Thanks for helping me in advance,
Andreas.

I get the same weird artifacting when using Brave browser.

Ok I managed to resolve the issue. It seems like a browser plugin was interfering with Cesium. By deactivating the plugin “DuckDuckGo Privacy Essentials” the problem didn’t occur anymore.
I’m not sure how the problem was caused and why it only occurs when building the project with webpack, but that fixed it for me.