Cannot import Javascript file in other Javascript file

Question

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.

Are you exporting two functions? Can you provide information about dom_creator.js? — Petyor
– Petyor, Commented Jan 8, 2021 at 12:34
You can't* import from non es6 module. You have several options to accomplish this: 1 - use <script type="module"> to force browser treat your code as module (note that IE not supports this) 2 - use bundler like webpack, browserify, parcel to bundle your code into one piece of code 3 - expose needed functionality updating the window object: window.utils = {do: function(){}} — Drag13
– Drag13, Commented Jan 8, 2021 at 12:37

myCodeIsTrash · Accepted Answer · 2023-04-23 12:13:55Z

1

the problem maybe in html code when you tried to import js files

add TYPE = "MODULE" to script element

html code:

<script type="module" src="./myscript.js"> </script>

js file:

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

print('hello word');

// 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');

edited Apr 23, 2023 at 12:13

answered Jul 8, 2022 at 11:09

myCodeIsTrash

1962 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pouya Jabbarisani · Accepted Answer · 2021-01-08 12:44:20Z

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 🤔

Collectives™ on Stack Overflow

Cannot import Javascript file in other Javascript file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related