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.
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.
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.
I am new to typescript, knockout and requirejs. I have created some demo using this files. Now, I want to implement some minor logic using typescript and knockoutjs.
I have created 4-5 typescript files, which are imported internally. When I run the html file. I am getting the error stating. as Titled
Can somebody help me on this error. What I am missing in this code.
have search on google and spend quite a good time but didn't find the proper solutions. It must be related to requireJS to define all modules. But, as new in requireJS not able to catch up with that. I have also search stackoverflow for the similar error, but it doesn't help me out.
Waiting for the solution
Here your TypeScript has compiled happily, to code that will work in a requireJS environment (technically, an AMD environment). That means it generates output that assumes that define/require etc all already exist.
The overall answer is that you need to include RequireJS before you depend on your compiled code.
Notably the error suggests you've made a separate mistake though: you're depending directly on the RequireJS module scripts (i.e. you have a <script src="my-compiled-code.js"></script> tag in your HTML). That's not how require modules work. Instead, once you've made RequireJS available, you should have a single top-level startup script (either inline in your HTML or as a separate file) that configures RequireJS and then require()'s the top-level files of your application to start everything off. You can load this file either by hand, or with RequireJS's "data-main" attribute.
For example, a minimal HTML looks something like:
<!DOCTYPE html>
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
</body>
</html>
This loads RequireJS from 'scripts/require.js' and then tells it to load the script at 'scripts/main.js' to start off the loading process (you'll probably want to update both paths - note that data-main doesn't need a .js extension).
The main script should then be something very simple like:
// Set up any config you need (you might not need this)
requirejs.config({
basePath: "/scripts"
});
// Tell RequireJS to load your main module (and its dependencies)
require("mainmodule");
Generally, it's not TypeScript problems you're fighting here, it's RequireJS. I'd try spending a bit more time playing with just Require (maybe in pure JavaScript, so it's clearer) and looking at working examples for that, so you can get that bit working first, then add in the rest.
I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);
I have a web applictaion which use has the following folder structure
application_root
js
in the html, I refer the js like
<script src="../js/****"></script>
everything is file if I start the html page using file:///protocol, but when I use the web server, like http://loclahost:6000/application_root, I found the js cannot be loaded correctly.
How to solve this issue?
You need to start your path with /: <script src="/js/some.js"></script>
Anyway, this can be problematic because if you use a virtual directory, / won't work since it's the root path.
For example: /js/some.js is http://localhost/js/some.js, and if your web site is hosted in a virtual directory like http://localhost/myapp/js/some.js this approach won't work.
If you find above case part of your issue, you might need to use server-side code to get your application root (i.e. /myapp/) so you can concatenate /myapp/ to js/some.js and get the right URI.