Meteor, React & F7 4.2.2 - Can't import anything

So I just want to start my first F7 app - using Meteor, React and all that nice stack! :slight_smile:
I am new to F7, but very familiar with standard ES6 and all that.

No matter what I try to do, I can’t get it to work or import any components:

My main.js entrypoint:

import Framework7 from 'framework7';
import Framework7React from 'framework7-react';
Framework7.use(Framework7React);

import App from '../ui/layouts/App';

render(<App />, document.getElementById('react-root'));

app.js:

import { F7App, Statusbar, View, Page, Navbar, Toolbar, Link } from 'framework7-react';
console.log(F7App, Statusbar, View); // --> undefined undefined undefined
// > all of these imports are UNDEFINED
import F7App from 'framework7-react/components/app';
// > not working at all, as this file has standard ES6 syntax - not supported by Meteor yet and thus throwing a "Unexpected identifier" Error due to the "import ..."

// ...

class App extends React.PureComponent {
  render() {
    return (
      <div id="app-root" className="root is-mobile">
        <MainProvider>
          <F7App params={f7params}>
            <Statusbar />
            <View main>
              <Page>
                <Navbar title="Awesome App"></Navbar>
                <Toolbar bottom>
                  <Link>Link 1</Link>
                  <Link>Link 2</Link>
                </Toolbar>
                <p>Page content goes here</p>
                <Link href="/about/">About App</Link>
              </Page>
            </View>
          </F7App>
        </MainProvider>
      </div>
    )
  }
}

export default withMainContext(App)

I am out of ideas, I tried importing any .js file inside the framework7-react package, anything I do either breaks the app or results in an undefined for every import.

Please help!

Thanks, cheers, Patrick

I am also facing same issue,
Can I know if you got any solution for this issue?

Two things:

I am importing like so: import { App as F7App, Statusbar, View, Page, Toolbar, Link, Navbar } from 'framework7-react/framework7-react.esm.js';

Additionally, I created an imports dir in my app-root dir and in there I put symlinks to the following packages inside my node_modues folder:

  • dom7
  • framework7
  • framework7-react
  • ssr-window
  • template7

See: https://guide.meteor.com/using-npm-packages.html#recompile