Volto 19.3.0 resolves theme.config to the wrong package in a pnpm workspace

Development Plone 6 UI (Volto)
1

Hello,

I am a newcomer to Plone/Volto and am building a small website for a local German village association.

I am currently trying to customize the Volto Teaser block. I used ChatGPT as assistance while setting this up. The approach we chose was to create a project-specific add-on and use that add-on as the site's theme.

According to the Volto documentation, using the project's default add-on as the theme is a valid approach for a single-project site.

My environment is:

Plone backend: 6.x
Volto: 19.3.0
pnpm: 10.20.0
Docker
Windows + WSL2

The frontend is mounted into the Docker container as /app.

The relevant structure is:

frontend/
├── package.json
├── pnpm-workspace.yaml
├── volto.config.js
└── packages/
    ├── volto-gemlegr/
    │   ├── package.json
    │   └── src/
    │       └── theme/
    │           ├── theme.config
    │           └── theme.js
    └── wj-volto/

The active Volto configuration is:

const addons = ['volto-gemlegr'];
const theme = 'volto-gemlegr';

module.exports = {
  addons,
  theme,
};

volto-gemlegr/package.json is:

{
  "name": "volto-gemlegr",
  "version": "1.0.0",
  "main": "src/index.js"
}

There is also an experimental package called wj-volto. It is not intended to be the active add-on or theme. Its package name is now:

{
  "name": "wj-volto",
  "version": "1.0.0",
  "main": "src/index.js"
}

I tried to isolate the problem by removing wj-volto from the workspace:

- "packages/volto-gemlegr"

instead of:

- "packages/*"

I then ran:

pnpm install

which completed successfully.

I also removed the Volto and Node build caches:

rm -rf /app/core/packages/volto/cache
rm -rf /app/node_modules/.cache

However, pnpm build still fails with the following:

@import (multiple) '../../theme.config';

Less resolver error:
'../../theme.config' wasn't found.

Webpack resolver error details:
resolve '../../theme.config'
in '/app/node_modules/.pnpm/semantic-ui-less@2.4.1/node_modules/semantic-ui-less/definitions/modules'

aliased with mapping '../../theme.config':
'/app/packages/wj-volto/src/theme/theme.config'
to '/app/packages/wj-volto/src/theme/theme.config'

It then reports:

/app/packages/wj-volto/src/theme/theme.config doesn't exist

The important point is that volto-gemlegr/src/theme/theme.config does exist, while wj-volto/src/theme/theme.config does not.

I also searched the project for the literal path:

/app/packages/wj-volto/src/theme/theme.config

and found no configuration file containing it.

So my question is:

Why is Volto/Webpack resolving the theme.config alias to wj-volto when volto.config.js explicitly specifies volto-gemlegr as the active theme, and wj-volto is no longer part of the workspace?

Could I be missing another Volto 19 theme configuration step, or could this be a problem in the theme-resolution/build configuration?

As I am new to Volto, I would particularly appreciate seeing the minimal correct setup for a project-specific theme in Volto 19.

This forum question was also created with the help of ChatGPT.

Thanks for any help.

2

Hi @WJa

The theme.config is a special resource, and can't be shadowed.

As a newcomer, I would recommend you use an already existing theme, like volto-light-theme. Then you can add your customizations on the top of it.

See the VLT demo site: https://light-theme.kitconcept.io/

https://demo.plone.org/ is based on it. You can take a look at how it's done in the site's repo:

Follow the documentation on VLT and the theme, point the machine to them (/docs in Volto core), and VLT:

Make sure you've used latest cookieplone to generate your scaffold.

If you still want to make your own theme, take VLT as reference, and take a look how it's customized.

There are some documentation in the core on how to create a theme, and what it entails:

I think that there's some training resources in training.plone.org

I hope it helps!