[solved] Shadowing/Override components of volto-light-theme doesn't work

Plone Support Add-on Development
1

I read Customizing Components — Plone Documentation v6
My src folder in my project/addon (created with cookieplone)

./src
├── customizations
│   ├── volto
│   │   └── components
│   │       └── theme
│   │           └── Footer
│   │               └── Footer.jsx
│   └── volto-light-theme
│       └── components
│           └── MobileNavigation
│               └── MobileNavigationToggler.jsx
├── index.js
└── theme
    ├── _main.scss
    ├── _typo.scss
    └── _variables.scss

the customization of the volto components works fine! But the customization of VLT doesn't work. No hot reload in my console, if i change anything in the MobileNavigationToggler.jsx.

the addon section in my package.json looks like so:

"addons": [
    "volto-form-block",
    "@eeacms/volto-accordion-block",
    "@kitconcept/volto-button-block",
    "@kitconcept/volto-heading-block",
    "@kitconcept/volto-highlight-block",
    "@kitconcept/volto-introduction-block",
    "@kitconcept/volto-separator-block",
    "@kitconcept/volto-slider-block",
    "@plonegovbr/volto-social-media",
    "@kitconcept/volto-light-theme",
    "volto-videohero-block"
  ],

and the volto.config.js

const addons = [
    "@kitconcept/volto-light-theme",
    "volto-my-addon"
];
const theme = '@kitconcept/volto-light-theme';

module.exports = {
  addons,
  theme
};

What's missing? What am I doing wrong? What am I overlooking? Perhaps the name of the folder volto-light-theme ?

Update
The folder structure was wrong. The right way:

├── customizations
│   ├── @kitconcept
│   │   └── volto-light-theme
│   │       └── components
│   │           └── MobileNavigation
│   │               └── MobileNavigationToggler.jsx
│   └── volto
│       └── components
│           └── theme
│               └── Footer
│                   └── Footer.jsx
├── index.js
└── theme
    ├── _main.scss
    ├── _typo.scss
    └── _variables.scss

The addon name is @kitconcept/volto-light-theme, the path should be customizations/@kitconcept/volto-light-theme/components

4 Likes