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.

• Petyor: Are you exporting two functions? Can you provide information about dom_creator.js?
• Drag13: 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(){}}
• Juhil Kamothi: try this stackoverflow.com/questions/48211891/…

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

Answer 2

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 🤔