V4.0.0 Typescript "could not find module" error

I use vue-cli3 to create my typescript base project.

After

npm install --save-dev framework7 framework7-vue

I modified my main.ts to:

import Vue from 'vue';
import App from './App.vue';
import store from './store';
import './registerServiceWorker';

// Import Framework7-Vue Plugin
import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle';

// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle';

// Import Framework7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import './css/icons.css';
import './css/app.scss';

// Init Framework7-Vue Plugin
Framework7.use(Framework7Vue);

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Then I got the following error message.

ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
10:32 Could not find a declaration file for module './components/accordion-content'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/accordion-content.js' implicitly has an 'any' type.
     8 | import { Utils } from 'framework7/utils/utils';
     9 | 
  > 10 | import f7AccordionContent from './components/accordion-content';
       |                                ^
    11 | import f7AccordionItem from './components/accordion-item';
    12 | import f7AccordionToggle from './components/accordion-toggle';
    13 | import f7Accordion from './components/accordion';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
11:29 Could not find a declaration file for module './components/accordion-item'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/accordion-item.js' implicitly has an 'any' type.
     9 | 
    10 | import f7AccordionContent from './components/accordion-content';
  > 11 | import f7AccordionItem from './components/accordion-item';
       |                             ^
    12 | import f7AccordionToggle from './components/accordion-toggle';
    13 | import f7Accordion from './components/accordion';
    14 | import f7ActionsButton from './components/actions-button';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
12:31 Could not find a declaration file for module './components/accordion-toggle'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/accordion-toggle.js' implicitly has an 'any' type.
    10 | import f7AccordionContent from './components/accordion-content';
    11 | import f7AccordionItem from './components/accordion-item';
  > 12 | import f7AccordionToggle from './components/accordion-toggle';
       |                               ^
    13 | import f7Accordion from './components/accordion';
    14 | import f7ActionsButton from './components/actions-button';
    15 | import f7ActionsGroup from './components/actions-group';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
13:25 Could not find a declaration file for module './components/accordion'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/accordion.js' implicitly has an 'any' type.
    11 | import f7AccordionItem from './components/accordion-item';
    12 | import f7AccordionToggle from './components/accordion-toggle';
  > 13 | import f7Accordion from './components/accordion';
       |                         ^
    14 | import f7ActionsButton from './components/actions-button';
    15 | import f7ActionsGroup from './components/actions-group';
    16 | import f7ActionsLabel from './components/actions-label';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
14:29 Could not find a declaration file for module './components/actions-button'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/actions-button.js' implicitly has an 'any' type.
    12 | import f7AccordionToggle from './components/accordion-toggle';
    13 | import f7Accordion from './components/accordion';
  > 14 | import f7ActionsButton from './components/actions-button';
       |                             ^
    15 | import f7ActionsGroup from './components/actions-group';
    16 | import f7ActionsLabel from './components/actions-label';
    17 | import f7Actions from './components/actions';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
15:28 Could not find a declaration file for module './components/actions-group'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/actions-group.js' implicitly has an 'any' type.
    13 | import f7Accordion from './components/accordion';
    14 | import f7ActionsButton from './components/actions-button';
  > 15 | import f7ActionsGroup from './components/actions-group';
       |                            ^
    16 | import f7ActionsLabel from './components/actions-label';
    17 | import f7Actions from './components/actions';
    18 | import f7App from './components/app';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
16:28 Could not find a declaration file for module './components/actions-label'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/actions-label.js' implicitly has an 'any' type.
    14 | import f7ActionsButton from './components/actions-button';
    15 | import f7ActionsGroup from './components/actions-group';
  > 16 | import f7ActionsLabel from './components/actions-label';
       |                            ^
    17 | import f7Actions from './components/actions';
    18 | import f7App from './components/app';
    19 | import f7Badge from './components/badge';

ā€¦

ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
39:26 Could not find a declaration file for module './components/list-button'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-button.js' implicitly has an 'any' type.
    37 | import f7Input from './components/input';
    38 | import f7Link from './components/link';
  > 39 | import f7ListButton from './components/list-button';
       |                          ^
    40 | import f7ListGroup from './components/list-group';
    41 | import f7ListIndex from './components/list-index';
    42 | import f7ListInput from './components/list-input';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
40:25 Could not find a declaration file for module './components/list-group'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-group.js' implicitly has an 'any' type.
    38 | import f7Link from './components/link';
    39 | import f7ListButton from './components/list-button';
  > 40 | import f7ListGroup from './components/list-group';
       |                         ^
    41 | import f7ListIndex from './components/list-index';
    42 | import f7ListInput from './components/list-input';
    43 | import f7ListItemCell from './components/list-item-cell';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
41:25 Could not find a declaration file for module './components/list-index'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-index.js' implicitly has an 'any' type.
    39 | import f7ListButton from './components/list-button';
    40 | import f7ListGroup from './components/list-group';
  > 41 | import f7ListIndex from './components/list-index';
       |                         ^
    42 | import f7ListInput from './components/list-input';
    43 | import f7ListItemCell from './components/list-item-cell';
    44 | import f7ListItemContent from './components/list-item-content';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
42:25 Could not find a declaration file for module './components/list-input'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-input.js' implicitly has an 'any' type.
    40 | import f7ListGroup from './components/list-group';
    41 | import f7ListIndex from './components/list-index';
  > 42 | import f7ListInput from './components/list-input';
       |                         ^
    43 | import f7ListItemCell from './components/list-item-cell';
    44 | import f7ListItemContent from './components/list-item-content';
    45 | import f7ListItemRow from './components/list-item-row';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
43:28 Could not find a declaration file for module './components/list-item-cell'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-item-cell.js' implicitly has an 'any' type.
    41 | import f7ListIndex from './components/list-index';
    42 | import f7ListInput from './components/list-input';
  > 43 | import f7ListItemCell from './components/list-item-cell';
       |                            ^
    44 | import f7ListItemContent from './components/list-item-content';
    45 | import f7ListItemRow from './components/list-item-row';
    46 | import f7ListItem from './components/list-item';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
44:31 Could not find a declaration file for module './components/list-item-content'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-item-content.js' implicitly has an 'any' type.
    42 | import f7ListInput from './components/list-input';
    43 | import f7ListItemCell from './components/list-item-cell';
  > 44 | import f7ListItemContent from './components/list-item-content';
       |                               ^
    45 | import f7ListItemRow from './components/list-item-row';
    46 | import f7ListItem from './components/list-item';
    47 | import f7List from './components/list';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
45:27 Could not find a declaration file for module './components/list-item-row'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-item-row.js' implicitly has an 'any' type.
    43 | import f7ListItemCell from './components/list-item-cell';
    44 | import f7ListItemContent from './components/list-item-content';
  > 45 | import f7ListItemRow from './components/list-item-row';
       |                           ^
    46 | import f7ListItem from './components/list-item';
    47 | import f7List from './components/list';
    48 | import f7LoginScreenTitle from './components/login-screen-title';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
46:24 Could not find a declaration file for module './components/list-item'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list-item.js' implicitly has an 'any' type.
    44 | import f7ListItemContent from './components/list-item-content';
    45 | import f7ListItemRow from './components/list-item-row';
  > 46 | import f7ListItem from './components/list-item';
       |                        ^
    47 | import f7List from './components/list';
    48 | import f7LoginScreenTitle from './components/login-screen-title';
    49 | import f7LoginScreen from './components/login-screen';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
47:20 Could not find a declaration file for module './components/list'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/list.js' implicitly has an 'any' type.
    45 | import f7ListItemRow from './components/list-item-row';
    46 | import f7ListItem from './components/list-item';
  > 47 | import f7List from './components/list';
       |                    ^
    48 | import f7LoginScreenTitle from './components/login-screen-title';
    49 | import f7LoginScreen from './components/login-screen';
    50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
48:32 Could not find a declaration file for module './components/login-screen-title'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/login-screen-title.js' implicitly has an 'any' type.
    46 | import f7ListItem from './components/list-item';
    47 | import f7List from './components/list';
  > 48 | import f7LoginScreenTitle from './components/login-screen-title';
       |                                ^
    49 | import f7LoginScreen from './components/login-screen';
    50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
    51 | import f7MenuDropdown from './components/menu-dropdown';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
49:27 Could not find a declaration file for module './components/login-screen'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/login-screen.js' implicitly has an 'any' type.
    47 | import f7List from './components/list';
    48 | import f7LoginScreenTitle from './components/login-screen-title';
  > 49 | import f7LoginScreen from './components/login-screen';
       |                           ^
    50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
    51 | import f7MenuDropdown from './components/menu-dropdown';
    52 | import f7MenuItem from './components/menu-item';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
50:32 Could not find a declaration file for module './components/menu-dropdown-item'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/menu-dropdown-item.js' implicitly has an 'any' type.
    48 | import f7LoginScreenTitle from './components/login-screen-title';
    49 | import f7LoginScreen from './components/login-screen';
  > 50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
       |                                ^
    51 | import f7MenuDropdown from './components/menu-dropdown';
    52 | import f7MenuItem from './components/menu-item';
    53 | import f7Menu from './components/menu';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
51:28 Could not find a declaration file for module './components/menu-dropdown'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/menu-dropdown.js' implicitly has an 'any' type.
    49 | import f7LoginScreen from './components/login-screen';
    50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
  > 51 | import f7MenuDropdown from './components/menu-dropdown';
       |                            ^
    52 | import f7MenuItem from './components/menu-item';
    53 | import f7Menu from './components/menu';
    54 | import f7Message from './components/message';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
52:24 Could not find a declaration file for module './components/menu-item'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/menu-item.js' implicitly has an 'any' type.
    50 | import f7MenuDropdownItem from './components/menu-dropdown-item';
    51 | import f7MenuDropdown from './components/menu-dropdown';
  > 52 | import f7MenuItem from './components/menu-item';
       |                        ^
    53 | import f7Menu from './components/menu';
    54 | import f7Message from './components/message';
    55 | import f7MessagebarAttachment from './components/messagebar-attachment';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
53:20 Could not find a declaration file for module './components/menu'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/menu.js' implicitly has an 'any' type.
    51 | import f7MenuDropdown from './components/menu-dropdown';
    52 | import f7MenuItem from './components/menu-item';
  > 53 | import f7Menu from './components/menu';
       |                    ^
    54 | import f7Message from './components/message';
    55 | import f7MessagebarAttachment from './components/messagebar-attachment';
    56 | import f7MessagebarAttachments from './components/messagebar-attachments';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
54:23 Could not find a declaration file for module './components/message'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/message.js' implicitly has an 'any' type.
    52 | import f7MenuItem from './components/menu-item';
    53 | import f7Menu from './components/menu';
  > 54 | import f7Message from './components/message';
       |                       ^
    55 | import f7MessagebarAttachment from './components/messagebar-attachment';
    56 | import f7MessagebarAttachments from './components/messagebar-attachments';
    57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
55:36 Could not find a declaration file for module './components/messagebar-attachment'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/messagebar-attachment.js' implicitly has an 'any' type.
    53 | import f7Menu from './components/menu';
    54 | import f7Message from './components/message';
  > 55 | import f7MessagebarAttachment from './components/messagebar-attachment';
       |                                    ^
    56 | import f7MessagebarAttachments from './components/messagebar-attachments';
    57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
    58 | import f7MessagebarSheetItem from './components/messagebar-sheet-item';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
56:37 Could not find a declaration file for module './components/messagebar-attachments'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/messagebar-attachments.js' implicitly has an 'any' type.
    54 | import f7Message from './components/message';
    55 | import f7MessagebarAttachment from './components/messagebar-attachment';
  > 56 | import f7MessagebarAttachments from './components/messagebar-attachments';
       |                                     ^
    57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
    58 | import f7MessagebarSheetItem from './components/messagebar-sheet-item';
    59 | import f7MessagebarSheet from './components/messagebar-sheet';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
57:36 Could not find a declaration file for module './components/messagebar-sheet-image'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/messagebar-sheet-image.js' implicitly has an 'any' type.
    55 | import f7MessagebarAttachment from './components/messagebar-attachment';
    56 | import f7MessagebarAttachments from './components/messagebar-attachments';
  > 57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
       |                                    ^
    58 | import f7MessagebarSheetItem from './components/messagebar-sheet-item';
    59 | import f7MessagebarSheet from './components/messagebar-sheet';
    60 | import f7Messagebar from './components/messagebar';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
58:35 Could not find a declaration file for module './components/messagebar-sheet-item'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/messagebar-sheet-item.js' implicitly has an 'any' type.
    56 | import f7MessagebarAttachments from './components/messagebar-attachments';
    57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
  > 58 | import f7MessagebarSheetItem from './components/messagebar-sheet-item';
       |                                   ^
    59 | import f7MessagebarSheet from './components/messagebar-sheet';
    60 | import f7Messagebar from './components/messagebar';
    61 | import f7MessagesTitle from './components/messages-title';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/framework7-vue.esm.bundle.d.ts
59:31 Could not find a declaration file for module './components/messagebar-sheet'. '/Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7-vue/components/messagebar-sheet.js' implicitly has an 'any' type.
    57 | import f7MessagebarSheetImage from './components/messagebar-sheet-image';
    58 | import f7MessagebarSheetItem from './components/messagebar-sheet-item';
  > 59 | import f7MessagebarSheet from './components/messagebar-sheet';
       |                               ^
    60 | import f7Messagebar from './components/messagebar';
    61 | import f7MessagesTitle from './components/messages-title';
    62 | import f7Messages from './components/messages';

ā€¦

ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
77:45 Cannot find module './components/timeline/timeline'.
    75 | import {Swiper as SwiperNamespace} from './components/swiper/swiper';
    76 | import {Tabs as TabsNamespace} from './components/tabs/tabs';
  > 77 | import {Timeline as TimelineNamespace} from './components/timeline/timeline';
       |                                             ^
    78 | import {Toast as ToastNamespace} from './components/toast/toast';
    79 | import {Toggle as ToggleNamespace} from './components/toggle/toggle';
    80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
78:39 Cannot find module './components/toast/toast'.
    76 | import {Tabs as TabsNamespace} from './components/tabs/tabs';
    77 | import {Timeline as TimelineNamespace} from './components/timeline/timeline';
  > 78 | import {Toast as ToastNamespace} from './components/toast/toast';
       |                                       ^
    79 | import {Toggle as ToggleNamespace} from './components/toggle/toggle';
    80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
    81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
79:41 Cannot find module './components/toggle/toggle'.
    77 | import {Timeline as TimelineNamespace} from './components/timeline/timeline';
    78 | import {Toast as ToastNamespace} from './components/toast/toast';
  > 79 | import {Toggle as ToggleNamespace} from './components/toggle/toggle';
       |                                         ^
    80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
    81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
    82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
80:43 Cannot find module './components/toolbar/toolbar'.
    78 | import {Toast as ToastNamespace} from './components/toast/toast';
    79 | import {Toggle as ToggleNamespace} from './components/toggle/toggle';
  > 80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
       |                                           ^
    81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
    82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
    83 | import {Typography as TypographyNamespace} from './components/typography/typography';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
81:43 Cannot find module './components/tooltip/tooltip'.
    79 | import {Toggle as ToggleNamespace} from './components/toggle/toggle';
    80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
  > 81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
       |                                           ^
    82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
    83 | import {Typography as TypographyNamespace} from './components/typography/typography';
    84 | import {Vi as ViNamespace} from './components/vi/vi';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
82:51 Cannot find module './components/touch-ripple/touch-ripple'.
    80 | import {Toolbar as ToolbarNamespace} from './components/toolbar/toolbar';
    81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
  > 82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
       |                                                   ^
    83 | import {Typography as TypographyNamespace} from './components/typography/typography';
    84 | import {Vi as ViNamespace} from './components/vi/vi';
    85 | import {View as ViewNamespace} from './components/view/view';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
83:49 Cannot find module './components/typography/typography'.
    81 | import {Tooltip as TooltipNamespace} from './components/tooltip/tooltip';
    82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
  > 83 | import {Typography as TypographyNamespace} from './components/typography/typography';
       |                                                 ^
    84 | import {Vi as ViNamespace} from './components/vi/vi';
    85 | import {View as ViewNamespace} from './components/view/view';
    86 | import {VirtualList as VirtualListNamespace} from './components/virtual-list/virtual-list';
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
84:33 Cannot find module './components/vi/vi'.
    82 | import {TouchRipple as TouchRippleNamespace} from './components/touch-ripple/touch-ripple';
    83 | import {Typography as TypographyNamespace} from './components/typography/typography';
  > 84 | import {Vi as ViNamespace} from './components/vi/vi';
       |                                 ^
    85 | import {View as ViewNamespace} from './components/view/view';
    86 | import {VirtualList as VirtualListNamespace} from './components/virtual-list/virtual-list';
    87 | 
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
85:37 Cannot find module './components/view/view'.
    83 | import {Typography as TypographyNamespace} from './components/typography/typography';
    84 | import {Vi as ViNamespace} from './components/vi/vi';
  > 85 | import {View as ViewNamespace} from './components/view/view';
       |                                     ^
    86 | import {VirtualList as VirtualListNamespace} from './components/virtual-list/virtual-list';
    87 | 
    88 | declare module './components/app/app-class' {
ERROR in /Users/enylin/Documents/projects/tutorial/f7-test/node_modules/framework7/js/framework7.d.ts
86:51 Cannot find module './components/virtual-list/virtual-list'.
    84 | import {Vi as ViNamespace} from './components/vi/vi';
    85 | import {View as ViewNamespace} from './components/view/view';
  > 86 | import {VirtualList as VirtualListNamespace} from './components/virtual-list/virtual-list';
       |                                                   ^
    87 | 
    88 | declare module './components/app/app-class' {
    89 |   interface Framework7Class<Events> extends ClicksNamespace.AppMethods{}
Version: typescript 3.3.1, tslint 5.12.1

What should I do to fix this?

I am not a Typescript user, but there are no typescript definitions for F7-Vue components, so this must be disabled somehow.

As for Core components i see there is a wrong typings file used, must be the one from package root folder: node_modules/framework7/framework7.d.ts I will fix it in next update. But there should be a way in TS to specify typings file as well

Issue with framework7-core typing errors must be fixed in 4.0.2

1 Like

Iā€™m encountering this same issue with 4.1. Was there a resolution?

1 Like

You can try this

1 Like

Is in the end possible to use class components with Vue and Framework7?

Yes, by using this plugin https://github.com/vuejs/vue-class-component

But i would better wait for Vue.js 3.x which will be class-based

1 Like

The issue still exists in version framework7-vue#5.4.5