Cannot find module '../../../../lib/esm/index.js'

Question

In file /atoms/overlays/Sheet/styles I do import {maxHeight} from '.' And causing the following error

Error: Cannot find module '../../../../lib/esm/index.js'
Require stack:
- /Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/styles.js
- /Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/index.js
- /Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/index.js
- /Users/x/Desktop/project/node_modules/@project/commonjs/index.js
- /Users/x/Desktop/project/.next/server/pages/_document.js
- /Users/x/Desktop/project/node_modules/next/dist/server/require.js
- /Users/x/Desktop/project/node_modules/next/dist/server/load-components.js
- /Users/x/Desktop/project/node_modules/next/dist/build/utils.js
- /Users/x/Desktop/project/node_modules/next/dist/server/dev/hot-middleware.js
- /Users/x/Desktop/project/node_modules/next/dist/server/dev/hot-reloader-webpack.js
- /Users/x/Desktop/project/node_modules/next/dist/server/lib/router-utils/setup-dev.js
- /Users/x/Desktop/project/node_modules/next/dist/server/lib/router-server.js
- /Users/x/Desktop/project/node_modules/next/dist/server/lib/start-server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at /Users/x/Desktop/project/node_modules/next/dist/server/require-hook.js:54:36
    at Hook.Module.require (/Users/x/Desktop/project/node_modules/dd-trace/packages/dd-trace/src/ritm.js:54:29)
    at mod.require (/Users/x/Desktop/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/styles.js:1:259)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at Hook.Module.require (/Users/x/Desktop/project/node_modules/dd-trace/packages/dd-trace/src/ritm.js:72:26)
    at mod.require (/Users/x/Desktop/project/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/index.js:1:479) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/styles.js',
    '/Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/Sheet/index.js',
    '/Users/x/Desktop/project/node_modules/@project/commonjs/atoms/overlays/index.js',
    '/Users/x/Desktop/project/node_modules/@project/commonjs/index.js',
    '/Users/x/Desktop/project/.next/server/pages/_document.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/require.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/load-components.js',
    '/Users/x/Desktop/project/node_modules/next/dist/build/utils.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/dev/hot-middleware.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/dev/hot-reloader-webpack.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/lib/router-utils/setup-dev.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/lib/router-server.js',
    '/Users/x/Desktop/project/node_modules/next/dist/server/lib/start-server.js'
  ],
  page: '/'
}

But if I import {maxHeight} from './' it works fine!

Knowing that

1. this is a typescript project (and building using swc)
2. there is a circular dependancy between these 2 files (but still, one style works, but the other doesn't)

Here's my tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "baseUrl": "./",
    "target": "es2019",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "typeRoots": ["src/types", "node_modules/@types"],
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "noImplicitAny": true,
    "incremental": true,
    "strictNullChecks": true,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*"]
}

And here's my swcrc-esm.json file

{
  "$schema": "https://json.schemastore.org/swcrc",
  "exclude": [".*stories\\..*", ".*test\\..*", ".*spec\\..*", "storybook"],
  "env": {
    "targets": ["chrome 64", "edge 79", "firefox 67", "opera 51", "safari 12"],
    "mode": "entry",
    "coreJs": "3.22"
  },
  "module": {
    "type": "es6"
  },
  "jsc": {
    "paths": {
      "@/*": ["./src/*"]
    },
    "baseUrl": "./",
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "externalHelpers": false,
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  },
  "minify": true,
  "sourceMaps": "inline"
}