[Bug] Editor not rendering correctly after NPM RUN PROD

[stephenstack]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

const codeEditorDiv = document.getElementById('pf-c-code-editor__code-pre');
            meditor = monaco.editor.create(codeEditorDiv, {
                value: meditorValue.value,
                language: language.value || 'javascript',
                lineNumbers: lineNumbers.value,
                roundedSelection: false,
                readOnly: false,
                theme: darkmode.value,
                // scrollBeyondLastLine: true,
                // wordWrap: 'on',
                // wrappingStrategy: 'advanced',
                // automaticLayout: true,
                minimap: {
                    enabled: false
                }
            });

Actual Behavior

When developing, and running NPM RUN WATCH, editor displays perfectly in browser. After running NPM RUN PROD, the view breaks.

Expected Behavior

Expect to see perfect render as per below

Additional Context

CSS below shows duplication of code and misplacement of other HTML after NPM RUN PROD. NPM RUN DEV shows perfect placement. You will see that the 'monaco-editor' div is rendered twice. The bottom one has the main content. You will also see that there is a duplicate class (generated by monaco) on the 'pf-c-code-editor__code-pre'

"@patternfly/patternfly": "^4.176.3",
"laravel-mix": "^6.0.0-beta.17",
"postcss": "^8.1.14",
"vue": "^3.2.23",
"vue-loader": "^17.0.0"
"monaco-editor": "^0.33.0",
"monaco-editor-webpack-plugin": "^7.0.1",

Webpack.mix.js

const mix = require('laravel-mix');
require('laravel-mix-purgecss');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

mix.webpackConfig({
output: {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/'
},
plugins: [
new MonacoWebpackPlugin({
languages: ['yaml', 'json', 'javascript'],
}),
],
});

mix.js('resources/js/app.js', 'public/js')
.vue({ version: 3 })
.extract()
.extract(['monaco-editor'], 'public/js/monaco-editor.js')
.styles(
[ 'resources/css/app.css',
'resources/css/darkapp.css',
'node_modules/@patternfly/patternfly/patternfly.min.css',
'node_modules/@patternfly/patternfly/patternfly-addons.css',
'node_modules/highlight.js/styles/base16/tomorrow-night.css',
'resources/css/login_background.css',
], 'public/css/app.css')
.copy('node_modules/@patternfly/patternfly/patternfly.min.css.map', 'public/css/')
.copyDirectory('node_modules/@patternfly/patternfly/assets/', 'public/css/assets/')
.postCss('resources/css/app.css', 'public/css', [])
.options({
postCss: [require('autoprefixer')]
})
.purgeCss()
.version();