Node setup with Express doesn't work with file extension or with jsconfig (ES6)

Question

So I have been playing around this part of trying to understand why my project that I am developing with Express JS and type of modules to use the ES6 of javascript (import instead of require).

I am using node 16.14 with VS Code as my IDE. This is my package.json structure:

{
    "name": "node-api",
    "version": "1.0.0",
    "description": "Node API",
    "main": "./application.js",
    "exports": "./application.js",
    "type": "module",
    "scripts": {
        "start": "nodemon application.js"
    },
    "dependencies": {
        "body-parser": "^1.19.2",
        "dotenv": "^16.0.0",
        "express": "^4.17.3",
    },
    "devDependencies": {
        "nodemon": "^2.0.15"
    }
}

And this is my folder structure:

config/
controllers/
helpers/
models/
node_modules/
routes/
.env
application.js
jsconfig.json
package-lock.json
package.json

Here is my application.js file code:

// Import our environment
import env from '#config/env';

// Import vendor packages
import express from 'express';

// Import our routes
//import routes from './routes/index.js';
//import routes from '#routes';
import routes from '@routes'

// Init our app
const app = express();

// Set the app middlewares
app.use(express.json());

// Set the app to use the routes imported above
app.use('/', routes);

// Listen to the server in localhost:3000
app.listen(3000);

And finally my jsconfig.json file:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@controllers/*": [
                "./controllers/*"
            ],
            "@helpers/*": [
                "./helpers/*"
            ],
            "@models/*": [
                "./models/*"
            ],
            "@routes": [
                "./routes/index.js"
            ]
        }
    },
    "exclude": ["node_modules"]
}

Now from what I understand from this documentation https://code.visualstudio.com/docs/languages/jsconfig is that the file can map out relatives paths so that we don't have to keep going up parent directories in order to reach other files in case we get a lot of nested folders.

So my 1st question is: Why does this not work with on my project although VS Code does auto-complete when I type the import statement. I keep getting errors of ERR_INVALID_MODULE_SPECIFIER or ERR_MODULE_NOT_FOUND after trying several ways when trying to import the routes/index.js file using the alias of @routes.

Also since this is node and in their documentation https://nodejs.org/api/packages.html#modules-loaders they refer that using the ES6 module loader you require to explicitly mention the filename extension on imports but only for local folder of your own package not with like express or body parser.

My 2nd question is: Why in other projects using node to parse/compile that require node modules to do so, they don't need the file extension even using ES6 imports?