'Cannot find module 'framework7-vue/bundle' or its corresponding type declarations' on brand new project. What needs to be changed?

Question

I am trying to learn a stack to use Vue to make mobile apps. I ended up finding that people use Capacitor + Framework7, so I created a new project and followed the installation guides for both Capacitor and Framework7. The problem is I'm getting an error when trying to include registerComponents in that it can't find framework7-vue/bundle. I can see it being exported in the package, so I'm curious if anyone has a solution to this? I had to change the Framework7 import to something that wasn't referenced in the docs so I'm wondering if that is the case for the framework7-vue/bundle import as well?

This is my main.ts, very bare bones as I am just beginning with this project.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import Framework7 from "framework7/lite/bundle";
import Framework7Vue, { registerComponents } from "framework7-vue/bundle";

Framework7.use(Framework7Vue);

const app = createApp(App);
registerComponents(app);

app.use(router).mount("#app");

I've tried importing from some of the different classes exposed in the framework7-vue package, to no avail. There was a user in the framework7 forum that had experienced the same issue, but there was no solution there

Answer 1

It's hard to know exactly what is the issue, without having a look at your TS config, and what linting extension you are using (I assume you use VSCode).

Try with the following default files:

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "allowJs": true
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
  "compilerOptions": {
    "composite": true,
    "types": ["node"]
  }
}

If you use ViteJS: vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

Finally, make sure these packages are updated at least to the following versions:

"@capacitor/android": "^5.5.1",
"@capacitor/core": "^5.5.1",
"@capacitor/ios": "^5.5.1",
"framework7": "^8.3.0",
"framework7-vue": "^8.3.0",
"vue": "^3.3.7",
"@types/node": "^20.8.9",
"@vitejs/plugin-vue": "^4.4.0",
"@vue/tsconfig": "^0.4.0",
"typescript": "~5.2.2",
"vite": "^4.5.0",
"vue-tsc": "^1.8.22"

---

After that, you have a few options:

• You can try importing it as an ESModule: https://framework7.io/vue/package
• Use a boilerplace that works, you can find them on Github easily: https://github.com/topics/framework7-vue?o=desc&s=updated
• Your imports seem to be okay, but you can double check with source code.
  • Imports mapping: https://github.com/framework7io/framework7/blob/master/packages/vue/package.json
  • Source code: https://github.com/framework7io/framework7/tree/master/src/vue