We Keep Coding

Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()

I am trying to load images from a local folder using the src="" from the img tag but I want to load them using the backend. The frontend already has the relative path which is "../assets/imgs/" the backend just has the name and extension ex) "1.png". Thing is that it does work but I'm getting error messages.
This is causing me an issue
<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>
here is the function that gets called
methods: {
getIconPath(iconName) {
return iconName ? require("../assets/imgs/" + iconName) : ''
}
Here are both the error messages I am getting on the console
[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
<Navbar> at src/components/navbar.vue
<Main> at src/main.vue
<Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
webpackContextResolve .*$:13
webpackContext .*$:8
getIconPath profile.vue:74
render profile.vue:12
VueJS 43
<anonymous> main.js:31
js app.js:1415
__webpack_require__ app.js:785
fn app.js:151
1 app.js:1488
__webpack_require__ app.js:785
checkDeferredModules app.js:46
<anonymous> app.js:861
<anonymous>
I found very little resources to help out but many of them have said that required fixes their issues. So far I tried moving it to a different folder, moving the require as a function method, using absolute path, using v-attr, and binding it without require. Still I haven't had any luck getting rid of the error message. Here is another link of someone else having the same issue as me but I still couldn't figure out how they fixed it.
https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979
I would very much appreciate the help!! I've been stuck for many hours on this and I can't seem to find a helpful solution. If this isn't a good way to go about loading images from the backend feel free to suggest any other alternative ways to do so. Thank You!

I'm going to take a guess here and say that user is populated with data asynchronously. I bet you have something like this in your initial data or store
{
user: {}
}
The issue here is that user.icon is undefined, at least for some period of time. Where you are needlessly converting that into a string with
getIconPath(`${user.icon}`)
will convert undefined into the string "undefined" (because JavaScript is fun like that), hence your error message. The simple solution is to not use a string template, ie
getIconPath(user.icon)
To avoid these sorts of problems, I would instead use a computed property to resolve image imports. This is more efficient than executing a method in your template which happens on every tick
computed: {
userWithIcon () {
return {
...this.user,
icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
}
}
}
and in your template
<img width="100px" height="100px" :src="userWithIcon.icon">

I had a similar issue recently and I was able to solve it by making sure that my data was ready before rendering the view. using #Phil assumption that you have something like user: {} in your data, you can just wrap your whole HTML in <div v-if="user !== null"></div>. This makes sure that the user data is ready before even trying to render any image at all or use any data from the user object.
This should eliminate any error at all.

Prestablog - Uncaught ReferenceError: tinyMCE is not defined

I use Prestablog on Prestashop 1.6.11 and recently when I create or modify an article, it is impossible for me to click on the "Choose a file" button of the main image. I do not understand why nothing happens. No window opens.
In the Javascript console, I get the following error, but I do not know if it is related to my problem:
tinymce.inc.1.6.js:61 Uncaught ReferenceError: tinyMCE is not defined
at tinySetup (tinymce.inc.1.6.js:61)
at HTMLDocument.<anonymous> (index.php?tab=AdminModules&configure=prestablog&token=4ff8fc2…&activeget=0&…:1091)
at j (jquery-1.11.0.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.0.min.js:2)
at Function.ready (jquery-1.11.0.min.js:2)
at HTMLDocument.K (jquery-1.11.0.min.js:2)
A problem with updating products since the prestashop 1.6 update has been corrected. At first I thought the problem came from here but, I have a test server with exactly the same files as the production server and I have no error. Everything works perfectly. The only files that are not common are the cache files.
How can I solve my problem? Should I try to reinitialize the system cache? If so how do I do?

Try including the following 2 files:
/js/tiny_mce/tiny_mce.js
/js/tiny_mce/tinymce.min.js

too late answer i guess but if after replacing the tiny_mce.js and tiny_mcs.min.js still the error is same then add following code at given location :
prestashop/js/admin/tinymce_inc.js
replace this :
tinyMCE.init(config);
with this :
if (typeof tinyMCE !== 'undefined' && typeof tinyMCE != undefined && tinyMCE != "" && tinyMCE != null) {
tinyMCE.init(config);
}
then go to AdvanceParameters/Performance in Back Office and clear cache and reload product page.
hope this fix your issue as it fix mine.
Note:- this code is allowed to skip tiny_MCE error so all the other js works, but tiny mce editor is not appear whenever this error is skipped. you can get only simple textarea on product descriptions like

JS error on Chrome 57+ for RichFaces application "Cannot read property 'switchToItem' of undefined"

I've a jsp page with tabs. and sometimes an error occurs (when I press a tab) "Cannot read property 'switchToItem' of undefined"
Uncaught TypeError: Cannot read property 'switchToItem' of undefined
at init.__onHeaderClick (packed.js:6102)
at HTMLTableCellElement.<anonymous> (packed.js:1333)
at HTMLTableCellElement.dispatch (jquery.js:846)
at HTMLTableCellElement.eventHandle (jquery.js:722)
as I understand the error happens in packed.js (this is a js-file packed by richfaces of version 4.3.4). I've looked inside this file and found that RichFaces try to find a list of tabs. these tabs are located in property "rf" (element[richfaces.RICH_CONTAINER]), but in moment when I pressed a tab, there was no property.
This bug reproduce in chrome v.57, in version 56 it doesn't reproduce.
Could you help me with some advice, how it can be fixed?
some technical details:
I use xmlns:rich="http://richfaces.org/rich" <rich:tabPanel> tag in my jsp page
in pom.xml <richfaces.version>4.3.4.Final</richfaces.version>

James G, you have a mistake in richfaces.js
richfaces.$$ = function(componentName, element) {
while (element.parentNode) {
var containerId = element.getAttribute(richfaces.RICH_CONTAINER);
if (containerId && containerId !== "" && !!richfaces.COMPONENT_MAP[containerId] && richfaces.COMPONENT_MAP[containerId].component.name == componentName) {
return e.component;
}
else {
element = element.parentNode;
}
}
};
There is no e. You need change it to
...
return richfaces.COMPONENT_MAP[containerId].component;
...

Sorry I don't have the reputation points to make this a comment.
I don't know if google chrome knows about this problem or would be willing to fix it. Our response to this is to patch RichFaces 4.3.7.Final javascript to not use the adhoc dom element property but a global map instead and then deploy our own richfaces jar to our production environment at the end of the month (after testing). I don't have to ability to deploy this to central repo but if you wanted to see the direct changes I made you can see my commits (https://github.com/JamieGHamilton/core). If chrome fixes the problem then this won't be an issue but I'm not counting on that.
So far the changes I made work perfectly in chrome (and other browsers)
Update: I've included the fix found by dennyDarko - thanks for this. My understanding is that the Chrome 58-beta doesn't produce this behavior so for some affected apps, the admins may choose to wait.

This might he an issue of Chrome 57. Try Chrome 58 Beta.

I had the same issue with Richfaces 4.5.17.Final and Chrome 92.
Additionally there was the following log message:
<jsf.non_displayed_message> <WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.), detail=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.)]>
So changing body to h:body in the main XHTML file has resolved the issue.
And h:head contains <h:outputScript name="jsf.js" library="javax.faces"/>

Having issues while loading the ExtJS based app with google feeds api

Having issues while loading my app which is based on ExtJS and using Sencha 5.1.3.61. The problem seems to be in this file ext/packages/ux/src/google/Feeds.js.
Getting this error on app launch..
"?file=feeds&v=1.x&output=nocss%3Dtrue&async=2:1 Uncaught Error: Module:'feeds' not found!"
Any solution or work around can be helpful!!

You can try overriding it, like:
Ext.define('Fiddle.ux.google.Feeds', {
override: 'Ext.ux.google.Feeds',
requiresGoogle: {}
});

Issue got resolved by replacing requiresGoogle : {...} with _requiresGoogle : {...}. Thats it.
Source : https://www.sencha.com/forum/showthread.php?334652-Google-Feed-API-deprecated/page2 .

(window.beforeEach || window.setup) is not a function

I've tried to setup a testing environment with mocha, phantomjs and istanbul (and grunt). It works great so far, but when it comes to angular-testing i got some problems. I want (and need) to use angular-mocks, but as soon as I include it in my test.html, I get the following console-error in my browser:
Uncaught TypeError: (window.beforeEach || window.setup) is not a function
The matching code in angular-mocks.js is the following one:
(window.beforeEach || window.setup)(function() {
annotatedFunctions = [];
currentSpec = this;
});
This happens both for the current version (1.4.3) and for an old version which apparently worked in another project: 1.3.15.
What am I missing?

I fixed it.
The problem was, that i included my librarys (including angular-mocks.js) before mocha.js which apparently doesn't work.