Issue in importing a typescript class : "can't resolve " error message

Question

I need your trained eye. I do not understand why this happens, and it must be something really easy and "stupid":
in './tabs/rectangle.ts' :

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) 

Executing I get this error :

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)
    using description file: /home/raphy/Browsering/package.json (relative path: ./src/main/tabs/rectangle)
      no extension
        /home/raphy/Browsering/src/main/tabs/rectangle doesn't exist
      .jsx
        /home/raphy/Browsering/src/main/tabs/rectangle.jsx doesn't exist
      .js
        /home/raphy/Browsering/src/main/tabs/rectangle.js doesn't exist
      ts
        /home/raphy/Browsering/src/main/tabs/rectanglets doesn't exist
      as directory
        /home/raphy/Browsering/src/main/tabs/rectangle doesn't exist

Just the import of the class works fine:

import { Rectangle } from './tabs/rectangle'

(base) raphy@pc:~/Browsering$ yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 7.9 KiB [compared for emit] (name: main)
./src/main/main.ts 5.14 KiB [built] [code generated]
external "path" 42 bytes [built] [code generated]
external "electron" 42 bytes [built] [code generated]
webpack 5.72.1 compiled successfully in 4443 ms

assets by path assets/css/ 26.3 KiB
  assets by path assets/css/*.css 20.3 KiB
    asset assets/css/global.css 19.8 KiB [compared for emit] [from: src/assets/css/global.css] [copied]
    asset assets/css/table.css 568 bytes [compared for emit] [from: src/assets/css/table.css] [copied]
  asset assets/css/App.scss 5.26 KiB [compared for emit] [from: src/assets/css/App.scss] [copied]
  asset assets/css/postcss/app.pcss 721 bytes [compared for emit] [from: src/assets/css/postcss/app.pcss] [copied]
assets by path *.js 3.99 MiB
  asset app.js 3.93 MiB [compared for emit] (name: app)
  asset style.js 66.8 KiB [compared for emit] 

If I put the code in Typescript Playground it works fine:

   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)
  }

  const square = new Rectangle(10,10)
  console.log("square.area: ", square.area)

  const square_2 = new Rectangle(20,20)
  console.log("square_2.area: ", square_2.area)
                                           
  class MyNewClass {
    public static instance = new MyNewClass()
  }

  const mynewinstance = MyNewClass.instance

  console.log(mynewinstance)

Output in the Typescript Playground :

[LOG]: "square.area: ",  100 
[LOG]: "square_2.area: ",  400 
[LOG]: MyNewClass: {} 

I've also put the same code into a CodeSandbox repo, and there it works fine: https://codesandbox.io/s/elegant-driscoll-4yx9z8 . So... I really do not understand why in my project the same code give that error message

This is the tsconfig.js file:

     {
      "compilerOptions": {
        "typeRoots": ["./node_modules/@types"],
        "target": "ESNext",
        "module": "commonjs",
        "lib": ["dom", "esnext"],
        "outDir": "dist",
        //"jsx": "react",
        "jsx": "react-jsx",
        "baseUrl": "./src",
        "paths": {
          "@sections/*": ["app/sections/*"],
          "@app/*": ["app/*"]
        },
        "strict": true,
        "sourceMap": true,
        "skipLibCheck": true,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "allowJs": true
      },
      "include": ["./src/**/*.ts", "./src/**/*.tsx"],
      "exclude": [
        "src/index.js",
        "dist",
      ]
    }

Other info:

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

How to make it work?

Answer 1

I "solved" the problem merging two tsconfig.json templates: one for node 16 and one for react :

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",

  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
    "outDir": "dist",
    "lib": ["es2021", "dom"],
    "module": "commonjs",
    "target": "es2021",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "moduleResolution": "node",
    "allowJs": true,
    "noImplicitAny": false
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "src/index.js",
    "dist",
  ]
}