We Keep Coding

"Failed to Load Resource Error" despite file being in directory

I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.

check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.

Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.

Webpack create JSON map file with dynamic modules

I have a project where I use turbolinks in conjunction with Webpack's dynamic imports.
What I have is that the initial javascript file is as small as possible and then for each page, I load the relevant javascript code:
document.addEventListener('turbolinks:load', () => {
const moduleName = document.body.dataset.route;
if (!moduleName) return;
const chunkName = moduleName.replace('.', '/');
import(`#pages/${chunkName}.js`)
.catch((e) => {console.error(e);});
});
This is a great approach as each page gets its own minimal JS file.
The only issue is that we wait until the page has fully loaded before we fetch the page's javascript which makes initial page loads feel slightly slow. Ideally, I would love to preload the assets for the page when the page loads.
I thought that maybe adding a link rel=preload would solve this issue but the thing is that I do not know which chunks I need to preload on each page. This is logic that only Weboack knows.
My webpack.config.js file looks like:
output: {
chunkFilename: 'js/chunks/[name].js?id=[chunkhash]',
},
So basically each chunk is put in the js/chunks directory and its name is 0.js, 1.js, 2.js etc.
I would love to maybe somehow generate an additional json file where webpack can build a map for me. It would basically look like this (chunk key: modules that are within it):
{
0: ['#pages/tips/index.js', '#pages/tips/show.js'],
1: ['#pages/destinations/index.js', '#pages/tips/show.js'],
}
Then, I would read the file on each page and dynamically create the link rel=preload. For example, say I render the tips/show page now, I would scan the file above for each key that contains the #pages/tips/show.js and render a link rel=preload for each file (0.js and 1.js file in this case).
I'm using Webpack Commons Chunk plugin to extract the same vendors and modules to their own chunk file.
Is doing such a thing is even possible?
Thanks!

Webpack has something that is called stats that contains a-lot of info regarding the compilation.
It also contains the separation of chunks.
You can checkout what react-loadable webpack plugin does in order to generate similar task.
Hope this helps.
EDIT
You will need to write a webpack plugin that hooks on emit phase and then you will have an access to the compilation object that has all the data.

Make a small HTML application update a JSON file

I want to make a local HTML application read and update a JSON file and use its content to display HTML content. Alas, I'm stuck at the very first step, as I can't seem to setup any sort of test file that simply notices and reads a JSON file. From what I see online, I need to use other libraries. I attempted to use require.js but I can't make it work and the documentation doesn't help me.
I imported the require.js with a tag and attempt to launch something out of what I got from the documentation, but there's nothing to do. It doesn't look like it's willing to take .json files.
requirejs([
'example'
], function(example) {
const config = require('./config.json')
});
My issue is to get the program to read the file. From there I believe I can make the display of it, but this JS thing is all alien to me.

The recommended way would be to run a web server or use something like Electron and build a desktop app (as #chrisG points out in the comments). But if you wanna do this in the browser without an web server you could do something like:
Run Chrome with the --allow-file-access-from-files (or however you allow local file access in your browser of choice)
Put your JSON in a js file and load it (to just do this you don't need the flag, but if you want to use absolute path you'll need it)

How can I insert javascript source files into my pyramid python application and use them in my template?

I have redefined this question from the original a bit to make it more fundamental to the question at hand. The relevant parts of my filesystem are as follows.
env
tutorial
tutorial
templates
view.pt
static
myjava.js
views.py
__init__.py
Right now my view.pt template has
<script type="text/javascript" src="/static/myjava.js"></script>
Then in my __init__.py, I have
config.add_static_view(name='static',path='env/tutorial/tutorial/static')
And finally, the myjava.js file itself is very simple:
document.write("hello from the javascript file")
I am trying to follow this document: http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/assets.html
but right now none of the text is showing up. I feel like the problem lies in the paths i am giving it.
Some ideas I have had: in the config.add_static_view, the name='static' is confusing. I want users to be able to visit the url www.domain.com/firstpage, where firstpage is the result of a template that uses a javascript file resource (a file in the static folder). I am worried that these static assets are only for urls that start with www.domain.com/static/... Is this a valid concern? How can I tell the config.add_static_view function to serve the static resources for any views rendered from the view.pt template?
Edit: here is what worked:
in the template, use src="${request.static_url('tutorial:static/myjava.js')}"
then in the init.py use config.add_static_view(name='static',path='tutorial:static/')

Your javascript link, in the template, should be something like src="${request.static_url('tutorial:static/myjava.js')}"
This allows your application to be more easily relocated.
This also uses the appropriate asset specification, using the name of the package,
"tutorial", a colon, then a path relative to the location of the "tutorial" package, which in your case the package is at env/tutorial/tutorial.
Edited: I forgot about the Configurator object.
Here, you want to use a similar asset specification such as config.add_static_view('static', 'tutorial:static/').
You can make different static views for different directories as well, like: config.add_static_view('images', 'tutorial:images/')
When you do things like this, you can move the root of your application to another location, allowing you to have http://mysite.com/stable/ and http://mysite.com/devel/ having accesses to / be rewritten to /stable/.
The static views can be called from any template with code like ${request.static_url('tutorial:images/icons/favicon.ico')}

Was reading the docs here and it looks like when you call add_static_view it changes the path of the file? To quote the docs:
this means that you wish to serve the files that live in /var/www/static as sub-URLs of the /static URL prefix. Therefore, the file /var/www/static/foo.css will be returned when the user visits your application’s URL /static/foo.css.
In your case, since you're calling env/tutorial/tutorial/static "static", you might want to try src="static/Three.js"> instead

Reference to ejs view files does not change after the build, although it combines it inside of production.js - Javascript MVC

In the code we use something like this:
$('#wrapper').html('//app/views/content.ejs', {foo:"bar"});
And when we build the app, this still stays the same, although the content.ejs file is built into production.js.
So my question is, what should we do so that when we build the app, these references point to ejs files inside of production.js?
We are using JMVC 3.2.2
We've also tried using this way:
$('#wrapper').html( $.View('//app/views/content.ejs', {foo:"bar"}) );

Your views are not getting added to production.js; you need to steal each one of them:
steal('//app/views/content.ejs');
JMVC 3.1:
steal.views('//app/views/content.ejs');

Got the answer in JMVC forum: https://forum.javascriptmvc.com/topic/#Topic/32525000000958049
Credit to: Curtis Cummings
Answer:
The paths to the views do not need to change.
When the production.js file is created, your views are included and
get preloaded when the script runs. When you reference:
'//app/views/content.ejs', view first checks if the view file you are
requesting has been preloaded and if it has, will use that instead of
making a request for the .ejs file.