javascriptvue.jsvuejs3capacitorhtml-framework-7

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


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


Solution

  • 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: