Message Boards

  1. Home
  2. Development
  3. Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Kevin Matthews, modified 4 Years ago.

Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hello, will there be Liferay Theme Generator for version 7.2 portal? How do we create themes in 7.2?
I used Liferay studio but got build erros shown below. Has anyone got the error below? Or can someone advise as to the approach I should take to create new themes?
Here are the following steps :
  1. created a new module selected theme as project temaplate
  2. From my project work space in the wars folder, I updated my webapps folder with css,images,js,template from  codebase https://github.com/liferay/liferay-portal/tree/7.2.x/modules/apps/frontend-theme/frontend-theme-classic/src
  3.  Ran gradle WAR task buildCSS and got the following error.
Using native Sass compiler
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
Exception in thread "main" com.liferay.sass.compiler.jsass.internal.JSassCompilerException: io.bit3.jsass.CompilationException: Error: Undefined variable: "$gray-100".
        on line 4 of build/buildTheme/css/_liferay_variables_custom.scss
        from line 15 of build/buildTheme/css/aui/lexicon/atlas.scss
        from line 2 of build/buildTheme/css/aui.scss
>>         lighter: $gray-100,
   -----------^
    at com.liferay.sass.compiler.jsass.internal.JSassCompiler.compileFile(JSassCompiler.java:134)
    at com.liferay.css.builder.CSSBuilder._parseSass(CSSBuilder.java:395)
    at com.liferay.css.builder.CSSBuilder._parseSassFile(CSSBuilder.java:407)
    at com.liferay.css.builder.CSSBuilder.execute(CSSBuilder.java:166)
    at com.liferay.css.builder.CSSBuilder.main(CSSBuilder.java:80)
Caused by: io.bit3.jsass.CompilationException: Error: Undefined variable: "$gray-100".
        on line 4 of build/buildTheme/css/_liferay_variables_custom.scss
        from line 15 of build/buildTheme/css/aui/lexicon/atlas.scss
        from line 2 of build/buildTheme/css/aui.scss
>>         lighter: $gray-100,
   -----------^
    at io.bit3.jsass.adapter.NativeAdapter.compileFile(Native Method)
    at io.bit3.jsass.adapter.NativeAdapter.compile(NativeAdapter.java:44)
    at io.bit3.jsass.Compiler.compile(Compiler.java:124)
    at com.liferay.sass.compiler.jsass.internal.JSassCompiler.compileFile(JSassCompiler.java:115)
    ... 4 more
> Task :wars:ArtifactManagerTheme:buildCSS FAILED
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hey Kevin, 
There is a version of the theme generator for 7.2. According to the matrix found here: https://help.liferay.com/hc/en-us/articles/360029147711-Theme-Generator it's version 9.0. 

I can't really comment on Liferay Studio as I never really use it. I prefer to use these tools from the command line. Can you try from the command line to see if that helps?
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, 

I did  check the version -> yo liferay-theme --version
2.0.5
So it seems to be using version 2.0.5 How do I get it to the latest vresion of theme generator
Andrew Jardine:

Hey Kevin, 
There is a version of the theme generator for 7.2. According to the matrix found here: https://help.liferay.com/hc/en-us/articles/360029147711-Theme-Generator it's version 9.0. 

I can't really comment on Liferay Studio as I never really use it. I prefer to use these tools from the command line. Can you try from the command line to see if that helps?

Attachments:

thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
What happens when you run npm update liferay-theme ?
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
nothing
after the update it shows same version 2.0.5
Andrew Jardine:

What happens when you run npm update liferay-theme ?
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Which version of node are you using? (I'm using v10)
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Version 12.16.2
C:\Users\f13grnl\bitbucket\rapconn_liferay_app\ArtifactManagerWorkSpace\wars>node -v
v12.16.2
Andrew Jardine:

Which version of node are you using? (I'm using v10)
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
OK -- we're reaching the outer limits (which amount to a distance of about 15' from my body) of my expertise with this stuff. I am trying to ramp up and learn more about all this stuff, but you know how it goes with time and such. There are a couple of desperate things I might try next, assuming you haven't already 


1. Run the install command specifying the 9.x version maybe? npm install -g generator-liferay-theme@92. A little more desperate but sometimes the most effective is a full removal and then a reinstallation. 

The most confusing thing to me actually is the fact that you are seeing a version that isn't even in the matrix. It must be SUPER old. Maybe, at the end of the day, #2 is the best option.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, i ran the command as you suggested to install version 9 but i get the following error
C:\liferay>npm install -g generator-liferay-theme@9
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
+ generator-liferay-theme@9.5.0
updated 1 package in 37.824sC:\liferay> yo liferay-theme     _-----_
    |       |    ╭──────────────────────────────────────────╮
    |--(o)--|    │ Update available: 3.1.1 (current: 2.0.5) │
   `---------´   │     Run npm install -g yo to update.     │
    ( _´U`_ )    ╰──────────────────────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `fs.js:35
} = primordials;
    ^ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\natives\index.js:143:24)
    at Object.req [as require] (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
Andrew Jardine:

OK -- we're reaching the outer limits (which amount to a distance of about 15' from my body) of my expertise with this stuff. I am trying to ramp up and learn more about all this stuff, but you know how it goes with time and such. There are a couple of desperate things I might try next, assuming you haven't already 


1. Run the install command specifying the 9.x version maybe? npm install -g generator-liferay-theme@92. A little more desperate but sometimes the most effective is a full removal and then a reinstallation. 

The most confusing thing to me actually is the fact that you are seeing a version that isn't even in the matrix. It must be SUPER old. Maybe, at the end of the day, #2 is the best option.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, I was able to resolve this javapscript error by following this blog.https://intellij-support.jetbrains.com/hc/en-us/community/posts/360007646780-How-to-fix-ReferenceError-primordials-is-not-defined-error-

But when I ran go lifearaytheme it stil shows verion 7.0 and 7.1. Have you succesfully created themes in 7.2 using the javascript themes generator? If you have can you send a screenshot showing the liferay version when you run yo liferay-themeThanks,Kevin
Kevin Matthews:

Hi Andrew, i ran the command as you suggested to install version 9 but i get the following error
C:\liferay>npm install -g generator-liferay-theme@9
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
+ generator-liferay-theme@9.5.0
updated 1 package in 37.824sC:\liferay> yo liferay-theme     _-----_
    |       |    ╭──────────────────────────────────────────╮
    |--(o)--|    │ Update available: 3.1.1 (current: 2.0.5) │
   `---------´   │     Run npm install -g yo to update.     │
    ( _´U`_ )    ╰──────────────────────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `fs.js:35
} = primordials;
    ^ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\natives\index.js:143:24)
    at Object.req [as require] (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\natives\index.js:55:10)
    at Object.<anonymous> (C:\Users\f13grnl\AppData\Roaming\npm\node_modules\generator-liferay-theme\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
Andrew Jardine:

OK -- we're reaching the outer limits (which amount to a distance of about 15' from my body) of my expertise with this stuff. I am trying to ramp up and learn more about all this stuff, but you know how it goes with time and such. There are a couple of desperate things I might try next, assuming you haven't already 


1. Run the install command specifying the 9.x version maybe? npm install -g generator-liferay-theme@92. A little more desperate but sometimes the most effective is a full removal and then a reinstallation. 

The most confusing thing to me actually is the fact that you are seeing a version that isn't even in the matrix. It must be SUPER old. Maybe, at the end of the day, #2 is the best option.
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hmm -- that output looks like you have some out of date modules as well. What happens when you run --

$>npm outdated  

It also looks like you can also update all packages to the latest major version using 

$>npm install -g npm-check-updates && ncu -u && npm update

.. which will install a node module to assist, then execute the too and then run the usual update command. Ultimately it feels like a real mess of versions and mismatching. This is precisely why I have done my best to avoid all of this for so long emoticon. I am told that there is light at the end of the tunnel and that yarn will save the day for all of us. Haven't made my way to that string yet though.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, I was able to resolve this javapscript error by following this blog.https://intellij-support.jetbrains.com/hc/en-us/community/posts/360007646780-How-to-fix-ReferenceError-primordials-is-not-defined-error-​​​​​​​. I am not sure if you got my previous replies.
Were you able to create themes in 7.2 using the theme generator?  Also, would you be able to send a screen shot showing the 7.2 version from the theme generator cli?
ThanksKevin
Andrew Jardine:

OK -- we're reaching the outer limits (which amount to a distance of about 15' from my body) of my expertise with this stuff. I am trying to ramp up and learn more about all this stuff, but you know how it goes with time and such. There are a couple of desperate things I might try next, assuming you haven't already 


1. Run the install command specifying the 9.x version maybe? npm install -g generator-liferay-theme@92. A little more desperate but sometimes the most effective is a full removal and then a reinstallation. 

The most confusing thing to me actually is the fact that you are seeing a version that isn't even in the matrix. It must be SUPER old. Maybe, at the end of the day, #2 is the best option.
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
So strange -- like I mentioned before, I only use the command line, but this is what I see when I fire it up.
aj@macbook:~/projects/liferay/demos/beck/themes|
⇒&nbsp; yo liferay-theme

&nbsp;&nbsp; &nbsp; _-----_
&nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; .--------------------------.
&nbsp; &nbsp; |--(o)--|&nbsp; &nbsp; |&nbsp; Welcome to the splendid |
&nbsp;&nbsp; `---------´ &nbsp; | &nbsp; &nbsp; liferay-theme:app&nbsp; &nbsp; |
&nbsp; &nbsp; ( _´U`_ )&nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; generator!&nbsp; &nbsp; &nbsp; &nbsp; |
&nbsp; &nbsp; /___A___\&nbsp; &nbsp; '--------------------------'
&nbsp;&nbsp; &nbsp; |&nbsp; ~&nbsp; |&nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; __'.___.'__&nbsp; &nbsp;
&nbsp;´ &nbsp; `&nbsp; |° ´ Y `&nbsp;

This version of the liferay-js-themes-toolkit (9.4.3)
can create a liferay-theme:app for Liferay DXP and Portal CE v7.2

For older versions, please use v8 of the toolkit:

&nbsp; &nbsp; npm i -g generator-liferay-theme@^8.0.0
&nbsp; &nbsp; yo liferay-theme:app
? What would you like to call your theme? (My Liferay Theme)&nbsp;

.. and when I run the version command
aj@macbook:~/projects/liferay/demos/beck/themes|
⇒&nbsp; yo liferay-theme --version
3.1.1
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
I honestly don't know if it makes a difference or not, but when you do the installtion of the npm module, are you doing it globally with the -g flag?
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, I finally got to install theme generator 9.  I had to remove the generator theme folder and do npm update as posted in your previous thread. C:\Users\kevin\AppData\Roaming\npm\node_modules\generator-liferay-theme.But now I have another hurdle. When I did a gulp deploy I have get the following error below.  It  seems deploy task is missing. C:\liferay\artifact-manager-theme10-theme>gulp deploy
C:\liferay\node_modules\gulp-help\index.js:81
    task = gulp.tasks[name];
                     ^TypeError: Cannot read property 'help' of undefined
    at Gulp.gulp.task (C:\liferay\node_modules\gulp-help\index.js:81:22)
    at module.exports (C:\liferay\node_modules\gulp-help\index.js:97:8)
    at Object.module.exports.registerTasks (C:\liferay\node_modules\liferay-theme-tasks\plugin\index.js:23:9)
    at Object.module.exports.registerTasks (C:\liferay\node_modules\liferay-theme-tasks\index.js:27:14)
    at Object.<anonymous> (C:\liferay\artifact-manager-theme10-theme\gulpfile.js:12:19)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)

Andrew Jardine:

I honestly don't know if it makes a difference or not, but when you do the installtion of the npm module, are you doing it globally with the -g flag?
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Which version of gulp are you running? Here is what I have on the go --

⇒  gulp --versionCLI version: 2.2.0Local version: Unknown
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
I am using cli 3.8.8. and 4.0.2 local plus node 11 . I need to have local 3.9.1 
I read somewhere there issues with gulp4. 
C:\liferay\artifact-manager-theme10-theme>gulp -v
[17:59:38] CLI version 3.8.8
[17:59:38] Local version 4.0.2C:\liferay\artifact-manager-theme10-theme>
Andrew Jardine:

Which version of gulp are you running? Here is what I have on the go --

⇒  gulp --versionCLI version: 2.2.0Local version: Unknown
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Can you try with node v10 -- I think Ivan said that was the highest supported version. I'm not sure if, how or why that might help -- desperate times and all that emoticon
thumbnail
Ivan Zaera, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
As you may have probably guessed, you cannot use node 12 with the current Theme Generator (see https://github.com/liferay/liferay-js-themes-toolkit/issues/148).
At least until we release v10 of Themes Toolkit, you should use v9 for 7.2 and following DXP versions and v8 for previous DXP versions.

When we release v10 of Themes Toolkit, v9 will be deprecated and you will need to use v10 for DXP>=7.2 and v8 for DXP<=7.1
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hey Ivan,

Out of curiosity, since we are now seeing 7.3 in the wild, are any of the JS tools supporting it (is as in 7.3)?
thumbnail
Ivan Zaera, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
Themes Toolkit  v10 generates projects for 7.3...
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Ivan, I able to see the generator option for 7.2 or 7.3.I have downgraded to node 10 and Gulp local/cli 3.9.
But when I ran gulp deploy I get the following error.  Do you know what could result in this error?  Does the gulp version matters?
C:\liferay\amtheme-theme>gulp deploy
C:\liferay\amtheme-theme\node_modules\liferay-theme-tasks\plugin\tasks\init.js:31
        gulp.task('init', gulp.series('plugin:init'));
                               ^TypeError: gulp.series is not a function
    at module.exports (C:\liferay\amtheme-theme\node_modules\liferay-theme-tasks\plugin\tasks\init.js:31:25)
thumbnail
Ivan Zaera, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
I think you are mixing Themes Toolkit v10 (that I have just released) intended for Gulp 4 with Gulp 3.

Make sure you either point: 
liferay-theme-tasks dependency to ^9.0.0 and gulp to ^3.0.0
OR
liferay-theme-tasks dependency to ^10.0.0 and gulp to ^4.0.0

See https://github.com/liferay/liferay-js-themes-toolkit#compatibility
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Thanks Ivan its working now. I am able to build and deploy. But is it possible you can you update the documentation in https://help.liferay.com/hc/en-us/articles/360029147711-Theme-Generator. Like add two more columns with node.js  and gulp versions requirement? This would help a lot in case anyone is having the same problems or deal been through for 2 days.
Also, the theme generator only created css and images. I dont see the images or template folders. How do I know this is the styled or unstlyed.? I would just like to modify the portal_normal.ftl freemarker template . I am just updating the footer image home screen. Please advise

04/15/2020  10:21 AM    <DIR>          ..
04/15/2020  10:21 AM    <DIR>          css
04/15/2020  10:21 AM    <DIR>          images
04/15/2020  10:21 AM    <DIR>          WEB-INF
Ivan Zaera:

I think you are mixing Themes Toolkit v10 (that I have just released) intended for Gulp 4 with Gulp 3.

Make sure you either point: 
liferay-theme-tasks dependency to ^9.0.0 and gulp to ^3.0.0
OR
liferay-theme-tasks dependency to ^10.0.0 and gulp to ^4.0.0

See https://github.com/liferay/liferay-js-themes-toolkit#compatibility
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
This is normal behaviour. If you have a look at the package.json you will find the line called "baseTheme" which will indicate what you are using for a parent theme. Most likely it is styled which is the default. Using unstyled as the parent means you have to do a lot of styling to define admin controls. Classic has never been recommended to be used as a base theme because it's a reference implementation (extending from styled) -- using it as a parent can create a volatile theme for you because the Classic theme could change at any time and that could cause your theme to break. From my experience, it's best to baseline off of styled and then use the bootstrap/clay variables to override functionality first and foremost, only add you own custom stuff when you absolutely have to. 

The absence of templates is also normal because there are many and there is no way for the generator to know what you want to change. The easiest way to go here is to run a build (or a deploy as you have) and then from the build folder, grab the portal_normal file and move it into your templates folder and change whatever you want. 
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, I would like to update the footer content and remove the welcome message from the home page LR7.2 OOB using the same look and feel like the classic. But when using the styled theme as its comes by default from the generator  it doesnt shows the classic theme. It seems the css is entirely different from the classic theme. How do I  modify the same exact theme like classic? I tried to copy the same theme folders from github https://github.com/liferay/liferay-portal/tree/7.2.x/modules/apps/frontend-theme/frontend-theme-classic/src. But the themes are not the same as the classic.
Andrew Jardine:

This is normal behaviour. If you have a look at the package.json you will find the line called "baseTheme" which will indicate what you are using for a parent theme. Most likely it is styled which is the default. Using unstyled as the parent means you have to do a lot of styling to define admin controls. Classic has never been recommended to be used as a base theme because it's a reference implementation (extending from styled) -- using it as a parent can create a volatile theme for you because the Classic theme could change at any time and that could cause your theme to break. From my experience, it's best to baseline off of styled and then use the bootstrap/clay variables to override functionality first and foremost, only add you own custom stuff when you absolutely have to. 

The absence of templates is also normal because there are many and there is no way for the generator to know what you want to change. The easiest way to go here is to run a build (or a deploy as you have) and then from the build folder, grab the portal_normal file and move it into your templates folder and change whatever you want. 
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Please disregard my previous ask. I was able to get the classic theme just need to copy all the content from frontend classic theme src folder including WEB_INF. 
Andrew Jardine:

This is normal behaviour. If you have a look at the package.json you will find the line called "baseTheme" which will indicate what you are using for a parent theme. Most likely it is styled which is the default. Using unstyled as the parent means you have to do a lot of styling to define admin controls. Classic has never been recommended to be used as a base theme because it's a reference implementation (extending from styled) -- using it as a parent can create a volatile theme for you because the Classic theme could change at any time and that could cause your theme to break. From my experience, it's best to baseline off of styled and then use the bootstrap/clay variables to override functionality first and foremost, only add you own custom stuff when you absolutely have to. 

The absence of templates is also normal because there are many and there is no way for the generator to know what you want to change. The easiest way to go here is to run a build (or a deploy as you have) and then from the build folder, grab the portal_normal file and move it into your templates folder and change whatever you want. 
thumbnail
Andrew Jardine, modified 3 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Hah! nice, sorry, weekend arrived and the other half of my career (parenting) took over. Your solution is the only real "safe" way I know to do it so that is what I was going to suggest. I've used this a couple times but most of the time I just provide the overrides on my own. I suppose at the end of the day it doesn't really make much of a difference and copying over the Classic would be faster, but I guess I, personally, have found that more often than not the theme I am tasked to build doesn't look much like the Classic theme either emoticon
Kevin Matthews, modified 3 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Yes for now I will used the frontend classic theme. But due to time pending and get this application upgrade 7.2 to production in June. I need to move fast. However, I would like to create an entire different frontend theme for example, I want to just have a simple login page with background randomized images without the login modal link. emoticon
Andrew Jardine:

Hah! nice, sorry, weekend arrived and the other half of my career (parenting) took over. Your solution is the only real "safe" way I know to do it so that is what I was going to suggest. I've used this a couple times but most of the time I just provide the overrides on my own. I suppose at the end of the day it doesn't really make much of a difference and copying over the Classic would be faster, but I guess I, personally, have found that more often than not the theme I am tasked to build doesn't look much like the Classic theme either emoticon
thumbnail
Ivan Zaera, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
I've notified the docs team :-).

Also I have created this -> https://github.com/liferay/liferay-js-themes-toolkit/issues/480
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Oops! missed that one emoticon -- looks like all my advice to run an update is advice I should be taking myself! Thanks Ivan.
thumbnail
Christoph Rabel, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts
Maybe it would be worthwhile to add a warning to the toolkit, something like: "Warning: Unsupported node/npm version. See ... for details"? If it works, everything is fine, if it doesn't work, such a warning would give a hint that it could be due to the node version.
thumbnail
Ivan Zaera, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
We have such check in Themes Toolkit (see https://github.com/liferay/liferay-js-themes-toolkit/blob/master/packages/liferay-theme-tasks/lib/checkNodeVersion.js) but in this case it is not valid, because the problem was that the toolkit didn't work in newer versions, not older ones.

There's no way to know if something will fail in a future version :-).

The only thing we can do is adding a check (now that we know it) in v9 saying that it doesn't work for node >10 and explaining what needs to be done.
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Ivan has already answered so I guess this response is kind of moot now, but I did recently get that kind of a message from the BLADE tools when I foolishly tried to use the NPM React Portlet template and ended up with a message saying it was no longer supported! It was nice to get the message, but I was left wondering why lol. Fortunately I was able to track down some folks from the tools team and they were able to shed some light (tldr verision was, you should use the js toolkit instead now). Regardless though, it was useful to get some kind of a message other than a framework error for sure. 
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
lol.  emoticon Andrew, how do you do the update? Can you try to do a gulp deploy with LR version 7.2?  Using the new theme gernerator once you do the update and let m e knw if you get any gulp errors.
Andrew Jardine:

Ivan has already answered so I guess this response is kind of moot now, but I did recently get that kind of a message from the BLADE tools when I foolishly tried to use the NPM React Portlet template and ended up with a message saying it was no longer supported! It was nice to get the message, but I was left wondering why lol. Fortunately I was able to track down some folks from the tools team and they were able to shed some light (tldr verision was, you should use the js toolkit instead now). Regardless though, it was useful to get some kind of a message other than a framework error for sure. 
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
For me, with the 7.2 generator (v9) and the version of gulp I have on my machine (v2.2.0) the deploy task executes without issue.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
I mean can you reinstall the theme generator (​​​​​​​
`npm install -g generator-liferay-theme)
and as Ivan mention the option that shows 7.2/7.3 select version 7.2 and do a gulp deploy. I have use gulp 2..2.0 and it doesn't worked. Can you send me screen shots. Thanks 
Andrew Jardine:

For me, with the 7.2 generator (v9) and the version of gulp I have on my machine (v2.2.0) the deploy task executes without issue.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Hi Andrew, thanks so much for your help. Just want to know, as I also mention to Ivan, if the themes created or stlyed or unstyled I am not seeing the template and js folders. I would like to modify the 7.2 theme footer and replace the image in the portal_normal.ftl. Also, I believe as Ivan had stated in his thread you will need to use version 4.0.0 gulp. So you may want to update  your gulp version if you update ypur theme generator to 10. 
Kevin Matthews:

I mean can you reinstall the theme generator (​​​​​​​
`npm install -g generator-liferay-theme)
and as Ivan mention the option that shows 7.2/7.3 select version 7.2 and do a gulp deploy. I have use gulp 2..2.0 and it doesn't worked. Can you send me screen shots. Thanks 
Andrew Jardine:

For me, with the 7.2 generator (v9) and the version of gulp I have on my machine (v2.2.0) the deploy task executes without issue.
Kevin Matthews, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Expert Posts: 253 Join Date: 1/25/16 Recent Posts
Ok found it. Its in the build folder.
But I am unable to see my theme when I go to pages and pages setting. I only see the classic theme. When you did a gulp deploy where do you go in the portal UI to find your theme?

Kevin Matthews:

Hi Andrew, thanks so much for your help. Just want to know, as I also mention to Ivan, if the themes created or stlyed or unstyled I am not seeing the template and js folders. I would like to modify the 7.2 theme footer and replace the image in the portal_normal.ftl. Also, I believe as Ivan had stated in his thread you will need to use version 4.0.0 gulp. So you may want to update  your gulp version if you update ypur theme generator to 10. 
Kevin Matthews:

I mean can you reinstall the theme generator (​​​​​​​
`npm install -g generator-liferay-theme)
and as Ivan mention the option that shows 7.2/7.3 select version 7.2 and do a gulp deploy. I have use gulp 2..2.0 and it doesn't worked. Can you send me screen shots. Thanks 
Andrew Jardine:

For me, with the 7.2 generator (v9) and the version of gulp I have on my machine (v2.2.0) the deploy task executes without issue.
thumbnail
Andrew Jardine, modified 4 Years ago.

RE: Liferay Theme Generator 7.2 ? Theme Build Errors with Liferay Studio

Liferay Legend Posts: 2416 Join Date: 12/22/10 Recent Posts
Yeah definitely -- I also like your suggestion of updating the matrix with the associated gulp dependency version. Some of the docs can actually be changed by you as a community member.