Parcel.js “ENOENT: no such file or directory” on build

Problem

Running Parcel.js build command (e.g. I run `npm run dev` script) to build and start the site with generates an error similar to the following:

D:\Workspaces\my-project\my-folder\my-file.vue: ENOENT: no such file or directory, open 'D:\Workspaces\my-project\my-folder\my-file.vue'
Error: ENOENT: no such file or directory, open 'D:\Workspaces\my-project\my-folder\my-file.vue'

Solution

Delete the .cache and dist folders and re-run the build command.

References

https://stackoverflow.com/questions/59196917/parcel-bundler-enoent-no-such-file-or-directory-when-delete-files-from-projec

Vue.js (2.x) v-model not updating for jQuery plugin input

Problem

I have a range slider HTML input (<input type="range">) I’ve inherited that uses the rangeslider.js jQuery plugin to render it.

I’m re-integrating it into a Vue.js (v2.x) project and using v-model to bind to the input.

However, to change the range value the user doesn’t interact directly with the HTML element but a rendered overlay which in turn changes the input value.

The problem is the v-model value was not updating when the range overlay is dragged to change the value.

 

Solution

My inherited code contained the following event handlers on the input elements.

$document.on('input', 'input[type="range"]', function(e) {
	valueOutput(e.target);
});

 

I added the following bold line to the called valueOutput() function.

function valueOutput(element) {
	element.dispatchEvent(new Event('input'));
}

The dispatchEvent ensures Vue is now aware of the change to the input.

 

I found this solution vis this StackOverflow answer: https://stackoverflow.com/a/56348565/115704 (article “How to change v-model value from JS“).

Sample of Static Header, Static Sidebar, Scrolling Content (CSS)

I’m working on what seems like a basic web layout: a static page header (stays in place when scrolling), static side menu (also stays in place) and the main column of content scrolls.

There’s a Codepen below that is “in progress” and shows it working. Bear in mind it’s not responsible yet – you need a screen >1024px wide. I’ll keep working on it to create a responsive option, so check back soon.

Something I want to point out is CSS frameworks can help with this situation. And they can hinder. I’ve taken to using the Bulma utility CSS framework lately and it’s great. But using its built in container/grid system I think (TBC) seems to be working against me. I also find myself needing to override the resets to un-reset certain typography decisions.

Sometimes it’s better to just do it yourself.

View the source code at https://codepen.io/jsnelders/pen/WNQrRbo.

See the Pen
Static Header, Static Sidebar, Scrolling Content
by Jason (@jsnelders)
on CodePen.

[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

I just had to deal with the following Vue generated warning:

[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

It related to the following line of code, where I was conditionally displaying a Font Awesome icon:

<i class="fas fa-spinner fa-spin" v-if="bookmarkMetaState == 'retrieving'"></i>

The problem, I believe, is the original <i> element ended up rendering as an <svg> element. So the error makes sense, because the the original code no longer existed.

I simply wrapped my my <i> Front Awesome icon in a <span>, and applied the v-if to the <span>. Problem solved.

 

 

 

Is data returned by JavaScript (ES6) array.filter() immutable?

Is data returned by JavaScript (ES6) array.filter() immutable? It depends.

If the original array contains “primitive” values (eg. strings, numbers and boolean) then a new array with “copies” of the values is returned in the filtered array. Changing data in the returned array will not affect the original array or its data.

If the original array contains objects then the a new array is still returned from .filter() but each element still references the object in the original array. Changing data in either the original or returned array will affect the data in both array because it’s the same piece of data being referenced by both arrays.

 

I have a Pen at https://codepen.io/jsnelders/pen/jOPeXXw demonstrating both situations.

 

See the Pen
Is data returned by JavaScript (ES6) array.filter() immutable?
by Jason (@jsnelders)
on CodePen.

Use `//@ts-check` in Visual Studio Code to Find Undeclared Variables (and save yourself hours of hunting)

Oh. My. God!

I just discovered //@ts-check in Visual Studio Code.

For all the web/JavaScript developers out there, add that comment to the top of your .js file in Visual Studio Code (that’s all you have to do).

Now, any issues in you variables (like using variables you haven’t declared) will show as an error in the IDE.

This is what I call super charging your IDE and your development.

I could have saved myself half a day’s work yesterday if I’d thought to search for “visual studio code undeclared javascript variables” beforehand. 🤦‍♂️

See: https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

JavaScript (ES2015) – Handling Promises in a loop (full working example)

I’ve spent the best part of the last day and half working with a simple Promise problem in JavaScript.

The scenario I have is:

  • I have a tree structure of folders (and sub-folders) with documents in them.
  • The production scenario I’m emulating is to submit each item in the tree (both folders and documents) to an API for saving, and to receive a return object with a new ID.
  • Documents are are associated with folders via IDs (e.g. Document.FolderID = Folder.ID and Folder.ParentID = Folder.ID).
  • Each item is added to an array of data in my JavaScript app.

The heart of this problem is the asynchronous call to the API. Because I need to associate documents with folders, and sub-folders with parent folders, I need to process each folder and wait for the response to get the new ID before processing sub-items.

Old school, this was done with callback (and I still use callback to this day). But in the interest of staying “modern” I took the ES2015 Promise approach.

Another thing to factor in is the loop through folders and items in the tree. I chose the for(let i; ..; ..) approach to pluck items out of the arrays in the tree. However, you can’t just call the api within the for loop because by the time an async finishes executing and you’re ready to process the next item,. the loop could have iterated on, changed the value of the iterator (i in this example) and hence the currently item in the array.

So you need to wrap the call the API in another function to localise the scope of the variables.

At the end of processing the tree I also need to tell the calling function everything is complete. Which means tracking the completion status of all promises in the loop and notifying the caller of overall completion only once all branches are finished (using Promise.all()).

Anyway, I created a fully working Pen at https://codepen.io/jsnelders/pen/LYVJQbG to demonstrate how this works.
I suggest you pop it open in CodePen itself to see the results – open the browser console (not the CodePen Console) to view debug output.

See the Pen
JavaScript (ES2015) – Handling Promises in a loop
by Jason (@jsnelders)
on CodePen.

JavaScript (ES2015) Promise error “Uncaught (in promise) {reject message}”

Debugging asynchronous code is difficult. Even Promises can become complex.

And once again my Golden Rule of Programming rings true: “if you think something should work but it doesn’t, you probably have a spelling mistake!

 

I’m working on a simple script to test JavaScript Promises – specifically, handling Promises in loops, and dealing with functions that both handle and return promises.
I’ll post about that later when I’m done.

For now, I just spent the last hour trying to figure out why I was getting a JavaScript console error Uncaught (in promise) processItems(Folder: 1): Reject caught (the part in italics is just a message returned in a reject(“processItems(” + title + “): Reject caught”)).

 

The console looks like this:

 

And the problem code is:

executeFolder(item, parentFolder) 
{
    let promise = new Promise(function (resolve, reject) {

        _this.asyncFunction(item)
        .then((resultItem) => {
            _this.processItems(item, resultItem).then(() => {
                resolve("executeFolder.then(" + parentFolder.title + ")");
            });
        })
        .catch( (e) => {
            reject("executeFolder.cathch(" + parentFolder.title + ")");
        });
    });

    return promise;
}

 

The problem is the line in bold: _this.asyncFunction(item).

I hadn’t defined the variable _this (I’d extracted this function out of another function which did have the definition).

All I had to do was define _this and the error resolved.

 

Once gain it was a spelling error (in this case not spelling anything at all).

I stopped feeling bad about these sorts of errors long ago. I’ve learnt over the years we (as developers) get a kind of blindness or tunnel vision when working on problems like this. Between having to hold the business problem, processing logic, nested functionality and all the other bits in our head, we can easily blank out what we later think was “staring us in the face”.

That’s where a good IDE comes in that can track unused variables.
I’m using Visual Studio Code which does identify unused variables (in fact, I noticed and removed one in the project no long ago) but for some reason it failed me in this instance.