RE: Portlets created with yo liferay-js fail to render

Fraser MacDonald, modified 6 Years ago.

Portlets created with yo liferay-js fail to render

New Member Posts: 2 Join Date: 10/29/19 Recent Posts

Hi,
Liferay 7.2, Chrome 78.0.3904.70
Have been following the "Developing Web Front Ends" Vue application subsection to create a "Hello World" type portlet to add to Liferay. I'm new to Liferay.https://portal.liferay.dev/docs/7-2/appdev/-/knowledge_base/a/developing-a-vue-application
I have created two portlets, one based on "Vue" and the other "Pure JavaScript", letting the tool add the default content to the portlets.Without changing anything I have successfully deployed both to a local version on liferay (a clean version using the default test database).
Neither Portlet will render once added to a content page. I get the following error, for both tested independently, which is traced back to an invalid JSON string.

loader.js:381 SyntaxError: Unexpected token p in JSON at position 22
&nbsp; &nbsp; at JSON.parse (<anonymous>)
&nbsp; &nbsp; at pure-javascript-portlet-content-page-:2614
&nbsp; &nbsp; at loader.js:379
&nbsp; &nbsp; at loader.js:343
</anonymous>

Extract from error origin (http://localhost:8080/web/guest/pure-javascript-portlet-content-page-):

if (initializer) {
&nbsp;&nbsp; &nbsp;&nbsp;initializer(
&nbsp; &nbsp; &nbsp; &nbsp;{
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; configuration: {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;portletInstance: JSON.parse('{"portletSetupCss":"{\"portletData\":{\"useCustomTitle\":false,\"titles\":{},\"portletDecoratorId\":\"\"},\"advancedData\":{\"customCSSClassName\":\" portlet-barebone\"}}"}'),
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;system: JSON.parse('{}')
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;contextPath: '/o/pm-pure-js-portlet',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;portletElementId: 'js-portlet-_pmpurejsportlet_INSTANCE_KSG7kFL4NZ9f_',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;portletNamespace: '_pmpurejsportlet_INSTANCE_KSG7kFL4NZ9f_'
&nbsp; &nbsp; &nbsp;);
}

The issue is that the "portletSetupCss" property value is enclosed in double quotes. This invalidates the JSON.Does anyone know if there is anything I can change in my setup to fix/avoid this issue or is this a bug I should report? Thanks for your time!