With one of my main projects, there is an unusual error/behavior that occurs when adding any external JS file to the index.html page of a vue.js application. With both applications, we use same frameworks (setups), but for whatever reason, this one generates a random error on our webserver (Windows Server 2019 because of Vue.JS over .net Core API) when we:
- Add google analytics to the index.html page OR
- Add twitter.js for embedded twitter/share support
When removing these lines, they go away.
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-TileColor" content="#1e2235">
<meta name="theme-color" content="#1e2235">
<meta property="og:title" content="website.com">
<meta property="og:site_name" content="website.com">
<meta property="og:image" content="https://website.com/share.jpg">
<meta property="og:url" content="https://website.com/">
<meta property="og:description" content="">
<meta name="twitter:image:alt" content="">
<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
<link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
<link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#e0b055">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;900&display=swap" rel="stylesheet">
<title>website.com | dashboard</title>
</head>
<body>
<div id="app-live"></div>
<div class="kua-app" id="app"></div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <!-- this is the triggering line -->
</body>
</html>
What reasons would adding any *.js files this way, including google analytics, result in a ISE500 and how could I fix it? My other project does not have this problem.
I will also include the webpack code, which is also the same as the other project I have.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
devServer: {
proxy: {
"/api": {
target: "http://localhost:5000",
timeout: 6000,
secure: false,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
extractComments: true,
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
output: null,
toplevel: true,
nameCache: null,
ie8: false,
keep_fnames: false,
},
})
]
}
}
};