I'm using Laravel with Vite. But I'm having a trouble. I have multiple JS files and including them whenever I want to use. But I cannot use the function I created in one file in another file.
I have an app.js file looks like this:
import jQuery from 'jquery';
window.$ = jQuery;
import './bootstrap';
import './main.js';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
And I have a function like this in main.js:
function testFunction() {
alert('test');
}
I put Vite definitions to my layout blade like this:
#vite(['resources/css/app.css', 'resources/js/app.js'])
I have another page contains another JS file like this:
#extends('layouts.app')
#section('content')
#endsection
#section('scripts')
#vite(['resources/js/edit-note-page.js'])
#endsection
And in that JS file I want to use the function that I mentioned in the beginning like this:
testFunction();
But I'm getting an Uncaught ReferenceError: testFunction is not defined error in console. I couldn't figure it out. What is the correct way to do it?
I'm using Laravel with Vite. I have multiple JS files and including them whenever I want to use. But I cannot use the function I created in one file in another file.
Each file is going to be wrapped to actually prevent what you are attempting to do, unless explicitly defined on the window object (notice how window.Alpine = Alpine; is set in your app.js). An alternative and more modern way is to use exports. Here is an example using your file structure.
main.js:
function testFunction() {
alert('test');
}
export default testFunction;
edit-note-page.js:
import testFunction from './path/to/file/name';
...code here
The path to the file in the import does not need the extension .js at the end.
Note: After this change, you no longer need import './main.js'; inside of app.js
Related
So in my code it gives me error FunctionOfMainJs is not defined which is function made of main.js so what can i do for run normal js code and also use import in same file
main.js
import {CreateDropDown} from "./asset/js/customdropdown.js";
new CreateDropDown([{"ImagePath":null,"OptionValue":"text1"}],"Container");
function FunctionOfMainJs(){
alert("hey guys");
}
FunctionOfMainJs();
Are you trying to call this function in another .js file? If so you will need to export the function:
module.exports = {FunctionOfMainJS}
I'm trying to import a file into TypeScript that's basically just a js file that you'd put into a tag. I've tried a few different things.
// global.d.ts
declare module 'myfile.js'
Inside of the react file:
// component.tsx
import { foo } from '../lib/myFile.js' // This is saying it is not a module
Inside of the js file, it looks like this a few times so not sure how I need to reference the file:
(function( something ) {
something.Foo = function (){}
}(window.something = window.something || {}));
Any thoughts on how I could use this file? Do I need to go through and declare typings for everything in it?
EDIT: I've added allowJS to my tsconfig but it still doesn't work.
You can only import what is exported from the file.
If your file contains only immediately invoked functions, or top level code, you only need to import the file itself like this:
import '../lib/myFile.js'
This is a little weird, however. I would suggest wrapping everything with a function and exporting then importing that function instead.
I am writing a javascript app and implementing three.js. To use this I use the script tag in my html file:
<script src="./scene.js" type="module"></script>
I have my main index.js file that contains all of the parameters and functions for my main index.html page. In this index.js I have an array of objects which I would like to pass to scene.js
I do not know how to achieve this. My understanding is that to export functions/parameters, the js file needs to be a module (declared in html using type="module"). If this is not declared as a module, I get the error 'unexpected token 'export''
If I make this a module though, I cannot reference functions in my html file that are triggered by buttons.
My index.html has my two scripts defined as this:
<script src="./index" ></script>
<script src="./scene.js" type="module"></script>
My index.js I want to export one array:
export var myArray = []
My three.js file contains the following first few lines:
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import { myArray } from './index.js';
I am confused how to continue. I cannot have everything in the one js file, as I could not import my three module
For a project, I'm using Django for my backend, HTML/CSS/JS for frontend.
For one HTML page, I use two JS files: dom_creator.js and console_page.js. I would like to use the functions of dom_creator in console_page, but whatever I try, I cannot find the right statement to import (and many of the ES6 import statements even make my console_page.js to stop working).
I also have a module imported to my HTML (console_module.js). In that file, I have no issue importing dom_creator.js with
import {function1, function2} from "./dom_creator.js"
How would I be able to import functions from dom_creator in console_page.js (which is not a module)? I've tried all suggestions on Stack Overflow, but none of them seem to work.
the problem maybe in html code when you tried to import js files
add TYPE = "MODULE" to script element
script type="module" src="./myscript.js" script
and at js file to import, use
function print(y){
console.log(y);
}
export {print};
to import the x function in another js file do the following:
import {print} from "./main.js" // dont forget .js
// another way to import all functions
import * as main from "./main.js" // dont forget .js
//to use the last one:
let variable = main.print('hello word');
For importing a function into the other file, first, you need to export it,
so if you are using es5 (mostly the case in NodeJs) you need to export it as below:
var myfunction = function () {}
module.exports = { myfunction }
and in newer versions (es6+) you can use export like this:
var myfunction = function () {}
export myfunction;
// then you can import it like: import {myfuntion} from 'file.js';
// or with another name: import {myfuntion as john} from 'file.js';
// or export it as default like:
export default myfunction;
// then you can import it like import myfuntion from 'file.js';
// or any other custom name: import john from 'file.js';
the only thing I couldn't understand from your question is the relation of with question with Django 🤔
Nooby question:
I've got file main.js with module let myModule = {}, defined there inside $(document).ready(function(). And I have another file summary.js where I would like to use it. I declare them all in the head of html file:
<script src="js/main.js"></script>
<script src="js/summary.js"></script>
I would like to use myModule module in the summary.js file and extend it. So I would like to be able to define: myModule.summary = {}. For now I receive the error myModule is undefined even though all js files are uploaded correctly (I can see them in debugger in dev console of the browser). I expect I have to export the mdrx module somehow but export default mdrx at the end of main.js does not do the job. How to do it correctly? I read the documentation but it seems like structural problem as I couldn't figure that out. Can that be that the myModule is not loaded yet before loding summary.js? If so how to prevent that?
You can use the type attribute to achieve this:
<script src="js/main.js" type="module"></script>
Then you can import the module in other JavaScript files:
import yourModule from './main.js'
The problem was that the whole myModule was defined inside function() (called within document.ready event). Moving it outside that solved the problem.