Problem 1:
You have a circular dependency - app.js imports calc.js, but calc.js imports app.js.
Usually the module system will ensure all of a module's dependencies are executed before the module itself, but this is impossible when your dependency tree has cycles - it has to pick one of them to run first. In this case, calc.js is run first, at which point Test isn't yet defined!
There are ways to work around this if you're careful, but cyclic dependencies are pretty much always a sign that you're structuring your code wrong - the best solution is to reorganize it so you no longer have a cycle.
Problem 2:
ES2016 modules don't execute in the global scope. If you want to make something available to the window as a whole, you need to be explicit:
window.Calc = Calc;
How to use a external Javascript class in html? - Stack Overflow
How to export and import class in javascript
javascript - How to import class from `js` file inside `html` file? - Stack Overflow
how to import a javascript class
after test i think the problem is your format
<!DOCTYPE html>
<html lang="en">
<head>
<script src="component.js"></script>
<script>
var user = new TryClass("John");
user.sayHi();
</script>
</head>
<body>
</body>
</html>
you lost</script> after <script src="./component.js" />,i guess this is the worst error though you also lost </html> and <head></head>
Please try by
var TryClass = function(name){
this.name = name;
}
TryClass.prototype.sayHi = function () {
alert( this.name );
}
You are only importing the class, but not making an instance of the class
Try
var myInstance = new Example()
myInstance.test()
If you want to call a method as a class method (without creating an object instance) you can try static methods.
You can change the file2.js as,
export default class Example {
static test() {
console.log('hello world');
}
}
then call it by using the class name in file1.js as
import Example from './file2';
console.log(Example.test());
Refer James Maa answer if you want to call it as an instance method.
It depends on what environment you're running in. In a web browser you simply need to make sure that file1.js is loaded before file2.js:
<script src="file1.js"></script>
<script src="file2.js"></script>
In node.js, the recommended way is to make file1 a module then you can load it with the require function:
require('path/to/file1.js');
It's also possible to use node's module style in HTML using the require.js library.
// Create Customer class as follows:
export default class Customer {
getName() {
return 'stackoverflow';
}
}
// Import the class
// no need for .js extension in path cos it gets inferred automatically
import Customer from './path/to/Customer';
// OR
const Customer = require('./path/to/Customer')
// Use the class
var customer = new Customer();
var name = customer.getName();
I went through this and I've a solution with a third js file as module.
rectangle.js will be same and myHifiRectangle.js file have only one modification.
import Rectangle from './rectangle.js';
export default class MyHiFiRectangle extends Rectangle {
constructor(height, width) {
super(height,width);
this.foo= "bar";
}
}
Now, we need a third file which will be a module file, let say, script.js
import MyHiFiRectangle from './myHifiRectangle.js'
var v = new MyHiFiRectangle(2,4);
console.log(v.foo);
Now, the third file, script.js should be made a module. More on modules here. I have all three files under modelJS folder.
<script type="module" src="/modelJS/script.js"></script>
Now, when you run, you should see 'bar' getting printed in the developer tool's console tab.
I'm also adding an answer after getting hint from curiou.netter's answer in this thread.
I will point out the errors in precise sequential manner in the original code files. By the way, I was able to fix the issue without involving additional script.js file:
While referring to JS modules, the script type should be module instead. I was referring to myHiFiRectancle.js like a regular JS file using src tag as:
src="Scripts/myHiFiRectangle.js"I also imported MyHiFiRectangle module. Here is how the head tag now looks in the test.html file after fixing this error:
<head> <meta charset = "UTF-8"> <title>Javascipt by Rasik Bihari Tiwari</title> <script type="module"> import MyHiFiRectangle from './scripts/myHiFirectangle.js'; var v = new MyHiFiRectangle(2,4); console.debug(v.foo); </script> </head>export default statement was missing in myHiFiRectangle.js file. Every class has to be exported as a module when it has to be used from a different place. The rectified myHiFiRectangle.js file looks like below:
import Rectangle from './rectangle.js'; export default class MyHiFiRectangle extends Rectangle { constructor(height, width) { super(height,width); this.foo= "bar"; } }My script files had another error in the way I was importing modules.
Incorrect way:
import Rectangle from 'rectangle.js'; import MyHiFiRectangle from '/scripts/myHiFirectangle.js';It causes below error which is self explanatory:
Uncaught TypeError: Failed to resolve module specifier "rectangle.js". Relative references must start with either "/", "./", or "../".
Correct way:
import Rectangle from './rectangle.js'; import MyHiFiRectangle from './scripts/myHiFirectangle.js';