JS Error in Webpack production mode but not in development mode - Help me find the cause
I am a frontend developer (recently made the transition from backend dev to frontend dev) and I inherited our Javascript codebase from my predecessor and I am trying to maintain and optimize it.
We have the problem that the Javascript code behaves differently in production and in development environment. There are errors that only occur in production and I don't know where the discrepancy in the behavior comes from. Our goal is to have the same behavior and more importantly errors in both development and production environment, so when the code goes live (production environment), we can be sure there will be no unexpected errors.
Our build process works with Webpack (webpack@4.17.1), also we use babel (@babel/core@7.0.0) to transpile our Javascript code.
I did some research to find out where the differences come from. The one thing I came up with was the strict mode, but as far as I understand it the strict mode gets also used in development environment, so this is probably no the cause.
Here is a simple example of this behavior.
We have a js file called utilities.js, which is just a collection of helpful methods:
/**
* @param {String} url
* @returns {Promise}
*/
export function loadScript(url) {
let loaded = this.getData('scriptsLoaded', );
...
}
/**
* @param {String} key
* @param {*} [type={}]
* @returns {*}
*/
export function getData(key, type = {}) {
window.auskunft = window.auskunft || {};
return window.auskunft[key] = window.auskunft[key] || type;
}
Now loadScript() gets called somewhere else and because we are not in a class context (my guess is it was refactored from class to collection of independent methods), getData() cannot be called with "this".
This leads to an error in production environment (which affects/stops the rest of the js code), but in development this error doesn't occur and everything works fine. I would expect to get the error in both development and production environment.
This is the production error:
utilities.js:68 Uncaught (in promise) TypeError: this.getData is not a
function at Object.p (utilities.js:68) at Function.value
(client.js:163) at t.value (app.js:27) at main.js:14
So if anyone has some clues what could cause this discrepancy and where to look to fix this behavior, that would be awesome!
javascript webpack babeljs babel
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
add a comment |
I am a frontend developer (recently made the transition from backend dev to frontend dev) and I inherited our Javascript codebase from my predecessor and I am trying to maintain and optimize it.
We have the problem that the Javascript code behaves differently in production and in development environment. There are errors that only occur in production and I don't know where the discrepancy in the behavior comes from. Our goal is to have the same behavior and more importantly errors in both development and production environment, so when the code goes live (production environment), we can be sure there will be no unexpected errors.
Our build process works with Webpack (webpack@4.17.1), also we use babel (@babel/core@7.0.0) to transpile our Javascript code.
I did some research to find out where the differences come from. The one thing I came up with was the strict mode, but as far as I understand it the strict mode gets also used in development environment, so this is probably no the cause.
Here is a simple example of this behavior.
We have a js file called utilities.js, which is just a collection of helpful methods:
/**
* @param {String} url
* @returns {Promise}
*/
export function loadScript(url) {
let loaded = this.getData('scriptsLoaded', );
...
}
/**
* @param {String} key
* @param {*} [type={}]
* @returns {*}
*/
export function getData(key, type = {}) {
window.auskunft = window.auskunft || {};
return window.auskunft[key] = window.auskunft[key] || type;
}
Now loadScript() gets called somewhere else and because we are not in a class context (my guess is it was refactored from class to collection of independent methods), getData() cannot be called with "this".
This leads to an error in production environment (which affects/stops the rest of the js code), but in development this error doesn't occur and everything works fine. I would expect to get the error in both development and production environment.
This is the production error:
utilities.js:68 Uncaught (in promise) TypeError: this.getData is not a
function at Object.p (utilities.js:68) at Function.value
(client.js:163) at t.value (app.js:27) at main.js:14
So if anyone has some clues what could cause this discrepancy and where to look to fix this behavior, that would be awesome!
javascript webpack babeljs babel
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
1
The very first thing I'd do is add aconsole.log(this)to find out whatthisactually points to.
– Chris G
Dec 28 '18 at 9:29
add a comment |
I am a frontend developer (recently made the transition from backend dev to frontend dev) and I inherited our Javascript codebase from my predecessor and I am trying to maintain and optimize it.
We have the problem that the Javascript code behaves differently in production and in development environment. There are errors that only occur in production and I don't know where the discrepancy in the behavior comes from. Our goal is to have the same behavior and more importantly errors in both development and production environment, so when the code goes live (production environment), we can be sure there will be no unexpected errors.
Our build process works with Webpack (webpack@4.17.1), also we use babel (@babel/core@7.0.0) to transpile our Javascript code.
I did some research to find out where the differences come from. The one thing I came up with was the strict mode, but as far as I understand it the strict mode gets also used in development environment, so this is probably no the cause.
Here is a simple example of this behavior.
We have a js file called utilities.js, which is just a collection of helpful methods:
/**
* @param {String} url
* @returns {Promise}
*/
export function loadScript(url) {
let loaded = this.getData('scriptsLoaded', );
...
}
/**
* @param {String} key
* @param {*} [type={}]
* @returns {*}
*/
export function getData(key, type = {}) {
window.auskunft = window.auskunft || {};
return window.auskunft[key] = window.auskunft[key] || type;
}
Now loadScript() gets called somewhere else and because we are not in a class context (my guess is it was refactored from class to collection of independent methods), getData() cannot be called with "this".
This leads to an error in production environment (which affects/stops the rest of the js code), but in development this error doesn't occur and everything works fine. I would expect to get the error in both development and production environment.
This is the production error:
utilities.js:68 Uncaught (in promise) TypeError: this.getData is not a
function at Object.p (utilities.js:68) at Function.value
(client.js:163) at t.value (app.js:27) at main.js:14
So if anyone has some clues what could cause this discrepancy and where to look to fix this behavior, that would be awesome!
javascript webpack babeljs babel
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
I am a frontend developer (recently made the transition from backend dev to frontend dev) and I inherited our Javascript codebase from my predecessor and I am trying to maintain and optimize it.
We have the problem that the Javascript code behaves differently in production and in development environment. There are errors that only occur in production and I don't know where the discrepancy in the behavior comes from. Our goal is to have the same behavior and more importantly errors in both development and production environment, so when the code goes live (production environment), we can be sure there will be no unexpected errors.
Our build process works with Webpack (webpack@4.17.1), also we use babel (@babel/core@7.0.0) to transpile our Javascript code.
I did some research to find out where the differences come from. The one thing I came up with was the strict mode, but as far as I understand it the strict mode gets also used in development environment, so this is probably no the cause.
Here is a simple example of this behavior.
We have a js file called utilities.js, which is just a collection of helpful methods:
/**
* @param {String} url
* @returns {Promise}
*/
export function loadScript(url) {
let loaded = this.getData('scriptsLoaded', );
...
}
/**
* @param {String} key
* @param {*} [type={}]
* @returns {*}
*/
export function getData(key, type = {}) {
window.auskunft = window.auskunft || {};
return window.auskunft[key] = window.auskunft[key] || type;
}
Now loadScript() gets called somewhere else and because we are not in a class context (my guess is it was refactored from class to collection of independent methods), getData() cannot be called with "this".
This leads to an error in production environment (which affects/stops the rest of the js code), but in development this error doesn't occur and everything works fine. I would expect to get the error in both development and production environment.
This is the production error:
utilities.js:68 Uncaught (in promise) TypeError: this.getData is not a
function at Object.p (utilities.js:68) at Function.value
(client.js:163) at t.value (app.js:27) at main.js:14
So if anyone has some clues what could cause this discrepancy and where to look to fix this behavior, that would be awesome!
javascript webpack babeljs babel
javascript webpack babeljs babel
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
edited Dec 28 '18 at 10:11
Bhoomi patel
40016
40016
asked Dec 28 '18 at 9:17
matthibmatthib
62
asked Dec 28 '18 at 9:17
matthibmatthib
62
asked Dec 28 '18 at 9:17
matthibmatthib
62
62
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
1
The very first thing I'd do is add aconsole.log(this)to find out whatthisactually points to.
– Chris G
Dec 28 '18 at 9:29
add a comment |
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
1
The very first thing I'd do is add aconsole.log(this)to find out whatthisactually points to.
– Chris G
Dec 28 '18 at 9:29
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
1
1
The very first thing I'd do is add a
console.log(this) to find out what this actually points to.– Chris G
Dec 28 '18 at 9:29
The very first thing I'd do is add a
console.log(this) to find out what this actually points to.– Chris G
Dec 28 '18 at 9:29
add a comment |
0
active
oldest
votes
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%2f53956131%2fjs-error-in-webpack-production-mode-but-not-in-development-mode-help-me-find-t%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53956131%2fjs-error-in-webpack-production-mode-but-not-in-development-mode-help-me-find-t%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
Production don't install dev requirements unless you use some plugins. Where is your webpack configuration and package.json?
– Zydnar
Dec 28 '18 at 9:25
1
The very first thing I'd do is add a
console.log(this)to find out whatthisactually points to.– Chris G
Dec 28 '18 at 9:29