i want to have a javascript file accessible using url.
like i have myfile.js and i want that file to apear on localhost:3000/myfile.js
is there any way to do that in create react app or if not how can i do that using webpack? CopyWebPackPlugin should work? by the way i want to use es module like import thing in that file so i guess i can't have it inside public folder but its fine if i get the compliled one by webpack.
or if there is some other way of doing this would be very much helpful.
Why i think that put my lib in global and access it in different files is a valid choice :
First i have one js file, but my file was getting bigger so i just separate it in two, and now i access to my second file functions with an export of functions.
So why do i have to import one time the lib when im on a single file, but multiple times when i use multiple files
What i want to do
I have an error when i try to use a lib in JavaScript.
For the example i will use 'lib' instead of a real library from js
This is my files
app.js
import lib from 'lib'
console.log(lib)
This is working, but when i add
app.js
import lib from 'lib'
import my_file from './file_path.js'
file_path.js
console.log(lib)
This is not working and i have to import my lib in the new file like
file_path.js
import lib from 'lib'
console.log(lib)
I GET THIS ERROR
Uncaught ReferenceError: lib is not defined
But i don't want to duplicate my import, How can i do it ? thanks
I found a solution who work with window
you just have to add your lib in a window variable like that:
app.js
import lib from 'lib';
window.lib = lib;
import my_file from './file_path.js'
And now you can use your lib in "my_file" without importing it again
PS: thanks to people who help me resolving my issue :)
/!\ You have to be in a node application to use this method /!\
I also find an alternative of the window and import
We can use require like that:
window.lib = require('lib');
Now we just have one line instead of 2
This is the best solution i found so far, don't know if we can do better, let me know
I have a js file called project specific js.js and in that file I want to import another js file for general js called logic.js in the js folder
import 'js/logic.js';
in devtools when I run the html that imports project specific js i get
Uncaught SyntaxError: Cannot use import statement outside a module
issue fixed it turns out because I wasn't running a localhost for some reason you cant import other js files except modules like react. now I am running localhost and in the script tag importing projectSpecificJs.js i have type set to module so :<script type="module" src="projectSpeceficJs.js></script>"
Just for further information:
import 'file.js'
Is only for nodejs / module html attribute
Also here's some quick info related to the topic:
The whole concept behind using the “import” statement instead of “require” in Node.js is to shift from the CommonJS module system to the ECMAScript Module System. Reference
i am using webpack js bundle for my project.I have published a npm module and which included in my webpack entry file.i can access it inside entry file.But that file i can not access inside another file which included in entry file in webpack.Here is my entry file
import myClass from "sbkkoovery-esign";
console.log(myClass);
import "jquery";
import 'bootstrap';
import "./js/app";
here 'myClass' is working properly.But i tried to access 'myClass' inside '/js/app' file.But i am getting error.Here is mu 'js/app' file
console.log("here");
console.log(myClass);
I was also facing same issue few days back, In this case, rather then to use any node-plugin I have directly given "javascriptfilename.min.js" file path inside tags in "index.html".
Note: This is not the correct solution, this is just temporary.
I'm confused by how we import [Publish] functions and [Meteor Methods] that reside under /imports/server to the Blaze client (either in /imports/client/ui or even just under app-name/client).
The classic way, is to just use the publish or meteor method, and everything is consumed by the client without imports. But if everything resides under the /imports directory (including the Blaze templates) how does that work? Are there real examples out there?
Illustration:
// imports/server/publishing/test.js
Meteor.publish('publish.test', function() {
if (this.userId) return TestCollection.find({});
return self.ready();
});
// imports/client/ui/test.js
import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { Mongo } from 'meteor/mongo';
import TestCollection from '../../imports/collections/test.js';
import "./test.html";
Template.Test.onCreated(function() {
this.state = new ReactiveDict();
this.autorun(() => {
const subscription = this.subscribe('publish.test');
...
}
});
});
How do server side only stuff make its way to the client in the new imports syle of developing?
UPDATE1:
Reponding to Answer1, would something like this work? Also, does the client look okay?
// app-name/imports/server/trades-pubs.js
// This code only runs on the server
Meteor.publish('trades', function tradesPublication() {
return Trades.find({},{sort: {timestamp: -1}, limit: 1000});
});
// app-name/imports/server/trades-methods.js
Meteor.methods({
// Only on server
'trades.importFromFiles'() {
fs = require('fs');
const path = "/home/daemmon/trades_data/";
var files = fs.readdirSync(path);
...
}
});
// app-name/server/main.js
import '../imports/server/trades-methods.js';
import '../imports/server/trades-pubs.js';
Is this all that's needed to get a publish methods to the client and server side meteor methods avaialbe to the client?
// imports/client/ui/test.js
import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { Mongo } from 'meteor/mongo';
import TestCollection from '../../imports/collections/test.js';
import "./test.html";
Template.Test.onCreated(function() {
this.state = new ReactiveDict();
this.autorun(() => {
const subscription = this.subscribe('trades');
...
}
});
});
UPDATE2:
you might want to consider importing app-name/imports/server/trades-methods.js somewhere in your client code as well, i.e. in a file like app-name/client/main.js
I thought we could not import server code on the client? If I wanted to import trades-methods.js for example, I'd have to move it to app-name/imports/api or something outside /imports/server.
UPDATE3:
Reading the Meteor Guide, I'm confused by this paragraph:
.
To fully use the module system and ensure that our code only runs when we ask it to, we recommend that all of your application code should be placed inside the imports/ directory. This means that the Meteor build system will only bundle and include that file if it is referenced from another file using an import (also called “lazy evaluation or loading”).
Meteor will load all files outside of any directory named imports/ in the application using the default file load order rules (also called “eager evaluation or loading”). It is recommended that you create exactly two eagerly loaded files, client/main.js and server/main.js, in order to define explicit entry points for both the client and the server. Meteor ensures that any file in any directory named server/ will only be available on the server, and likewise for files in any directory named client/. This also precludes trying to import a file to be used on the server from any directory named client/ even if it is nested in an imports/ directory and vice versa for importing client files from server/.
These main.js files won’t do anything themselves, but they should import some startup modules which will run immediately, on client and server respectively, when the app loads. These modules should do any configuration necessary for the packages you are using in your app, and import the rest of your app’s code.
.
Doesn't this mean for example that if there is a file inside the [/app-name/imports/server] directory, this file can NOT be imported in the client here [/app-name/client/main.js]?
.
For example I could NOT do the following:
Module inside the imports /server directory:
/app-name/imports/server/server-test.js
Module inside the imports /client directory:
/app-name/imports/client/client-test.js
.
Entry point in Meteor client:
/app-name/client/main.js
// => Would NOT work?
import { ServerTest } from "../../imports/server/server-test.js";
// => Would work?
import { ClientTest } from "../../imports/client/client-test.js";
UPDATE4:
Your wording here on your Update2:
Within the /imports folder, there are no special folder names - so you
can import a file from /imports/server in your client side code.
... is incorrect according to the author of this portion of the Meteor Guide.
First of all, since publications and methods are referenced only by their string name, they don't need to be imported in the code that subscribes to them or calls the functions. When doing Meteor.subscribe('publication') Meteor will try to find a publication named publication in the server, and subscribe to it. Same works with Meteor methods.
However, when using the /imports folder, your publications and methods need to be imported somewhere in server code so that Meteor loads them at all. The best practice to do this is to place a file somewhere in the imports folder, like /imports/startup/server/index.js (as recommended by the Meteor guide), where you simply import all files that declare publications and methods, and then importing this single file in some file outside the imports folder. For more about this, see the Meteor Guide and its example app.
Note also that for Meteor methods, you may want to include them also somewhere in your client code, so that the client can run simulations of them for optimistic UI before the server call returns. To do this, you can do the same as above but with a file like /imports/startup/client/index.js, that you include in the client code. I also recommend checking out the mdg:validated-method package, it makes using methods cleaner.
Update regarding the update in the question:
Yes, that seems like it would work, I think you got the point :)
As a minor detail, as I said, you might want to consider importing app-name/imports/server/trades-methods.js somewhere in your client code as well, i.e. in a file like app-name/client/main.js. This would enable the client to run a simulation of the method and update the UI immediately for better user experience. Don't do this if you don't want to expose some super-secret server code to the client though.
Update 2 in the question
Within the /imports folder, there are no special folder names - so you can import a file from /imports/server in your client side code. However, I do recommend placing code that is only meant for the server, like publications, in a folder named server, and not placing code that is meant to be used from both sides to a folder named server or client. Thus you might want to move your trades-methods.js file outside your /imports/server folder anyway. However this is only for clarity, Meteor does not care about folder names inside /server!
I really, really recommend you to read the Meteor guide, particularly the chapter on application structure and checking out the structure of the related example app. You'll save so much time in the long run!