[build] 'npm install fomantic-ui' fails

[damontarry]

Bug Report

Steps to reproduce

1. mkdir foobar
2. cd foobar
3. npm install fomantic-ui

Expected result

fomantic-ui installed without error

Actual result

[15:07:55] Starting 'run setup'...
npm ERR! ? Set-up Semantic UI (Use arrow keys)
npm ERR! ❯ Automatic (Use default locations and all components)
npm ERR!   Express (Set components and output folder)
npm ERR!   Custom (Customize all src/dist values) [15:07:55] The following tasks did not complete: install, run setup
npm ERR! [15:07:55] Did you forget to signal async completion?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/e1ectr0n/.npm/_logs/2021-03-10T23_07_57_254Z-debug.log

2021-03-10T23_07_57_254Z-debug.log

Version

• Fomantic UI: 2.8.8-beta.179 (also tried 2.8.7, 2.8.6, ...)
• Debian Bullseye
• npm 7.5.2
• node.js 12.21.0

[lubber-de]

I cannot reproduce using these steps (Windows / WSL / Ubuntu 20.04). Does it at least build if you run npx gulp build (instead of gulp install)

cd /home/e1ectr0n/foobar/node_modules/fomantic-ui
npx gulp build

[damontarry]

• There is no node_modules folder after running npm install fomantic-ui. I think npm cleans it up if the install fails?
• Fomantic builds properly with the following steps:
  • npm install --ignore-scripts fomantic-ui
  • cd node_modules/fomantic-ui
  • npx gulp install
  • npx gulp build
• It seems like npm has a problem during the interactive install step (i.e. Set-up Semantic UI (Use arrow keys)). When running npm install fomantic-ui, I can see this message printed out (as shown in my original post), but never have the opportunity to select any of the options (e.g.: Automatic (Use default locations and all components)). npm errors out immediately after printing this message.

[ViciousBadger]

I am getting the same error from the same steps.

[18:04:04] Starting 'run setup'...
npm ERR! ? Set-up Semantic UI (Use arrow keys)
npm ERR! ❯ Automatic (Use default locations and all components) 
npm ERR!   Express (Set components and output folder) 
npm ERR!   Custom (Customize all src/dist values) [18:04:04] The following tasks did not complete: install, run setup
npm ERR! [18:04:04] Did you forget to signal async completion?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/abadger/.npm/_logs/2021-03-11T17_04_04_840Z-debug.log

• Fomantic UI 2.8.7
• Manjaro linux 20.2.1
• Node v15.10.0
• NPM 7.6.5

[lubber-de]

@ViciousBadger Node 15 is currently not supported and reported already in #1859

[pvrobays]

I'm having the same issue, with node v13

• Fomantic UI 2.8.7
• Windows
• Node 13.14.0
• NPM 7.6.0

[jeffrson]

npm7 again...

https://github.com/fomantic/Fomantic-UI/issues/1767

[chall8908]

I'm also having this problem:

• Fomantic UI 2.8.7
• Ubuntu 20.10
• Node 14.16.1
• NPM 6.14.12

If it matters, I use NVM for node version management (its version is 0.33.11).

[rsbepvb]

Any update on a solution on this. I have spent a couple of hours trying to install and compile with no luck. Getting the same error.[

14:58:00] The following tasks did not complete: build, build-css, , , Building uncompressed CSS, Building compressed CSS [14:58:00] Did you forget to signal async completion?

Fomantic UI 2.8.7 Node v8.12.0 NPM 6.4.1

tried the following additional steps unsuccessfully:

npm install --ignore-scripts fomantic-ui cd node_modules/fomantic-ui npx gulp install npx gulp build

failes on npx gulp install error: ENOENT: no such file or directory, mkdir '/Users/....../Documents/Websites/FomanticTest/semantic/tasks/'

Appreciate any thoughts or assistance.

[lubber-de]

@rsbepvb Your setup should be supported and fine 🤔 When you switch to the fomantic-ui folder: Does only npx gulp build work?

[rsbepvb]

Unfortunately no. I just reopened the terminal in that folder and ran npx gulp build and it produced the following error [15:13:54] Using gulpfile ~/Documents/Websites/FomanticTest/node_modules/fomantic-ui/gulpfile.js [15:13:54] Starting 'build'... Building Semantic [15:13:54] Starting 'build-css'... [15:13:54] Starting 'Building uncompressed CSS'... [15:13:54] Starting 'Building compressed CSS'... [15:13:55] Created: ../../../semantic/dist/components/reset.rtl.min.css [15:13:55] Created: ../../../semantic/dist/components/reset.rtl.css [15:13:55] Created: ../../../semantic/dist/components/site.rtl.min.css [15:13:55] Created: ../../../semantic/dist/components/site.rtl.css Potentially unhandled rejection [2] Error: Error in plugin "gulp-less" Message: error evaluating function each: variable @colors is undefined in file

..... line: 141315:13:55] The following tasks did not complete: build, build-css, , , Building uncompressed CSS, Building compressed CSS [15:13:55] Did you forget to signal async completion?

[lubber-de]

Does a theme.config file exists in fomantic/src folder? (which should define the @themesFolder variable which in turn in will (also) include the colors.less file (where the @colors variable resides.)

I am bit confused about the uppercase @Colors you mentioned (because only lowercase @colors exists in the whole fomantic source)

[JPustkuchen]

I confirm this problem still exists. Update to 2.8.8 doesn't work. Before everything was fine. Please create a new release after this is fixed.

[lubber-de]

I confirm this problem still exists. Update to 2.8.8 doesn't work. Before everything was fine. Please create a new release after this is fixed.

Did you try the steps from https://github.com/fomantic/Fomantic-UI/issues/1911#issuecomment-796848505 ? Especially the --ignore-scripts parameter?

[JPustkuchen]

I confirm this problem still exists. Update to 2.8.8 doesn't work. Before everything was fine. Please create a new release after this is fixed.

Did you try the steps from #1911 (comment) ? Especially the --ignore-scripts parameter?

Yes, sadly didn't work for me. For now I switched back to the old version.

[lubber-de]

@JPustkuchen I cannot reproduce with my setup unfortunately. The steps at https://github.com/fomantic/Fomantic-UI/issues/1911#issuecomment-796848505 work without errors for 2.8.7 and 2.8.8 for me. But i have an oldfashioned local setup (node 10.19.0, npm 6.14.4 🙄 )

Once again, please: Which node/npm setup is working for you using 2.8.7, but not 2.8.8 ? I assume the node/npm versions are identical in both cases.

[lubber-de]

Which error are you getting exactly? 2.8.8 supports LESS 4 and uses gulp-less 5, that's the only difference i can imagine

[ShiiRochi]

Unfortunately no. I just reopened the terminal in that folder and ran npx gulp build and it produced the following error [15:13:54] Using gulpfile ~/Documents/Websites/FomanticTest/node_modules/fomantic-ui/gulpfile.js [15:13:54] Starting 'build'... Building Semantic [15:13:54] Starting 'build-css'... [15:13:54] Starting 'Building uncompressed CSS'... [15:13:54] Starting 'Building compressed CSS'... [15:13:55] Created: ../../../semantic/dist/components/reset.rtl.min.css [15:13:55] Created: ../../../semantic/dist/components/reset.rtl.css [15:13:55] Created: ../../../semantic/dist/components/site.rtl.min.css [15:13:55] Created: ../../../semantic/dist/components/site.rtl.css Potentially unhandled rejection [2] Error: Error in plugin "gulp-less" Message: error evaluating function each: variable @Colors is undefined in file

..... line: 141315:13:55] The following tasks did not complete: build, build-css, , , Building uncompressed CSS, Building compressed CSS [15:13:55] Did you forget to signal async completion?

I faced the same error on the project I am currently working on. A long time ago, I created a custom theme and used it for all things (I am still having not enough time to deep dive into fomantic-ui extending). I've succeeded to resolve that issue via switching everything to default in theme.config and finding parts where error occurred and fix'em step-by-step switching to my custom theme again and running build semantic command.

[lubber-de]

When you updated to 2.8.8, try a npm install inside the fomantic folder, it should update the LESS and gulp-LESS packages, as there is no other obvious reason that 2.8.7 works, but 2.8.8 does not.

Additionally are probably all of you using the rtl-switch? Does it work when not compiling with rtl? And did you check for existinace of the latest theme.less file (which includes the @colors variable which seems to be missing in your setups (this is independent of compiling using rtl or not).

I believe, by whatever reason, your theme.less file is an old one and does not contain the colors include OR your (default) theme does not contain the colors.less file. However this is unlikely as this file is part of the distributed version.

Please check if colors.less exists and you theme.less contains https://github.com/fomantic/Fomantic-UI/blob/135cfd1f5f29030143ac36968894a52661013820/src/theme.less#L44-L59

Did you change your @themesfolder perhaps ? Then your colors.less file might not be available explaining the errors´you mentioned

[lubber-de]

Original issue should now be fixed in #2272 because that won't start the interactive script automatically anymore

[lubber-de]

@rsbepvb @ShiiRochi Please open another issue because it's a different reason as described/guessed in https://github.com/fomantic/Fomantic-UI/issues/1911#issuecomment-1072512569

[ShiiRochi]

@lubber-de, thanks for the answer, but actually...this task is no longer relevant