Webpack Bundle: (seemingly random) reference errors: window is not defined
I'm using Webpack to bundle a series of TypeScript files - an AngularJS application. The build process works without errors or warnings and the application seems to work fine, but the Chrome console reveals a handful of (seemingly random) Reference Errors: Uncaught ReferenceError: window is not defined
The application will even run without these errors for a period of time, but as the route changes, these errors will occasionally appear. I tried making the offending libraries externals and pull them in via a standard <script> tag and the errors turn into angular is not defined and appear in a similar way. Still, the app runs fine (from a user's perspective), but the console reveals these very random feeling errors.
I am stumped and I appear to be unique? I can't find others who have run into similar issues.
Screenshots of the Chrome console errors:
My webpack config looks like (sorry for the funky formatting, trying to condense it as much as possible):
const path = require('path');
module.exports = [
{
target: 'web',
entry: './src/app.ts',
output: {
filename: 'my-bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
{ test: /.html$/, loader: 'html-loader' },
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /.png$/, use: ['url-loader?mimetype=image/png'] }
]
},
optimization: {
minimize: false
},
resolve: {
extensions: ['.ts', '.js', '.html']
}
}
];
My app.ts contains (most of the content removed for simplicity):
import './polyfills'
import * as angular from 'angular'
import * as angularUiRouter from '@uirouter/angularjs'
import { provide, bundle } from 'ng-metadata/core'
And finally, my index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- links to stylesheets and whatnot -->
</head>
<body ng-app="my-app">
<div><ui-view></ui-view></div>
<script type="text/javascript" src="my-bundle.js"></script>
</body>
The part that's killing me is that everything appears to be working fine, it's just these random errors appearing in the console. I see the same behavior in Chrome, Firefox, and Safari. When things feel "random" tend to think they're timing issues. Is my webpack bundle in the right place? When I've made angular an external dependency and include it before my webpack-generated bundle, I see the "random-like" errors of angular is not defined. Would appreciate any insight!
Versions:
- Webpack
4.26.1
- Angular
1.6.9
- ng-metadata
4.0.1
- TypeScript
2.4.0
javascript angularjs webpack
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
|
show 3 more comments
I'm using Webpack to bundle a series of TypeScript files - an AngularJS application. The build process works without errors or warnings and the application seems to work fine, but the Chrome console reveals a handful of (seemingly random) Reference Errors: Uncaught ReferenceError: window is not defined
The application will even run without these errors for a period of time, but as the route changes, these errors will occasionally appear. I tried making the offending libraries externals and pull them in via a standard <script> tag and the errors turn into angular is not defined and appear in a similar way. Still, the app runs fine (from a user's perspective), but the console reveals these very random feeling errors.
I am stumped and I appear to be unique? I can't find others who have run into similar issues.
Screenshots of the Chrome console errors:
My webpack config looks like (sorry for the funky formatting, trying to condense it as much as possible):
const path = require('path');
module.exports = [
{
target: 'web',
entry: './src/app.ts',
output: {
filename: 'my-bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
{ test: /.html$/, loader: 'html-loader' },
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /.png$/, use: ['url-loader?mimetype=image/png'] }
]
},
optimization: {
minimize: false
},
resolve: {
extensions: ['.ts', '.js', '.html']
}
}
];
My app.ts contains (most of the content removed for simplicity):
import './polyfills'
import * as angular from 'angular'
import * as angularUiRouter from '@uirouter/angularjs'
import { provide, bundle } from 'ng-metadata/core'
And finally, my index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- links to stylesheets and whatnot -->
</head>
<body ng-app="my-app">
<div><ui-view></ui-view></div>
<script type="text/javascript" src="my-bundle.js"></script>
</body>
The part that's killing me is that everything appears to be working fine, it's just these random errors appearing in the console. I see the same behavior in Chrome, Firefox, and Safari. When things feel "random" tend to think they're timing issues. Is my webpack bundle in the right place? When I've made angular an external dependency and include it before my webpack-generated bundle, I see the "random-like" errors of angular is not defined. Would appreciate any insight!
Versions:
- Webpack
4.26.1
- Angular
1.6.9
- ng-metadata
4.0.1
- TypeScript
2.4.0
javascript angularjs webpack
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Amy, can you click on the link ofbundle.jsand try putting a debugger and see what's the context ofthis?
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17
|
show 3 more comments
I'm using Webpack to bundle a series of TypeScript files - an AngularJS application. The build process works without errors or warnings and the application seems to work fine, but the Chrome console reveals a handful of (seemingly random) Reference Errors: Uncaught ReferenceError: window is not defined
The application will even run without these errors for a period of time, but as the route changes, these errors will occasionally appear. I tried making the offending libraries externals and pull them in via a standard <script> tag and the errors turn into angular is not defined and appear in a similar way. Still, the app runs fine (from a user's perspective), but the console reveals these very random feeling errors.
I am stumped and I appear to be unique? I can't find others who have run into similar issues.
Screenshots of the Chrome console errors:
My webpack config looks like (sorry for the funky formatting, trying to condense it as much as possible):
const path = require('path');
module.exports = [
{
target: 'web',
entry: './src/app.ts',
output: {
filename: 'my-bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
{ test: /.html$/, loader: 'html-loader' },
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /.png$/, use: ['url-loader?mimetype=image/png'] }
]
},
optimization: {
minimize: false
},
resolve: {
extensions: ['.ts', '.js', '.html']
}
}
];
My app.ts contains (most of the content removed for simplicity):
import './polyfills'
import * as angular from 'angular'
import * as angularUiRouter from '@uirouter/angularjs'
import { provide, bundle } from 'ng-metadata/core'
And finally, my index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- links to stylesheets and whatnot -->
</head>
<body ng-app="my-app">
<div><ui-view></ui-view></div>
<script type="text/javascript" src="my-bundle.js"></script>
</body>
The part that's killing me is that everything appears to be working fine, it's just these random errors appearing in the console. I see the same behavior in Chrome, Firefox, and Safari. When things feel "random" tend to think they're timing issues. Is my webpack bundle in the right place? When I've made angular an external dependency and include it before my webpack-generated bundle, I see the "random-like" errors of angular is not defined. Would appreciate any insight!
Versions:
- Webpack
4.26.1
- Angular
1.6.9
- ng-metadata
4.0.1
- TypeScript
2.4.0
javascript angularjs webpack
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
I'm using Webpack to bundle a series of TypeScript files - an AngularJS application. The build process works without errors or warnings and the application seems to work fine, but the Chrome console reveals a handful of (seemingly random) Reference Errors: Uncaught ReferenceError: window is not defined
The application will even run without these errors for a period of time, but as the route changes, these errors will occasionally appear. I tried making the offending libraries externals and pull them in via a standard <script> tag and the errors turn into angular is not defined and appear in a similar way. Still, the app runs fine (from a user's perspective), but the console reveals these very random feeling errors.
I am stumped and I appear to be unique? I can't find others who have run into similar issues.
Screenshots of the Chrome console errors:
My webpack config looks like (sorry for the funky formatting, trying to condense it as much as possible):
const path = require('path');
module.exports = [
{
target: 'web',
entry: './src/app.ts',
output: {
filename: 'my-bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
{ test: /.html$/, loader: 'html-loader' },
{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /.png$/, use: ['url-loader?mimetype=image/png'] }
]
},
optimization: {
minimize: false
},
resolve: {
extensions: ['.ts', '.js', '.html']
}
}
];
My app.ts contains (most of the content removed for simplicity):
import './polyfills'
import * as angular from 'angular'
import * as angularUiRouter from '@uirouter/angularjs'
import { provide, bundle } from 'ng-metadata/core'
And finally, my index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- links to stylesheets and whatnot -->
</head>
<body ng-app="my-app">
<div><ui-view></ui-view></div>
<script type="text/javascript" src="my-bundle.js"></script>
</body>
The part that's killing me is that everything appears to be working fine, it's just these random errors appearing in the console. I see the same behavior in Chrome, Firefox, and Safari. When things feel "random" tend to think they're timing issues. Is my webpack bundle in the right place? When I've made angular an external dependency and include it before my webpack-generated bundle, I see the "random-like" errors of angular is not defined. Would appreciate any insight!
Versions:
- Webpack
4.26.1
- Angular
1.6.9
- ng-metadata
4.0.1
- TypeScript
2.4.0
javascript angularjs webpack
javascript angularjs webpack
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
edited Nov 28 '18 at 18:10
Praveen Kumar Purushothaman
135k23140188
135k23140188
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
asked Nov 28 '18 at 17:49
amlyhammamlyhamm
5301928
5301928
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Amy, can you click on the link ofbundle.jsand try putting a debugger and see what's the context ofthis?
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17
|
show 3 more comments
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Amy, can you click on the link ofbundle.jsand try putting a debugger and see what's the context ofthis?
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Amy, can you click on the link of
bundle.js and try putting a debugger and see what's the context of this?– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
Amy, can you click on the link of
bundle.js and try putting a debugger and see what's the context of this?– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17
|
show 3 more comments
1 Answer
1
active
oldest
votes
Welp. After another frustrating week of debugging, I finally found my issue. I was using the PrismJS library and didn't even include it in my example above because it seemed so harmless. PrismJS is not webpack-friendly (at least not the version I was using). On a more-detailed note here, I believe the highlightAll method is what's troublesome.
For those who may be running into similar issues, the debugging process may stillbe helpful to you. I noticed that each time an error appeared in the console, it corresponded with another attempt to load the same bundle.js file. This happened several times throughout the application ("random"). Eventually, I discovered the request was coming from something Prism related and was able to make the library an external package in my webpack config, and the issue was solved!
Not all libraries will be webpack friendly. I thought I had done my due-diligence by removing a few here and there, but I apparently did not. Hope my experience can be helpful to someone else!
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53525314%2fwebpack-bundle-seemingly-random-reference-errors-window-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Welp. After another frustrating week of debugging, I finally found my issue. I was using the PrismJS library and didn't even include it in my example above because it seemed so harmless. PrismJS is not webpack-friendly (at least not the version I was using). On a more-detailed note here, I believe the highlightAll method is what's troublesome.
For those who may be running into similar issues, the debugging process may stillbe helpful to you. I noticed that each time an error appeared in the console, it corresponded with another attempt to load the same bundle.js file. This happened several times throughout the application ("random"). Eventually, I discovered the request was coming from something Prism related and was able to make the library an external package in my webpack config, and the issue was solved!
Not all libraries will be webpack friendly. I thought I had done my due-diligence by removing a few here and there, but I apparently did not. Hope my experience can be helpful to someone else!
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
add a comment |
Welp. After another frustrating week of debugging, I finally found my issue. I was using the PrismJS library and didn't even include it in my example above because it seemed so harmless. PrismJS is not webpack-friendly (at least not the version I was using). On a more-detailed note here, I believe the highlightAll method is what's troublesome.
For those who may be running into similar issues, the debugging process may stillbe helpful to you. I noticed that each time an error appeared in the console, it corresponded with another attempt to load the same bundle.js file. This happened several times throughout the application ("random"). Eventually, I discovered the request was coming from something Prism related and was able to make the library an external package in my webpack config, and the issue was solved!
Not all libraries will be webpack friendly. I thought I had done my due-diligence by removing a few here and there, but I apparently did not. Hope my experience can be helpful to someone else!
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
add a comment |
Welp. After another frustrating week of debugging, I finally found my issue. I was using the PrismJS library and didn't even include it in my example above because it seemed so harmless. PrismJS is not webpack-friendly (at least not the version I was using). On a more-detailed note here, I believe the highlightAll method is what's troublesome.
For those who may be running into similar issues, the debugging process may stillbe helpful to you. I noticed that each time an error appeared in the console, it corresponded with another attempt to load the same bundle.js file. This happened several times throughout the application ("random"). Eventually, I discovered the request was coming from something Prism related and was able to make the library an external package in my webpack config, and the issue was solved!
Not all libraries will be webpack friendly. I thought I had done my due-diligence by removing a few here and there, but I apparently did not. Hope my experience can be helpful to someone else!
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
Welp. After another frustrating week of debugging, I finally found my issue. I was using the PrismJS library and didn't even include it in my example above because it seemed so harmless. PrismJS is not webpack-friendly (at least not the version I was using). On a more-detailed note here, I believe the highlightAll method is what's troublesome.
For those who may be running into similar issues, the debugging process may stillbe helpful to you. I noticed that each time an error appeared in the console, it corresponded with another attempt to load the same bundle.js file. This happened several times throughout the application ("random"). Eventually, I discovered the request was coming from something Prism related and was able to make the library an external package in my webpack config, and the issue was solved!
Not all libraries will be webpack friendly. I thought I had done my due-diligence by removing a few here and there, but I apparently did not. Hope my experience can be helpful to someone else!
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
answered Dec 4 '18 at 14:52
amlyhammamlyhamm
5301928
5301928
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53525314%2fwebpack-bundle-seemingly-random-reference-errors-window-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please show us a screenshot of where the error is coming. The terminal screenshot will be great.
– Praveen Kumar Purushothaman
Nov 28 '18 at 17:52
Oh, yes, that makes sense. Will do!
– amlyhamm
Nov 28 '18 at 17:58
Amy, can you click on the link of
bundle.jsand try putting a debugger and see what's the context ofthis?– Praveen Kumar Purushothaman
Nov 28 '18 at 18:08
ps: It was me who messaged in LinkedIn to offer a help, just a heads up. 😅
– Praveen Kumar Purushothaman
Nov 28 '18 at 18:10
stackoverflow.com/questions/49981555/…
– Ortho Home Defense
Nov 28 '18 at 18:17