How to integrate Framework 7 with shadow-cljs and clojurescript

Question

When I try to initialize Framework7 and Framework7-React within a clojurescript project, using shadow-cljs I get errors like this:

f7.js:31 Uncaught TypeError: Framework7 is not a constructor
   at Object.init (f7.js:31)
   at F7App.value (app.js:162)
   at commitLayoutEffects (react-dom.development.js:21965)
   at HTMLUnknownElement.callCallback (react-dom.development.js:363)
   at Object.invokeGuardedCallbackImpl (react-dom.development.js:412)
   at invokeGuardedCallback (react-dom.development.js:467)
   at commitRootImpl (react-dom.development.js:25025)
   at exports.unstable_runWithPriority (scheduler.development.js:816)
   at runWithPriority$2 (react-dom.development.js:12189)
   at commitRoot (react-dom.development.js:24866)

The Framework7 initialization normally consists of nothing more than the following

// Import Framework7
import Framework7 from 'framework7/framework7-lite.esm.bundle.js';

// Import Framework7-React Plugin
import Framework7React from 'framework7-react';

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

// Init F7 React Plugin
Framework7.use(Framework7React);

There is a hacky solution, the involves two separate build pipelines in order to get Framework7 up and running in a simple shadow-cljs sample project.

I created a a test project that shows both versions, the non-working clojurescript version, where the error occurs can be run by:

npx shadow-cljs watch :direct-no-webpack

It uses the client2.cljs

The working version initializes Framework7 using the ES6 import syntax, and is transpiled using webpack.

yarn run build-dev
npx shadow-cljs watch :direct

It produces the above mentioned error.

I do not understand in detail, what exactly is going on in Framework7 as multiple wrappers are involved.

How can I correctly import and use Framework7 with Clojurescript and Shadow-CLJS?

Answer 1

Even though I read the shadow-clj guidelines on how to use npm packages. I had to use the direct path to the Javascript-files in the node_modules directory.

The correct imports are:

(ns app.ui.client2
  (:require
     ["framework7/framework7-lite.esm.bundle.js" :default Framework7]
     ["framework7-react/framework7-react.esm.js" :default Framework7React]))

I modifed the test project mentioned in my question.