I created custom Volto content views for a Plone add-on some month ago following the Plone training documentation. I tried to start from scratch again with such views, but yarn start compiled the client and server only with some errors and I could not view my content type with the created custom view. Volto was not able to navigate to the content object. It shows a more or less not themed view.
I looked also at the Plone Training 2022 documentation at chapter 23 and adapt this to my content type. But the result was the same.
I tried also the fullview example from Creating Volto Views – Frontend – Development recipes — Plone Documentation v6.0-dev with no success (same result from compiling client and server).
and server only with some errors
What are those errors?
Were you able to navigate to the content item before adding the custom view? Did you try with a content-type created through-the-web? I guess you did 21. Dexterity II: Talks – Mastering Plone 6 Development — Plone Training 2022 documentation and then 23. Volto View Component: A Default View for a "Talk" – Mastering Plone 6 Development — Plone Training 2022 documentation. At what point did it stop working as expected?
I created a new view for the Template Center of the Plone add-on collective.templates. I could create the view (like the TalkView in the training material), add it to the index.js of the components folder. I was able to compile and run the site and navigate inside it up to this point. Once I added it to the config.js I got a compile with errors and I wasn't able to navigate into the site. It was a static page.
I got the following error messages in the shell during the compilation:
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/(...)volto/@plone/volto/volto-collective-templates/node_modules/babel-preset-razzle/node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-function-name/lib/index.js:8:54)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/home/(...)volto/@plone/volto/volto-collective-templates/node_modules/babel-preset-razzle/node_modules/@babel/helper-create-class-features-plugin/lib/index.js:20:50)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Object../src/config.js (/home/(...)volto/@plone/volto/volto-collective-templates/build/server.js:69313:7)
at __webpack_require__ (/home/(...)volto/@plone/volto/volto-collective-templates/webpack/bootstrap:754:1)
at fn (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/webpack/bootstrap:59:1)
at Module.../../../../../../../tmp/tmp-28108ySb4mG0M1OOg.js (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/tmp/tmp-28108ySb4mG0M1OOg.js:6:1)
at __webpack_require__ (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/webpack/bootstrap:754:1)
at fn (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/webpack/bootstrap:59:1)
at Module../node_modules/@plone/volto/src/config/index.js (/home/(...)volto/@plone/volto/volto-collective-templates/build/server.js:55655:76)
at __webpack_require__ (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/webpack/bootstrap:754:1)
at fn (/home/(...)volto/@plone/volto/volto-collective-templates/build/webpack:/webpack/bootstrap:59:1)
at Module../node_modules/@plone/volto/src/server.jsx (/home/(...)volto/@plone/volto/volto-collective-templates/build/server.js:68605:77)
I could solve the issues. The freshly created Volto add-on missed some necessary packages. I had to add them to my add-on environment with the following commands:
yarn add -W @babel/helper-get-function-arity
yarn add -W levenary
yarn add -W @babel/helper-define-map
yarn add -W @babel/helper-regex
yarn add -W @babel/helper-builder-react-jsx
yarn add -W @babel/helper-builder-react-jsx-experimental
Once I installed this additional packages I could compile the custom view without errors and see the dummy text in the browser.