I am new to meteor and i use it to create a webgl application for mobile devices.
My problem is the file structure. I already read the manuals so pls dont link to them.
1.The lib gets loaded first , so i put all my code that should be executed in main.js there?(i.g. for my webgl project i use a lot of oop, so does it make sense to put my code here?)
2.Consider the following structure
Everything i use for the webgl application is in the src folder, but if i want to Application.run(); i always get the error Uncaught Error: Cannot find module 'src/Application.js'. This problem occurs in every folder i put the src folder in, wether it is lib or import or whatever.
My Application.js looks like this:
var Application={};
Application.run = function () {
//code
}
module.exports = Application;
But what i really want for Application.js is:
function Application(){
//some stuff
}
Application.prototype.run = function(){
//some stuff
}
So how can i use the second approach of application.js in main.js AND if its not possible how should i do it instead?
From your screenshot, it looks like your Application.js file is actually named just Application (without the .js extension).
That may be the reason why your project does not find 'src/Application.js'.
Related
I'm using Node.js (v16) dynamic imports in a project to load plugins using a function loadJsPlugin shown here:
import { pathToFileURL } from 'url';
async function loadJsPlugin(pluginPath) {
const pluginURL = pathToFileURL(pluginPath).toString();
const result = await import(pluginURL);
return result.default;
}
My main program provides absolute paths to the loadJsPlugin function, such as /home/sparky/example/plugins/plugin1.js (Linux) or C:\Users\sparky\example\plugins\plugin1.js (Windows). The pathToFileURL function then converts these absolute paths to URLs like file:///home/sparky/example/plugins/plugin1.js (Linux) or file:///C:/Users/sparky/example/plugins/plugin1.js (Windows).
Loading the plugins this way works fine when the loadJsPlugin function is in the same package as the main program, like this:
import { loadJsPlugin } from './plugin-loader.js';
async function doSomething() {
const plugin = await loadJsPlugin('...'); // works
// use plugin
}
However, if I try to move loadJsPlugin to a separate library and use it from there, it fails with Error: Cannot find module '<url here>'
import { loadJsPlugin } from '#example/plugin-loader';
async function doSomething() {
const plugin = await loadJsPlugin('...'); // error
// use plugin
}
NOTE: the dependency name here is not on NPM, it's on a private repository and there's no problem loading the dependency itself. Also, static ES6 imports in general are working fine in this system.
I looked through Node.js documentation, MDN documentation, and other StackOverflow questions for information about what is allowed or not, or whether dynamic import works differently when in the same package or a dependency, and didn't find anything about this. As far as I can tell, if a relative path or file URL is provided, and the file is found, it should work.
Ruling out file not found:
I can switch back and forth between the two import lines to load the loadJsPlugin function from either ./plugin-loader.js or #example/plugin-loader, give it the same input, and the one in the same package works while the one from the dependency doesn't.
When I test in VS Code, I can hover the mouse over the URL in the Error: Cannot find module 'file:///...' message and the file opens just fine
I can also copy the 'file:///...' URL to a curl command (Linux) or paste it into the address bar of Windows Explorer and it works.
If I try a path that actually doesn't exist, I get a slightly different message Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<path here>', and it shows the absolute path to the file that wasn't found instead of the file URL I provided.
Checking different file locations:
I tried loading plugins that are located in a directory outside the program (the paths shown above like /home/sparky/example/plugins/...); got the results described above
I tried loading plugins that are located in the same directory (or subdirectory) as the main program; same result
I tried loading plugins that are packaged with the dependency in node_modules/#example/plugin-loader; same result (obviously this is not a useful set up but I just wanted to check it)
I'd like to put the plugin loader in a separate library instead of having the same code in every project, but it seems that dynamic import only works from the main package and not from its dependencies.
I'm hoping someone here can explain what is going on, or give me a pointer to what might make this work.
here's my situation. I just started learning about node.js server with express and I find it to be an amazing technology, based on JavaScript that I am already a bit familiar with.
Now, so far, whenever I want to change something on the page, I have to do it with JS on the server-side with node.js, and thus, I have to refresh the page with new information. But in several cases this seems to be not the best way to handle things, like changing simple text contents or click events. I would like to use browser-side JS for that reason, but I have not found out a way to do that yet.
I tried to call js-files and import them, but I couldn't make it work.
<script src="../../public/js/index.js"></script>
I also put the index.js and functional.js in the public folder, which I have made available to node.js at all times, but the imported JS still cannot be found when the project is run on the server.
app.use(express.static('public'));
app.use(express.static(path.join(__dirname, '/public')));
The strange thing is, I have been looking all over the internet on trying to find an explanation to it for several days already, but I couldn't find anything that made it clear to me on how to use browser-JS with a node.js server.
My folder structure is this:
functional.js
exports.functional = () => {
alert("Do something...");
}
index.js
const { functional } = require('./functional');
document.addEventListener('DOMContentLoaded', () => {
const init = (() => {
functional();
})();
});
So now I have the following questions:
Can browser-side JS even be used with a node.js server?
If it can be used, how do I implement those js-files, so they actually work?
Every help is greatly appreciated!
Thanks :)
Static Folder
You're defining a static folder in Express, here.
app.use(express.static('public'));
This tells Express that every static file (css, js, images, .etc) are found in the folder public. Now Express handles this smart and now knows that when you're looking for a static file, it is in that folder you've specified.
<script src="js/index.js"></script>
This will look into the folder public for the folder js and the file index.js. public/js/index.js.
Modules
The script itself needs some modification. Node.js uses a module system called CommonJS. And the syntax works works like in your file exports.functional, require('./functional'). But that is a technology that only works on the Node.js environment. Not in the browser.
JavaScript does also have a native module system, which is also available in Node.js, which works with the import and export keywords.
export const functional = () => {
alert("Do something...");
};
import { functional } from './functional' ;
document.addEventListener('DOMContentLoaded', () => {
functional();
});
But wait
By using the native module system on the client side, you'll need to load all the scripts that have exported and imported values in them, otherwise you'd be missing pieces.
<script type="module" src="js/functional.js"></script>
<script type="module" src="js/index.js"></script>
Bundler
The mainstream use of import and export modules is in combination with a module bundler like Webpack, which combines all the modules into a single file, which you can serve to the browser. This is very useful for development to keep the files you work in small.
It can transform the following files from this:
public
-- dist <-- bundled files ready for distribution
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js
to this:
public
-- dist <-- bundled files ready for distribution
---- js
------ bundle.js <-- Single file ready for the browser
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js
The bundler program also works on the Node.js environment, just like Express.js, so you can include it in your project.
Alternative
If the bundlers seem like a huge hassle, then you could always choose to classically use a single file to serve your JavaScript in.
on what you did:
<script src="../../public/js/index.js"></script
you are trying to call index.js relative to your node file (correct me if i'm wrong)
its a mistake because this is what express.static does
just try:
<script src="js/index.js"></script>
beacuse you already told node to take all files from that location
so instead calling files relative to your node file you need to call it from public folder
hope i helped you
I've been looking all over for a solution to this and I can't figure it out for the life of me...
The sitch: I have a lazy loaded React component which is supposed to parse a CSV file (with PapaParse) which is all built within the create-react-app framework. But for some reason, despite everything saying it should work, when I try to use PapaParse, I get this error:
Error: Script path cannot be determined automatically when Papa Parse is loaded asynchronously. You need to set Papa.SCRIPT_PATH manually.
But since this is bundled with Webpack I have no idea what this script path should be and I've tried setting the path to the PapaParse folder within the project folder structure (i.e. something like ../../node_modules/papaparse) to no avail. I actually got a different error when I put in a path:
papaparse?papaworker:1 Uncaught SyntaxError: Unexpected token <
For some more context, the component in question looks a little like this:
import Papa from 'papaparse';
class Dialog extends React.Component {
...
handleFileChange = () => {
...
Papa.parse(file, config);
...
}
...
}
I installed PapaParse via npm, so it should be the latest version, some things go back to 2014-15 where these problems existed, but it's said to have been updated...
Actually, I'm confused, because it works well on both of my projects, hence, React Web App and React Native iOS, Android App.
I imported it like below:
import Papa from 'papaparse/papaparse.min';
Surely, for each project, there are some configs that maybe some libraries work badly. but you maybe can use Node.js path for setting SCRIPT_PATH for Papa:
import path from 'path';
...
Papa.SCRIPT_PATH = path.resolve('/node_modules/papaparse');
...
Or if it has the issue too, then use this link answer for using papaparse directly in your code. that is not recommended.
Related: Where to include Client-side Startup Code in Meteor React App
Similar issue here.
I want to do some imports from the server and also some initalization once on the client (the sooner the better).
Right now i have my code included in a template:
import { foo } from "../../imports/api/foo/foo.js";
Template.header.events({
//init foo - should be called once and moved elsewehre
...
//use foo
});
But yeah ofc it's stupid because everytime the event is triggered the code gets called again.
On serverside i just used Meteor.startup for these things.
My Folder structure looks like this:
/config
/models
/packages
/client/components //current code is here
/client/config
/client/lib
/imports/api
/imports/ui
/server/lib
/server/publications
i heard that in previous meteor versions there were some folders for isomorphic code like a /lib folder but it seems like in meteor (1.3.5) the server and client code is split.
So where is a good place to do some initializations on the client side?
Actually, it doesn't matter where do you place your startup code as long as you're calling it from your client/main.js.
I'd recommend to follow Meteor's guide and proposed folder structure: Example directory layout, Structuring imports and Startup files
After reading all the relevant answers in SO and posts in the Appcelerator forums I still can't get this to work:
I have an application developed in Appcelerator, and I want to load an external JavaScript file in some of my controllers.
My App structure is as follows:
+ app
- assets
- controllers
- models
+ lib
- IndicatorWindow.js
...
Inside a controller I have the following code:
var uie = require('lib/IndicatorWindow');
But when I run this on an Android phone I get:
Uncaught Error: Requested module not found: lib/IndicatorWindow
I have also tried placing the lib folder outside of app, and using other paths such as /lib/IndicatorWindow and app/lib/IndicatorWindow.
I even tried using Ti.include() instead, with the same result. But I would rather use require() since I prefer using CommonJS modules.
Make a lib folder inside assets folder and paste the js file there and you would be able to require file just like you do in classic :)
Thanks
just use var uie = require('IndicatorWindow');
Also make sure it uses exports inside the JS