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.

Zombie.js unable to access dataset property of DOM elements

I have a page which contains a rich-text editor. I used CKEditor for this. You pass it a div element and it loads the editor into that element.
Now I wanted to write integration tests for that page. I am using zombie.js with version 4.2.1 (old, I know, but I'm stuck with it) for that purpose. However, I get an error just trying to load the page. The problem apparently happens while trying to load editor into the div element. This is the relevant output:
[some other resources loading]
zombie GET http://localhost:10003/js/lib/ckeditor.js => 200 +0ms
zombie GET http://localhost:10003/js/pages/categories/init.js => 200 +0ms
zombie http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories +68ms
Debug-Output hier:
undefined
{ http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories
cause:
http://localhost:10003/js/lib/ckeditor.js:6623
e.dataset.ckeFiller = true;
^
TypeError: Cannot set property 'ckeFiller' of undefined
at au (http://localhost:10003/js/lib/ckeditor.js:6623:37)
at Module.<anonymous> (http://localhost:10003/js/lib/ckeditor.js:7326:24)
at n (http://localhost:10003/js/lib/ckeditor.js:57:22)
at http://localhost:10003/js/lib/ckeditor.js:100:20
at http://localhost:10003/js/lib/ckeditor.js:101:10
at t (http://localhost:10003/js/lib/ckeditor.js:47:258)
at http://localhost:10003/js/lib/ckeditor.js:48:7
at Script.runInContext (vm.js:133:20)
at Object.runInContext (vm.js:311:6)
at window._evaluate (/home/laura/Projekte/fricke/hybristools/node_modules/zombie/lib/document.js:253:75)
in http://localhost:10003/categories,
isOperational: true }
I know that the error is not related to CKEditor because I tried it with another rich-text editor, which gave me the exact same error (only the property name was different).
The error apparently happens while trying to set the value of the HTML property "data-cke-filler" of a br element. This is the element:
That element is inserted into the editor at the time of creation, it represents the content of the editor, which is empty at the beginning.
I tried to use zombies debugging capabilites, however, as the error occurs while the site loads I don't really get a chance to output anything useful. As far as I am aware, zombie.js should be able to handle loading this page.
So my question is:
What is causing this error and how can I fix it?
Let me know if you need more information.
Thanks.
Edit:
Here is the code where I load the page (it's written in CoffeeScript):
require 'should'
Browser = require '../../support/browser'
describe 'editor page', ->
browser = new Browser({debug: true})
before (done) ->
browser.debug()
browser.visitLoggedIn('/', {name: 'tester', password: 'secret'})
.then (done) ->
browser.visitPage '/editor' # this is what doesn't work
.then (done) ->
console.log 'page loaded'
.catch (error) ->
console.error error
it 'things should appear', ->
...
The visitLoggedIn method is a custom method that just creates necessary cookies for browsing the application as an authenticated user and visits the page using visitPage. visitPage uses zombies visit method. These work fine in all the other integration tests of this application.
Edit 2:
So I managed to "mock" CKEdtor using this answer. This isn't exactly what I wanted, but I decided to try to work with this for now. However, now I get the exact same error! This time the error is thrown inside my own code:
# These are two functions that are run shortly after inserting the editor into the page,
# so basically while the page is still loading.
getLanguageChoice: -> # This one is executed first
document.getElementById('language').value
getMandantChoice: -> # This one second
document.getElementById('shopClient').dataset.name # The error is thrown here
This is the exact error:
TypeError: Cannot read property 'name' of undefined
at Object.CategoriesView.getMandantChoice (http://localhost:10003/js/pages/categories/view.js:49:59)
at http://localhost:10003/js/pages/categories/app.js:22:97
at process._tickCallback (internal/process/next_tick.js:68:7)
This doesn't make any sense to me. Does this mean that zombie somehow can't access the values of data-* attributes? Maybe someone is knowledgeable about zombie and can provide further insight?

After further looking around with the new insights I gained, I found this ticket on the Github page of the project. It looks like the dataset property is not implemented in an underlying library in the used version. As I am not able to upgrade, it's just not possible to load the page like it is...
To work around this, I will refactor my code to not use the data-* property. This is luckily not tied to too much work in my case.

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"/>

DOJO Error: defineAlreadyDefined

I am using DOJO and JavaScript. The code is working fine with other browser except Chrome. Whenever I am trying to load the page in Chrome, I am getting following error
{ Error: defineAlreadyDefined
at makeError(dojo.js:119)
at async(dojo.js:1911)
at dojo.js:1941
(anonymous) # dojo.js:1862 }
At line number 119 of dojo.js file I have written following code:-
{ makeError = function(error, info){
return mix(new Error(error), {src:"dojoLoader", info:info}); }
},
At line 1911 I have written following code
{ (this.dojoConfig || this.djConfig || this.require || {}, }
What is the issue ? Can anyone solve this ? I am getting only this issue in chrome.In other browser its working absolutely fine.
Thanks in advance. :-) "

Well, When I faced the same error in my project; below are suggestions I followed to track and fix the error-
The main cause of this error if you are using two different which exposes same "define" method.
However if you are loading same library twice in your application in that case also it gives the same error.
This is the simler error raised on GitHub-
https://github.com/odoe/iLikeItHere/issues/1
Hoping above hint will help to track/resolve your issue :)

The issue could be caused by a external libraries which could use isown define function.
Make sure any external libraries which use their own define like requirejs are always added in header before dojo.
Related answer:
Dojo 1.9 build 'multipleDefine' error while loading locale

Chrome - Cannot read property 'status' of undefined even with check first

I see a lot similar questions for this particular javascript error, but my issue is I've already implemented the "fixes" and it still occurs, but only randomly.
The error:
Uncaught TypeError: Cannot read property 'status' of undefined
Before referencing the status property like so json.status, in all instances I precede it with:
if ( typeof json.status != 'undefined' )
So in theory, there should be no reason for it to ever throw that error if I'm checking first in all situations.
When I click the line number it's referencing in the console, it goes to a blank screen, so it's been hard to troubleshoot. If I expand open the error stack thing, it references my jquery dataTables a bunch, but I don't know if that's because something is failing prior to it or not.
How can I troubleshoot this deeper, or catch that error properly so it doesn't halt all my AJAX calls that come after it? (requires a refresh when it happens...)

Cuz you're not providing the full code, I cannot understand so clearly your situation.
Anyway, the error simply showing that json is undefined (due to something wrong in the coding logic, ...).
To quick fix the error, you can change your code to do null-check for json as well:
if (json && (typeof json.status != 'undefined')) {...}
Or a better way:
if (json && json.status) {...}