Yarn: Bug: unable to install semantic-ui

[just-boris]

What is the current behavior?
Semantic-UI installation hangs up with the following output:

$ yarn add semantic-ui 
yarn add v0.15.1
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning [email protected]: The engine "rhino" appears to be invalid.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[1/1] ⠐ semantic-ui:     at AnonymousObservable.tryCatcher (/home/bserdiuk/coding/test/node_modules/rx-lite/rx.lite.js:63:31)
[-/1] ⠐ waiting...
[-/1] ⠈ waiting...
[-/1] ⠈ waiting...
[-/1] ⠈ waiting...

What is the expected behavior?
the package installs fine.

Please mention your node.js, yarn and operating system version.

Ubuntu 16.04.1 LTS
Node v6.7.0
Yarn v0.15.1

P.S. Semantic-UI has a huge installation script. I guess it relies on some undocumented NPM logic. If I can gather more information for you, tell me how, I'd be happy to help.

[rangelfinal]

Same problem here.
Fedora 24, Node v4.6.0, Yarn v0.15.0

[flipvrijn]

Had the same problem, but I think I know what the problem is:

Semantic UI uses an interactive CLI to install (parts of) Semantic UI. By canceling _yarn add semantic-ui_ and navigating to the package folder inside node_modules, using _gulp_ for the install script you get the interactive CLI and from there you can install Semantic UI as you please.

[choliver]

Confirm very similar problem here, with OSX 10.12.1, Yarn 0.17.9, Node 7.2.0.

However, in my case I have "autoInstall": true in my semantic.json (see http://semantic-ui.com/introduction/build-tools.html#auto-install--continuous-integration), which skips the interactive CLI when installing with npm. However, Yarn is still hanging.

So I think there's something else going on as well as @flipvrijn's suggestion.

[choliver]

A potential clue. Here is the output from yarn --json:

{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Using gulpfile ~/repos/experiments/semantic-yarn/node_modules/semantic-ui/gulpfile.js"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Starting 'install'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[2J\u001b[0;0f"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[31mCannot locate files to update at path:  /Users/oliver/repos/experiments/semantic-yarn/semantic/src/definitions\u001b[39m"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Running installer"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Starting 'run setup'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Finished 'run setup' after 645 μs"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Starting 'create install files'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[2J\u001b[0;0f"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"------------------------------"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[34mCreating site theme folder src/site/\u001b[39m"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Starting 'create theme.config'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[34mAdjusting @siteFolder to:  site/\u001b[39m"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[34mCreating src/theme.config (LESS config) src/theme.config\u001b[39m"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Finished 'create theme.config' after 25 ms"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Starting 'create semantic.json'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"\u001b[34mCreating config file (semantic.json) semantic.json\u001b[39m"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Finished 'create semantic.json' after 14 ms"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Finished 'create install files' after 63 ms"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"Starting 'clean up install'..."}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49]"}}
{"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":1,"worker":0,"message":"[15:12:49] Finished 'install' after 83 ms"}}

The 'clean up install' Gulp task is never completing, despite the outer 'install' task having completed. Indeed, here's the relevant snippet from pstree:

 | |-+= 64997 oliver /Applications/iTerm.app/Contents/MacOS/iTerm2 --server zsh
 | | \-+= 64998 oliver zsh
 | |   \-+= 73861 oliver node /usr/local/bin/yarn --json
 | |     \--- 73923 oliver gulp

I suspect it's something to do with SUI's use of gulp.start, but I'm not a Gulp expert, nor can I explain why this apparently works ok running under npm.

[philostler]

Just bumped into this issue. Output I'm getting...

[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"Starting 'install'..."}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"\u001b[2J\u001b[0;0f"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"[15:43:52] Starting 'run setup'..."}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"\u001b[?25l"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"  Custom (Customize all src/dist values)"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"[15:43:52]"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"    at AnonymousObservable.tryCatcher (/Users/philostler/Projects/test/client/desktop/core/node_modules/rx-lite/rx.lite.js:63:31)"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"[15:43:52] 'install' errored after 28 ms"}}
[15:43:52] → {"type":"activitySetTick","data":{"id":1,"header":"semantic-ui","current":2,"worker":0,"message":"    at AnonymousObservable.tryCatcher (/Users/philostler/Projects/test/client/desktop/core/node_modules/rx-lite/rx.lite.js:63:31)"}}

[CaffeinatedCM]

I'm not sure if this will be helpful to anyone else; But I'm using react in my project with semantic-ui-react and found that the easiest way for me to avoid this error until the bug is fixed is to just use the semantic-ui-css package and then in my build process add a step to copy the necessary files from node_modules/semantic-ui-css to my output folder.

[philostler]

^^ Good shout @CaffeinatedCM for people that only need final CSS files. I'm also using semantic-ui-react but am building my own theme so have to use semantic-ui to achieve that.

Side note, if you're using webpack you can use the style/css-loader and reference SUI CSS directly without copying them to your own source directory

I've investigate this a little further. This was failing only on my Docker builds at first, installing locally worked fine. But then I've been able to reproduce this locally by using yarn install --force. Hangs everytime for me using the force flag.

[philostler]

@bobvanderlinden has created an issue on Semantic-UI to track this

https://github.com/Semantic-Org/Semantic-UI/issues/4801

[evenflow58]

A similar issue seems to be occuring during a npm install on TFS:

[email protected] install C:\BuildAgent4_work\10\s\Sapsan\Client\node_modulessemantic-ui
gulp install
Using gulpfile C:\BuildAgent4_work\10\s\Sapsan\Client\node_modulessemantic-ui\gulpfile.js
Starting 'install'...
Cannot locate files to update at path: C:\BuildAgent4_work\10\s\Sapsan\Client\semantic\src\definitions
Running installer
Starting 'run setup'...
Finished 'run setup' after 824 ╬╝s
Starting 'create install files'...
Auto-Installing (Without User Interaction)
Creating site theme folder src/site/
Starting 'create theme.config'...
Adjusting @siteFolder to: site/
Creating src/theme.config (LESS config) src/theme.config
Finished 'create theme.config' after 42 ms
Starting 'create semantic.json'...
Creating config file (semantic.json) semantic.json
Finished 'create semantic.json' after 29 ms
Finished 'create install files' after 569 ms
Starting 'clean up install'...
Finished 'clean up install' after 14 ms
Finished 'install' after 593 ms

It just sits on the finished prompt. It might be that TFS doesn't attach to any spawned processes properly so maybe the issue is different but the result is the same.

[cowwoc]

Have any of the developers had a chance to take a look? It's important to establish whether the bug lies in yarn or semantic ui or else this bug will never get looked at.

[jlukic]

If anyone from yarn team has suggestions on what could be causing the issues let me know.

[bestander]

Can repro in 0.24 on macos with

yarn add semantic-ui 

[ricardovf]

+1, this would be great.

[bestander]

Digging into that now.
The reason for installation getting stuck is in gulp install script in install phase of semantic-ui package.

[bestander]

Looks like semantic-ui has some interactive installation step that Yarn does not print

Starting 'run setup'...
 ? Set-up Semantic UI (Use arrow keys)
❯ Automatic (Use defaults locations and all components)
  Express (Set components and output folder)
  Custom (Customize all src/dist values)

 'run setup' errored after 32 ms
[20:27:51] SyntaxError: Invalid regular expression: /.{1,0}/: numbers out of order in {} quantifier
    at RegExp (native)
    at breakLines (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/utils/screen-manager.js:108:15)
    at ScreenManager.render (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/utils/screen-manager.js:55:22)
    at Prompt.render (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/prompts/list.js:103:15)
    at Prompt._run (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/prompts/list.js:74:8)
    at Prompt.run (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/prompts/base.js:57:8)
    at Object.<anonymous> (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/ui/prompt.js:84:12)
    at module.exports (/Users/bestander/work/temp/semantic/node_modules/run-async/index.js:15:21)
    at AnonymousObservable.__subscribe (/Users/bestander/work/temp/semantic/node_modules/inquirer/lib/utils/utils.js:16:7)
    at AnonymousObservable.tryCatcher (/Users/bestander/work/temp/semantic/node_modules/rx-lite/rx.lite.js:63:31)

[bestander]

Does anyone have an idea how to detect that a package is trying to open an interactive console in install scripts?
I think in this case Yarn should fail installation, this is not the type of install scripts that is supported by Yarn.

[TLDay]

this issue also happened when I want to install flexjs.
yarn global add flexjs

yarn global v0.22.0
warning No license field
[1/4] 🔍  Resolving packages...
warning flexjs > replace > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning flexjs > [email protected]: wrench.js is deprecated! You should check out fs-extra (https://github.com/jprichardson/node-fs-extra) for any operations you were using wrench for. Thanks for all the usage over the years.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
[1/1] ⠂ flexjs: This is an optional component (y/n): 
[-/1] ⠂ waiting...
[-/1] ⠂ waiting...
[-/1] ⠂ waiting...
[-/1] ⠂ waiting...

Then I can't enter anything except Ctrl+C

[TLDay]

@bestander I think give user an interactive building process is an expected operation.But I don't know if it's difficult to implement.

[bestander]

Yarn could have an alternative/optional serial scripts builder for those cases.
PR from the community members is welcome.

[bestander]

At this moment the core team is not focusing on fixing this issue because we believe that dependencies should be able to be installed automatically and in parallel mode.
When a dependency is trying to steal stdin even in a non TTY mode this seems to me an antipattern.

[jdickey]

@TLDay, @bestander Semantic UI supports an auto install setup, as touched on by a couple of comments earlier in this issue; is that relevant to what's killing us here?

[BrockReece]

For anyone else struggling with this, we have just fixed this issue by setting autoInstall: true in our semantic.json

Thanks @jdickey and @choliver

[TLDay]

@jdickey No, I was facing trouble in flexjs installation process. Thanks for your reply.😊

[anuraags]

Had trouble with this recently and just to expand on the answer provided by @BrockReece there is a "semantic.json.example" downloaded into "node-modules/semantic-ui" when running npm/yarn.
Copy this file into your project root folder as "semantic.json" and set "autoInstall: true" (it is defaulted to false).

[amingilani]

I'm just going to ask here. Did anyone find a workaround with Rails 5.1 on webpack?

[amingilani]

Got it, just change the path to node_modules/semantic-ui

Here's my semantic.json in the root:

{
  "base": "node_modules/semantic-ui/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "dist/",
      "uncompressed": "dist/components/",
      "compressed": "dist/components/",
      "themes": "dist/themes/"
    },
    "clean": "dist/"
  },
  "permission": false,
  "autoInstall": true,
  "rtl": false,
  "version": "2.2.13"
}

[BYK]

When a dependency is trying to steal stdin even in a non TTY mode this seems to me an antipattern.

Although I agree with this, I think we can simply call stdin.end() on the spawned script to ensure it never stalls on waiting for user input. What do you all think?

[bestander]

Good idea

On Mon, Oct 30, 2017 at 4:41 AM Burak Yiğit Kaya [e-mail]
wrote:

When a dependency is trying to steal stdin even in a non TTY mode this
seems to me an antipattern.

Although I agree with this, I think we can simply call stdin.end() on the
spawned script to ensure it never stalls on waiting for user input. What do
you all think?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/yarnpkg/yarn/issues/976#issuecomment-340419663, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACBdWCrck0jWMyr1v2DDGr0T8ROO0Naeks5sxbXegaJpZM4KVnPW
.

[sharat9211]

@philostler I am trying to build a custom theme in react and am using webpack. What will be the best way to go about it?

[uiucjcwhite]

This issue is still persisting with trying to install semantic-ui . Output provided by yarn install
[4/4] Building fresh packages... [1/3] ⢀ grpc: info ok [-/3] ⢀ waiting... [3/3] ⢀ semantic-ui: Starting 'run s [-/3] ⢀ waiting... [-/3] ⠠ waiting...

[respire]

for 2.3.0, this works for me
official reference: https://semantic-ui.com/introduction/build-tools.html

1. add semantic.json at your project root

{
  "base": "",
  "version": "2.3.0",
   "paths": {
     "source": {
      "config"      : "src/theme.config",
      "definitions" : "src/definitions/",
      "site"        : "src/site/",
      "themes"      : "src/themes/"
    },
     "output": {
      "packaged"     : "dist/",
      "uncompressed" : "dist/components/",
      "compressed"   : "dist/components/",
      "themes"       : "dist/themes/"
    },
    "clean"        : "dist/"
  },
  "permission" : false,
  "rtl": false,
  "components": [
    "reset",
    "site",
    "button",
    "container",
    "divider",
    "flag",
    "header",
    "icon",
    "image",
    "input",
    "label",
    "list",
    "loader",
    "rail",
    "reveal",
    "segment",
    "step",
    "breadcrumb",
    "form",
    "grid",
    "menu",
    "message",
    "table",
    "ad",
    "card",
    "comment",
    "feed",
    "item",
    "statistic",
    "accordion",
    "checkbox",
    "dimmer",
    "dropdown",
    "embed",
    "modal",
    "nag",
    "popup",
    "progress",
    "rating",
    "search",
    "shape",
    "sidebar",
    "sticky",
    "tab",
    "transition",
    "api",
    "form",
    "state",
    "visibility"
  ],
  "admin": false,
  "autoInstall": true
}

1. add theme.config at project root

/*

████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝

*/

/*******************************
        Theme Selection
*******************************/

/* To override a theme for an individual element
   specify theme name below
*/

/* Global */
@site       : 'default';
@reset      : 'default';

/* Elements */
@button     : 'default';
@container  : 'default';
@divider    : 'default';
@flag       : 'default';
@header     : 'default';
@icon       : 'default';
@image      : 'default';
@input      : 'default';
@label      : 'default';
@list       : 'default';
@loader     : 'default';
@rail       : 'default';
@reveal     : 'default';
@segment    : 'default';
@step       : 'default';

/* Collections */
@breadcrumb : 'default';
@form       : 'default';
@grid       : 'default';
@menu       : 'default';
@message    : 'default';
@table      : 'default';

/* Modules */
@accordion  : 'default';
@checkbox   : 'default';
@dimmer     : 'default';
@dropdown   : 'default';
@embed      : 'default';
@modal      : 'default';
@nag        : 'default';
@popup      : 'default';
@progress   : 'default';
@rating     : 'default';
@search     : 'default';
@shape      : 'default';
@sidebar    : 'default';
@sticky     : 'default';
@tab        : 'default';
@transition : 'default';

/* Views */
@ad         : 'default';
@card       : 'default';
@comment    : 'default';
@feed       : 'default';
@item       : 'default';
@statistic  : 'default';

/*******************************
            Folders
*******************************/

/* Path to theme packages */
@themesFolder : 'themes';

/* Path to site override folder */
@siteFolder  : 'site';


/*******************************
         Import Theme
*******************************/

@import "theme.less";

/* End Config */

PS. if you want to do custom theme, you can edit this file. (https://semantic-ui.com/usage/theming.html#using-packaged-themes). i apply default theme here.(copy from node_modules/semantic-ui/src/theme.config.example)

finally do
yarn add semantic-ui

[btd1337]

@respire it's necessary to remove comments in files.

[TallOrderDev]

Ran into this tonight with 1.5.1 (newest), got it to work by adding the files, running npm install and then yarn install. Edit: Also set auto install to true.

Yarn install still hangs.

[ghost]

There is a simple workaround for this:

> yarn add semantic-ui --ignore-scripts
> cd ./node_modules/semantic-ui/
> gulp install

Then, we should complete the installation by going to <project_root>/semantic/ and running gulp build

[jlukic]

I think I can probably, at the very least, detect yarn and then provide at least a better text explanation of how to finish install.

[allomov]

Unfortunately, I experience the same issue with semantic-ui on macos 10.13 using yarn 1.16. Not sure if #5632 fixes the issue for me and it is possible to run yarn add interactively on macos.

[allomov]

Actually yarn add semantic-ui --ignore-scripts performs the magic trick and solved the issue for me. I do not need gulp build script since I am going to use webpack to build it.

[Abibibi]

There is a simple workaround for this:

> yarn add semantic-ui --ignore-scripts
> cd ./node_modules/semantic-ui/
> gulp install

Then, we should complete the installation by going to <project_root>/semantic/ and running gulp build

Thank you so much for this!! I just installed beforehand gulp globally as administrator with this command sudo yarn global add gulp (I use Linux) and then added semantic-ui the way you suggested and it works like a charm.