Typescript error: import framework7/lite-bundle

1

Typescript showing an error on the following statement:

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';

The error is

Could not find a declaration file for module 'framework7/lite-bundle'. 'c:/Users/alona/dev/MyApp/node_modules/framework7/framework7-lite-bundle.esm.js' implicitly has an 'any' type.
  If the 'framework7' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'framework7/lite-bundle';`ts(7016)

I’m using the following dependency versions:

"devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^2.4.5",
    "@tsconfig/svelte": "^5.0.2",
    "svelte": "^4.2.0",
    "svelte-check": "^3.5.1",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
  "dependencies": {    "framework7": "^8.3.0",
    "framework7-icons": "^5.0.5",
    "framework7-svelte": "^8.3.0",
  }

Even with that tsc error, the application is running fine on the browser, however I don’t like leaving too many errors unattended.

For now I added a ts-ignore statement to ignore that error

// @ts-ignore
import Framework7 from 'framework7/lite-bundle';
2

Have you tried:

import Framework7 from 'framework7/lite/bundle';

3

Yes, I tried many documented variations, including this one, same typescript error.

4

I am having this same issue with version 7.1.5 of the framework. Were you able to fix this?

src/main.ts:15:24 - error TS7016: Could not find a declaration file for module 'framework7/lite-bundle'. '/Volumes/DATA/AppDevelopment/openhab-master4/git/openhab-webui/bundles/org.openhab.ui/web/node_modules/framework7/framework7-lite-bundle.esm.js' implicitly has an 'any' type.
  If the 'framework7' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'framework7/lite-bundle';`

15 import Framework7 from 'framework7/lite-bundle'

Here are my import statements:

import Framework7 from 'framework7/lite-bundle'
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'
import { getDevice } from 'framework7'
import 'framework7/css/bundle'
5

What worked for us was setting "moduleResolution": "bundler", in our tsconfig. YMMV.

6

This TypeScript import error usually happens when the path or package name isn’t resolved correctly by your bundler/TS config. Make sure you’re importing from the correct entry point — for Framework7 Lite it should be something like:

import Framework7 from ‘framework7/lite-bundle’;

Also check your tsconfig.json paths and moduleResolution settings to ensure they align with the installed package structure. Sometimes deleting node_modules and reinstalling fixes mismatched types or incorrect exports. If you’re still hitting the error, confirming the installed version matches the import syntax helps too.