My Custom Extension Not Found

[gordonjl]

I'm quite new to node module development and could use some help.

The Problem

I'm creating a new component. I'm using npm link to develop it in Mozaik v1, using the time.clock component as an example. I get a No component defined for type error on startup.

Thoughts

I'm not naming the extension correctly

I've verified the name of my component follows the standard: mozaik-ext-budget in my case. I've copied the clock demo exactly for index.js.

There's something magical about how a component type name is created

I haven't figured out how the clock component can be named time.clock. I would expect it to be named time.Clock beacuse that's the name of the class in the node module.

Lastly

is npm link the wrong way to develop a new component for mozaik? I've read the documentation but I'm not seeing a clear description of the steps to create a component.

Thanks for your help!

[plouc]

Hi @gordonjl,

You must also register your extension, see https://github.com/plouc/mozaik-demo/blob/master/src/App.jsx (for v1) or https://github.com/plouc/mozaik/blob/v2.x/examples/basic/src/register_extensions.js for v2.

You should have the following structure:

mozaik-ext-budget/
    src/
        components/
            index.js
            Whatever.js

and index.js should export the available widgets like this:

import Whatever from './Whatever';

export default {
    Whatever
}

[plouc]

Also did you used the mozaik v2 with the mozaik-ext-time for v1 or mozaïk v2 for mozaik-ext-time for v2?

[plouc]

The code for widget name is here (v1) https://github.com/plouc/mozaik/blob/master/src/browser/component-registry.js#L23

[gordonjl]

I'm using v1. I'd use v2 but I don't see documentation there yet and the alpha scared me away ;-).

I think there's something wrong with how I'm trying to develop the component using npm link. Should I use npm link? What other way is there to develop a component and see it in the mozaik-demo application?

I did a test:

1. Make a copy of mozaik-ext-time into an external folder
2. Rename the folder to mozaik-ext-jgtime
3. Adjust package.jsonto reflect the new package name above
4. within this directory, run npm link
5. navigate to the mozaik-demo directory and run npm link mozaik-ext-jgtime
6. Modify App.js to import and add the extension
7. Modify config.js to include a component of type jgtime.clock

I ran the demo again and still got:

Uncaught Error: No component defined for type "jgtime.clock"

I think I followed things correctly, making me think I shouldn't use npm link, but some other way to develop the component.

[plouc]

Do you have a repo with the code so I can have a look at it?

[plouc]

including mozaïk, ideally (on GitHub):

root/
    your-custom-extension/
    mozaik-demo/

[plouc]

Hum, I just remembered something, do you have mozaik & react installed in the extension's node_modules folder? If so, you should try to remove them.

[gordonjl]

I've forked the demo project, copied mozaik-ext-time to [root]/mozaik-ext-jgtime and set up npm link like so:

Here's the fork: git@github.com:gordonjl/mozaik-demo.git

➜  mozaik-ext-jgtime git:(master) ✗ npm link
npm WARN mozaik-ext-jgtime@1.1.0 requires a peer of mozaik@>=1.1.0 but none is installed. You must install peer dependencies yourself.

added 3 packages in 3.868s
/usr/local/lib/node_modules/mozaik-ext-jgtime -> /Users/jgordon/learning/mozaik-demo/mozaik-ext-jgtime

then executed the link command in the demo project:

➜  mozaik-demo git:(master) ✗ npm link "mozaik-ext-jgtime"
/Users/jgordon/learning/mozaik-demo/node_modules/mozaik-ext-jgtime -> /usr/local/lib/node_modules/mozaik-ext-jgtime -> /Users/jgordon/learning/mozaik-demo/mozaik-ext-jgtime

I modified config.js and App.js to include the copied module I made then ran the app. I'm still getting the same exception:

mozaik.min.js:11 Uncaught Error: No component defined for type "jgtime.clock"

Thanks for your help!

[plouc]

It works, what I've done:

• cloned the repo
• yarn install
• cd mozaik-ext-jgtime && yarn install && yarn link && cd ..
• yarn link mozaik-ext-jgtime
• yarn build-assets
• yarn start

[gordonjl]

Okay, we have success!

I've been using npm instead of yarn. Everything works fine after I started using yarn. I thought I could use npm or yarn with no difference.

Thanks for your help.