Could you lend me your expertise? I'm puzzled by this issue that seems to be quite simple and straightforward:
export class Rectangle {
height: number = 0
width: number = 0
constructor(height: number, width: number) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
public static instance = new Rectangle(2,2)
}
In main.ts:
import { Rectangle } from './tabs/rectangle'
const square = new Rectangle(10,10)
console.log("square.area: ", square.area)
When I run this code, I encounter the following error message:
ERROR in ./src/main/main.ts 36:20-47
Module not found: Error: Can't resolve './tabs/rectangle' in '/home/raphy/Browsering/src/main'
resolve './tabs/rectangle' in '/home/raphy/Browsering/src/main'
using description file: /home/raphy/Browsering/package.json (relative path: ./src/main)
... (error message continues)
The import of the class works perfectly fine:
import { Rectangle } from './tabs/rectangle'
(base) raphy@pc:~/Browsering$ yarn start
... (output continues)
If I test the same code in Typescript Playground, it runs without any issues:
class Rectangle{
... (code continues)
}
... (more code)
console.log(mynewinstance)
Output in the Typescript Playground:
[LOG]: "square.area: ", 100
[LOG]: "square_2.area: ", 400
[LOG]: MyNewClass: {}
I also tried running the code in a CodeSandbox environment, and it worked flawlessly: https://codesandbox.io/s/elegant-driscoll-4yx9z8. So, I am uncertain about why I encounter the error message in my project.
Here is the content of the tsconfig.js file:
{
"compilerOptions": {
... (options continue)
},
"include": ["./src/**/*.ts", "./src/**/*.tsx"],
"exclude": [
"src/index.js",
"dist",
]
}
Additional information:
node : v16.15.0
"typescript": "^4.5.4",
"webpack": "^5.23.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0"
O.S. : Ubuntu 20.04 Desktop
Any insights on how to resolve this issue?