In my electron renderer, I have the following script:
<script>require('main.js')</script>
In that file, everything is commented out and my program keeps crashing. If I change the above to:
<script src="main.js"></script>
The file loads, however I cannot use require within that file. What do I need to change to get this to start working?
Edit:
I think the issue might be because I am using pug to generate my html like so:
block content
script.
require('../../js/client/main')
When I use an actual HTML file, it loads without hanging.
So, it looks like the issue was that electron was trying to load a .js.map file from the wrong location. electron-pug was intercepting the url of the file and since it was not found it was throwing an error (not handling it very well it seems).
My solution to fix this was to have inline sourcemaps instead of having a separate file.
Related
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.
I'm trying to work on an Electron app and have been having a problem with trying to require a module from another script running within the Chromium browser window. No matter what I do to specify the relative path, I'm always coming across the same error about being unable to find a module.
My project is set up like this:
index.html
scripts
controllers
controller.js
models
game.js
tests
spec
gameSpec.js
My index.html, which is the page brought up by default when electron launches, loads controller.js as a normal script at the end of the body tag.
<script src="scripts/controllers/controller.js"></script>
controller.js has the following code at the top:
var Game = require("../models/game.js");
.... some other code .....
var game = new Game();
Upon launching the electron Chromium window, I instantly run into this problem:
Uncaught Error: Cannot find module '../models/game.js'
My assumption is that I need a relative path from the controller.js file to the game.js file that it is importing, but no matter what kind of tweaking I do I'm always getting that error. I don't think it's a mere syntax error since I have the spec under the tests folder all running and passing which successfully uses a require like this:
var Game = require("../../models/game.js");
describe("Game", function () { ... });
Am I making an incorrect assumption about how require relative pathing is done when executed from the Chromium browser? Any help is appreciated!
Perhaps more of a workaround than an answer, but if you swap your script inclusion from this:
<script src="scripts/controllers/controller.js"></script>
To this:
<script>require('./scripts/controllers/controller.js')</script>
Then the relative paths should work as you are expecting.
I think that when you include scripts with the src attribute, then the internal context of the current working directory in that file is the root of the application.
Why? I'm not 100% sure, to be honest. Limitation on how the files have to be loaded when included as script src? If you really want to continue using the src attribute, these would technically work in controller.js.
var Game = require(__dirname + '/scripts/models/game.js');
// or
var Game = require('./scripts/models/game.js');
I can't whole-heartedly suggest either of those options, though. Seems fragile.
To be honest, I've never even noticed this before, because I typically include a javascript "entry" point to my application in the same location as my index.html.
So I have narrowed down my problem and was wondering if there was a solution to this or a way to get around it.
The code I have been working on in HTML uses a web frame work called turbogears.
To grab the files in turbogears it uses this command
<script type=text/javascript src= "${tg.url('pv/jquery-2.0.2.min.js')}"
Without it I get an error message like so
GET 'pv/jquery-2.0.2.min.js' 500 Internal Server Error
Now I am working on integrating my code into someone elses and I used RequireJS in my code. So in my require I have this set up
//HTML5
<script type=text/javascript data-main= "${tg.url('pv/demo.js')}" src= "${tg.url('pv/require.js')}"
//JAVASCRIPT
requirejs.config({
'baseUrl': 'src',
});
require(['pv'], function(PV) {
//code here
}
So I think what happens is that it runs the turbogears commands before the javascript and when it gets to the require it doesn't know how to grab the files without the turbogears command.
So I am wondering how do I run the command somehow with requireJS? Is there a simple solution? I am not too familiar with the turbogears web framework since I am just trying to integrate my code.
THINGS I HAVE TRIED
I have tried to just copy and paste the command in replacement of just src in the baseURL
requirejs.config({
'baseUrl': "${tg.url('pv/src')}"
});
which doesn't work and responds with the same error.
I am thinking I would have to make each separate script tags to call each files? which might be too complicated and just down right messy code.
Any thoughts on how to tackle this problem?
You don't have to always use
"${tg.url('')"
. Suppose in my public directory i have a folder javascript and in that i have require.js then i can include it directly like this:
<script type="text/javascript" src="/javascript/require.js"></script>
If anywhere you use the tag ${}, then that will be evaluated before the javascript.
I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.
I have an issue with relative paths whereby when the web app is running off subdirectory of the domain, the paths are not correct. e.g. http://www.example.com/webapp/
If I use #Url.Content("~/path/to/action") on the page it is fine. I can even embed the #Url.Content("") inside the javascript script. I want to clean up the page I wanted to put the javascript inside a js file and reference that. Now that the #Url.Content is being called inside the javascript file, it doesn't seem to work (probably for obvious reasons). How can I get around this issue?
I had a look at the <base /> but that doesn't seem to work.
Now that you moved everything into a separate js file, the file is being served as static content, and the Razor syntax is not being parsed.
If you need relative paths inside of your js which might change, then you should include a script in each page which sets a path var, and use #Url.Content(...) in this script, e.g.,
<script type="text/javascript">
pathToAction = "#Url.Content(...)";
</script>
Then, declare the pathToAction var in your js file, and use it as needed.