Unable to create subtheme as documented

[khamer]

I've made a simple subtheme here - https://github.com/imarc/fractal-theme-hydrogen

It works, but I had to pass mandelbrot from my parent repository into my theme:

const mandelbrot = require('@frctl/mandelbrot')
const theme = require('fractal-theme-hydrogen')(mandelbrot)

If I require @frctl/mandelbrot within my subtheme instead of passing it in, I get the following error building the outer pattern library:

Unhandled rejection Error: Fractal themes must inherit from the base Theme class.
    at Web._loadTheme (/home/kevin/Code/boilerplate-components/node_modules/@frctl/web/src/web.js:76:19)
    at Web.server (/home/kevin/Code/boilerplate-components/node_modules/@frctl/web/src/web.js:25:28)
    at CommandInstance.action (/home/kevin/Code/boilerplate-components/node_modules/@frctl/fractal/src/cli/commands/web.start.js:17:41)
    at CommandInstance.<anonymous> (/home/kevin/Code/boilerplate-components/node_modules/@frctl/fractal/src/cli/cli.js:92:37)
    at Session.session.execCommandSet (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/session.js:470:20)
    at Vorpal.vorpal._exec (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/vorpal.js:960:18)
    at Vorpal.vorpal._execQueueItem (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/vorpal.js:751:17)
    at Vorpal.vorpal._queueHandler (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/vorpal.js:735:10)
    at Vorpal.vorpal.exec (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/vorpal.js:682:10)
    at Vorpal.parse (/home/kevin/Code/boilerplate-components/node_modules/vorpal/dist/vorpal.js:166:12)
    at /home/kevin/Code/boilerplate-components/node_modules/@frctl/fractal/src/cli/cli.js:198:24
    at tryCatcher (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:729:18)
    at Promise._fulfill (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:673:18)
    at PromiseArray._resolve (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise_array.js:127:19)
    at PromiseArray._promiseFulfilled (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise_array.js:145:14)
    at Promise._settlePromise (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:609:26)
    at Promise._settlePromise0 (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/home/kevin/Code/boilerplate-components/node_modules/bluebird/js/release/promise.js:729:18)

I understand the docs may be out of date with the Fractal/Mandelbrot updates, but I'd guess that this is a real bug where a subtheme has a different Theme object (because it's using a different @frctl/mandelbrot object) and the check in web.js can't be passed anymore and might need to be removed or reworked. Thoughts?

Context

• Fractal version: 1.5.2
• Node version: 12.16.3
• OS: Manjaro 20.2.1 (Nibia)

[mihkeleidast]

Can you run npm ls @frctl/mandelbrot and npm ls @frctl/web and report what it says in your example project? We might need to change how our dependencies are defined (move something to peerDeps etc).

[mihkeleidast]

Also can you add the faulty version to a branch in your subtheme repo so we could test things out better?

[khamer]

$ npm ls @frctl/web
imarc-boilerplate@4.0.0 /home/kevin/Code/boilerplate-components
└─┬ @frctl/fractal@1.5.2
  ├─┬ @frctl/mandelbrot@1.7.0
  │ └── @frctl/web@0.1.3  deduped
  └── @frctl/web@0.1.3 

$ npm ls @frctl/mandelbrot
imarc-boilerplate@4.0.0 /home/kevin/Code/boilerplate-components
└─┬ @frctl/fractal@1.5.2
  └── @frctl/mandelbrot@1.7.0 

and https://github.com/imarc/fractal-theme-hydrogen/tree/fractal-821

Initially I saw different versions of mandelbrot (1.4 on the parent repo, 1.7 in the theme) but I resolved that so they're both 1.7.0 (edit: I did that before I even submitted the bug.)

[mihkeleidast]

@khamer those logs are from your subtheme's main branch, not the fractal-821 branch, right? Or I'm missing something, because it should log mandelbrot as a dependency of your subtheme. If I'm right, then I'd be more interested to see what the dependency tree is like with the broken version :)

[khamer]

15:21 $ npm ls @frctl/web
fractal-theme-hydrogen@1.0.2 /home/kevin/Code/fractal-theme-hydrogen
└─┬ @frctl/mandelbrot@1.7.0
  └── @frctl/web@0.1.3 

15:21 $ npm ls @frctl/mandelbrot
fractal-theme-hydrogen@1.0.2 /home/kevin/Code/fractal-theme-hydrogen
└── @frctl/mandelbrot@1.7.0 

Here are the versions from the fractal-821 branch (the broken branch) of the subtheme.

[mihkeleidast]

:) I need the logs from the project where your subtheme is installed. What I'm getting at is that if your project installs frctl/web@0.x (from frctl/fractal) and your theme installs frctl/web@0.y (from frctl/mandelbrot) and those versions don't semver-match, npm won't dedupe them & the instanceof check will fail because they both use different definitions of the Theme class.

From the previous logs, I don't see how your subtheme is installed in your project at all.

[khamer]

Got it - so I set this up, confirmed the versions, and running fractal worked. So went back to see what I was doing differently - and figured out that this has to do with me using npm link.

So I had run npm link in fractal-theme-hydrogen and npm link fractal-theme-hydrogen in the parent project for development; but under those conditions, it looks like maybe the two instances of @frctl/mandelbrot (or @frctl/web?) aren't being de-duped. Maybe I'll need to checkout mandelbrot separately, and use npm link to make sure both fractal-theme-hydrogen and the parent repo are using that if I want to use npm link still.

[mihkeleidast]

Yeah with npm link deduping does not take place at all (at least automatically).

Is this issue resolved then for now?