I am trying to make a web app without any packager, at least for the development variant. I will set my express backend to serve certain paths from node_modules to frontend.

My project structure is:

• server
  • node_modules
    • ...
  • web
    • js
      • my_app.js
    • index.html

The server is set to serve vue like this:

const app = express();

// Allowed modules to appear on the frontend
const allowedModules = ['vue'];

// Middleware to serve selected node_modules
allowedModules.forEach(module => {
    // TODO: Maybe not a static() instance per module? There has to be a better way
    app.use(
        `/node_modules/${module}`,
        express.static(path.join(moduledir, '../node_modules', module),
            { 
                immutable: true,
                maxAge: T_DAYS_MS
            }
        )
    );
});

And this is how I import it in my_app.js:

import * as vue_core from "/node_modules/vue/dist/vue.esm-browser.js"

const app = {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: `<div>{{ message }}</div>`
};

vue_core.createApp(app).mount('#app');

And that works fine. I see this in the console when I load index.html in browser, indicating that vue imported correctly:

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.

But, the problem is type hints. I am new to vue and I want to get detailed type hints and documentation directly in IDE.

What I tried:

• Installed @types/vue

• Set my jsconfig.json to know where the file I am importing is located in compilerOptions:

   "paths": {
       "/node_modules/vue/*": ["./node_modules/vue/*"],
   },
  

• Tried to also do a module declaration in web/module_declarations/vue_helper.d.ts:

   declare module "/node_modules/vue/dist/vue.esm-browser.js" {
       import Vue from 'vue';
       export default Vue;
   }
  

Finally, I tried to also use JSDoc import and type coercion:

import * as vue_core from "/node_modules/vue/dist/vue.esm-browser.js"

/**
 * @typedef {import("vue")} VueLib
 **/
/** @type {VueLib} **/
// @ts-ignore
const vue = vue_core;

However, I still have not one but TWO problems:

1. The import statement for vue.esm-browser.js shows the following error:

   Could not find a declaration file for module '/node_modules/vue/dist/vue.esm-browser.js'. 'root/node_modules/vue/dist/vue.esm-browser.js' implicitly has an 'any' type.ts(7016)

2. The symbols imported from vue do not match what's in vue.esm-browser.js. The type hints from @types/vue seem to export VueStatic and not any of the vue functions that I actually am importing from the .js file.