I've recently seen a problem that I cannot explain and I don't know how to debug in a way to find out what's changing what I'm seeing. Just to start off, I'm not going to be able to set up a repro environment as I have no idea what's causing this. I can only explain what I'm seeing and see if anyone has seen it or has any idea how to figure out what's going on.
So, as the title says, I have an element on my page that starts off normally, but then at some point one of the element's class property (i.e., "class1 class2 etc") literally gets a space put in between each character (i.e., "c l a s s 1 c l a s s 2 e t c").
This occurs on page that contains two JavaScript packages, both packaged with Webpack and using Babel. This issue only occurs in IE11, so the Babel transforms are also using a number of core-js polyfills, in which I'm using core-js 3. That's common to both packages. I've seen this issue in various builds of these packages, and where some combinations do not exhibit it, but then certain versions of one package will consistently cause it. And both packages seem to be able to cause it, proven by isolating one package at a package and changing another and seeing things change. So I'm leaning towards it being something to do with the dependencies (i.e., webpack, babel, core-js, or something else, but those are the main things). I've compared the build output when I've seen which packages are good and which are bad, but didn't notice anything that stood out as a cause.
Here is a screenshot of the class property that I describe above:
So, my questions:
- Has anyone ever seen this result and have any idea why it happened? That would be great to find someone that has seen this and knows what may have caused it.
- Barring that, does anyone know how to isolate a property change, in this instance a class property change, and see what's causing it? I've tried going through the IE11 "Performance" tool and found the "Style Calculation" where it's calculating the change when this property change occurs, but I can't get from there to potentially what JavaScript code actually made the change. Is there any way to do that? In IE11, since that's the only place I see it.
Like I said, this is a very strange issue, so I don't really expect any answers, but I would really appreciate it if anyone had any help or some ideas as to what to do. Thanks.
EDIT: Adding some configurations, it's all pretty standard
Package 1 (non-UI component): Package 1 Babel Config:
module.exports = {
"presets": [
[
"@babel/preset-env",
{
targets: {
browsers: [
"> 0.25%",
"last 2 versions",
"ie 11",
"edge 18",
"safari >= 11",
"not dead"
]
},
corejs: 3,
useBuiltIns: "usage",
debug: false
}
]
],
"ignore": [
/babel-/,
/@babel\/runtime/,
/core-js/,
/regenerator-runtime/
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
legacy: true
}
],
[
"@babel/plugin-proposal-class-properties",
{
loose: true
}
],
[
"@babel/plugin-transform-runtime",
{
regenerator: true,
corejs: 3
}
]
],
"sourceMaps": true,
"sourceType": "unambiguous"
};
Package 1 Webpack config (merged together):
(common):
{
entry: path.join( __dirname, 'src', 'Main.js' ),
devtool: 'source-map',
output: {
devtoolNamespace: 'APPNAME'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: [
/node_modules/
]
},
{
test: /\.js$/,
loader: 'babel-loader',
}
]
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
};
(production):
{
mode: 'production',
output: {
path: path.join(__dirname, 'dist'),
filename: libnamemin
},
optimization: {
moduleIds: 'total-size',
mangleWasmImports: true,
concatenateModules: false,
minimizer: [
new BabelMinifyPlugin({
removeDebugger: true,
mangle: true
},{
comments: false,
sourceMap: 'source-map'
})
]
},
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
generateStatsFile: true,
reportFilename: path.join(__dirname, './reports/bundle/report.html'),
statsFilename: path.join(__dirname, './reports/bundle/stats.json')
})
]
};
Package 2 (UI component using "customElements", in IE11, "webcomponentsjs" polyfill) Package 2 Babel config:
module.exports = {
"presets": [
[
"@babel/preset-env",
{
targets: {
browsers: [
"> 0.25%",
"last 2 versions",
"ie 11",
"edge 18",
"safari >= 11",
"not dead"
]
},
corejs: 3,
useBuiltIns: "usage",
debug: false
}
]
],
"ignore": [
/babel-/,
/@babel\/runtime/,
/core-js/,
/regenerator-runtime/,
/webcomponentsjs/,
/@webcomponents/
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
legacy: true
}
],
[
"@babel/plugin-proposal-class-properties",
{
loose: true
}
],
[
"@babel/plugin-transform-runtime",
{
regenerator: true,
corejs: 3
}
],
[
"@babel/plugin-syntax-dynamic-import",
{ }
]
],
"sourceMaps": true,
"sourceType": "unambiguous"
};
Package 2 Webpack config (merged together):
(common)
{
entry: path.join( __dirname, 'src', 'App.js' ),
devtool: 'source-map',
output: {
devtoolNamespace: 'APPNAME'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: [
/node_modules/
]
},
{
test: /\.(svg|png|woff|woff2)$/,
loader: 'url-loader'
},
{
test: /\.css|\.s(c|a)ss$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'sass-loader',
options: {
sassOptions: {
importer: jsonImporter()
}
}
}
]
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
root : __dirname,
rootMode: 'upward-optional'
}
}
]
},
plugins: [
new UnusedFilesWebpackPlugin({
patterns: ['./src/resources/images/*', './src/resources/logos/*'],
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
};
(production):
{
mode: 'production',
output: {
path: path.join(__dirname, 'build'),
filename: 'APPNAME.min.js'
},
optimization: {
moduleIds: 'total-size',
mangleWasmImports: true,
concatenateModules: false,
minimizer: [
new BabelMinifyPlugin({
removeDebugger: true,
mangle: true
},{
comments: false,
sourceMap: 'source-map'
})
]
},
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.__TF_NAME__': JSON.stringify(pkg.name),
'process.env.__TF_VERSIONBUILD__': JSON.stringify('__METADATA_VERSION_BUILD__'),
'process.env.__TF_VERSION__': JSON.stringify('__METADATA_VERSION__'),
'process.env.__TF_BUILDDATE__': JSON.stringify((new Date(Date.now())).toUTCString())
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
generateStatsFile: true,
reportFilename: path.join(__dirname, './reports/bundle/report.html'),
statsFilename: path.join(__dirname, './reports/bundle/stats.json'),
})
]
};
