Views as Tabs with TabLinks does not work with "framework7/lite"

1

This is my app.tsx:

import React from 'react';
import { App, Appbar, Views, View, Page, Navbar, Toolbar, Link, Block } from 'framework7-react';

    <App>
    			<Appbar>
    				<div>AppBar</div>
    			</Appbar>
    			<Views tabs>
    				<View id="view_a" name="view-a" tab>
    					<Page name="page-a">
    						<Navbar title="Content A" />
    					</Page>
    				</View>
    				<View id="view_b" name="view-b" main tab tabActive>
    					<Page name="page-b">
    						<Navbar title="Content B" />
    					</Page>
    				</View>
    				<Toolbar tabbar bottom>
    					<Link tabLink="#view_a">A</Link>
    					<Link tabLink="#view_b" tabLinkActive>B</Link>
    				</Toolbar>
    			</Views>
 </App>

And this is my index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import f7 without components (=>this is the reason for this issue)
import Framework7 from 'framework7/lite';

import Framework7React from 'framework7-react';

Framework7.use(Framework7React);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('app')
);

The above renders without issues, however, switching tabs by click does not work. It only works if I change this:

// import f7 without components
import Framework7 from 'framework7/lite';

to this:

// import f7-bundle with all components
import Framework7 from 'framework7/lite-bundle';

The question is: why does it not work with ‘framework7/lite’? As you see in app.tsx, I imported all the components which I use in my code.

2

I’m not sure how much relevant my answer will be but I have found out that if your are using React.StrictMode there are problems with F7.

The solution at least in my case was changing

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('app')
);

to

ReactDOM.render(
  React.createElement(App),
  document.getElementById('app')
);
3

You also need to import relevant Core modules (e.g. Toolbar, etc.) Framework7 Package Structure | Framework7 Documentation

Create project with F7-CLI and select custom F7 modules to see how it is done there