This is a simple problem. I'm attempting to import modules from one javascript file to another, and then run it on Chrome. I'm using 2 javascript files and an html file, all in the same folder:
first js file (testfile1.js):
import {test} from 'testfile2.js';
test.func();
second js file (testfile2.js):
let f = function() {
console.log("TEST");
}
let test = {
func: f
};
export test;
The html file is plain, empty html file with a link to testfile1.js script in the header:
<script type="text/javascript" src="testfile1.js"></script>
Whenever I open the html file in chrome, I get the error:
testfile1.js:1 Uncaught SyntaxError: Unexpected token {
When I removed the brackets in the import statement, I get an unexpected identifier statement. Isn't this the proper way to import modules in the browser? Why is it not working at all?
Use JavaScript import() to dynamically load a module. The import() returns a Promise that will be fulfilled once the module is loaded completely. Use the async / await to handle the result of the import() .
You can import modules into a file in two ways, based on if they are named exports or default exports. Named exports are constructed using curly braces. Default exports are not.
Using Modules in the BrowserIt works by the browser downloading the module by making a GET request to do it. It's done asynchronously so that it's not blocking other things from loading. We can load a module in our code by defining the module and using a script tag to load it.
Imported modules are in strict mode whether you declare them as such or not. The import statement cannot be used in embedded scripts unless the script has a type=” module”. Here is an example of the import statement with the type module. The great thing about Javascript Modules is that you can import and export Functionality between files.
The great thing about Javascript Modules is that you can import and export Functionality between files. At any given point in time, your main HTML file will have to have at least one script tag that loads your main javascript file. Your script tag, in this case, has to have the new type attribute equal to the module, like this:
First of all, you need to include type="module" in the <script> element, to declare this script as a module. To import the main.js script, we use this: < script type = " module " src = " main.js " > </ script > You can also embed the module's script directly into the HTML file by placing the JavaScript code within the body of the <script> element:
This can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips. Use of native JavaScript modules is dependent on the import and export statements; these are supported in browsers as follows:
type="module"
not "text/javascript"
As per Jaromanda X's comment, you need to change the value of the type
attribute of the <script>
tag to "module"
as import { test } from 'testfile2.js'
is module code.
<script type="module" src="testfile1.js" />
import()
If you really don't feel like using type="module"
, any javascript file is allowed to use the dynamic import()
syntax, even without type="module"
.
However, the dynamic import has a caveat, the function import()
returns a promise, therefore, you are unable to use it synchronously. You must either await
or .then
a dynamic import to use the value it resolves to.
import('testfile2.js').then(({ test }) => {
// your code
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With