Add webpack theme for an existing Plone site

I am trying to enable the webpack theme package on an existing site. I've enabled the webpack theme per instructions for plonetheme.webpacktemplate. The webpack theme works when I create a new Plone site (from scratch), however when I copy the existing ZODB to the buildout and run make clean && make watch webpack returns an error (see https://gist.github.com/kcleong/059b3c975ac64c256c6481ec356f73b5). I did enable debug mode in webpack.config.js to provide more info.

It seems the webpack default and custom theme are not added to the existing site. In @@theming-controlpanel only the Barceloneta theme is active. I've also tried to reset the admin credentials to the default one. I did some digging and it seems the nodejs packages plonetheme-webpack-plugin and plonetheme-upload take care of adding the default and custom theme, but my webpack and nodejs knowledge is limited.

1 Like

@kcleong What is the Plone version in question?

I looked into your gist. What plonetheme-webpack-plugin does simplified, is that it loads /Plone/config.js and /Plone/less-variables.js and with the help of those and some hardcoded magic it downloads all frontend resources form Plone into ./plone/-cache directory and maps them from there for Webpack.

According to your gist, your build is unable to find files for

'mockup-patterns-recurrence'
'tinymce-compat3x'

which should be mapped in /Plone/config.js, and

'mockup-patterns-recurrence'

which should be mapped in /Plone/less-variables.js.

If you can figure out, where those files are, they could be mapped also in webpack.config.js. See https://github.com/jyukopla/reclas/blob/master/resources/webpack.config.js for an example (it maps those alias to filesystem, but they can also be mapped to Plone with resources paths starting with ++).

There have been some Plone 5 releases where some mapping have been missing from resource registry.

@datakurre, I'm using Plone 5.1.2, this Plone site was migrated from Plone 4.3.

I've checked config.js and less-variables.js and noticed 'tinymce-compat3x'/'mockup-patterns-recurrence' are missing. I've added gists for the output on both files:

Do you have any idea how to add those files? I'm using Plone webpack for two other sites (which were set-up from scratch) and I noticed the files are indeed included in those sites.

1 Like

The easiest option is to leave your site ”broken”, get those files from the other sites into your theme and link them in webpack.config.js similarly to my ”reclas” example.

@datakurre, thanks for your help, I managed to get the webpack theme working. For those interested (or stumbling upon the same error), here is the gist with my changes: https://gist.github.com/kcleong/1936157138890f91f510ee3ef5409e7e

1 Like

I like to mention that it is really ok also just get the missing files from working Plone instead using git checkout. With git checkout of mock-up there is danger of getting newer, incompatible, versions. On the other hand, it could also allow to use newer versions by purpose :slight_smile:

I pinned mockup in package.json on version/tag 2.7.2, which seems to be the correct version for Plone 5.1.2. Easier for future Plone upgrades to bump the mockup version.

2 Likes

Plone Foundation Code of Conduct