Semantic-UI: Installing through yarn freezes

When installing Semantic-UI using yarn, yarn gets stuck when it runs the install script of Semantic. It does not matter whether the "autoInstall": true is set in semantic.json, so it doesn’t seem to be a problem with the interactive CLI itself.

When yarn is called using --ignore-scripts it finishes the installation without problems.

This is probably a problem with yarn itself and an issue has been made on the issue tracker of yarn that can be found here, but for completeness I thought to create one here as well.

About this issue

  • Original URL
  • State: open
  • Created 8 years ago
  • Reactions: 43
  • Comments: 21 (2 by maintainers)

Most upvoted comments

In the end I ran npm install --save semantic-ui, which ran the install script, and then yarn install which baked the versions into yarn.lock and gulp install was quietly circumvented because it considered Semantic UI had already been installed. Kind of clunky but I think it did the trick?

Half a Solution:

I have found that if you use semantic.json and have autoInstall: false it will skip the interactive CLI and won’t freeze your build!

The condition for it to work is to have semantic-ui already installed at the location given at "base"

There is a nice, easy fix for this:

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

Finally, the semantic installation instructions say that after installing semantic, we must navigate to <project_root>/semantic/ and run gulp build

@bestander, one of Yarn team members, has commented the related Yarn issue:

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.

In other words, Yarn do not allow you to stop installation process and make dialog with user. It means, that this project itself should reconsider this behavior, for example, disable dialogs if installation is not run from NPM CLI.

Is there a reason why the gulp install needs to run on npm install? It seems to me the intent of the interactive CLI is meant for a dev who is bootstrapping semantic into their project but install runs in other contexts too. Why not change this in package.json:

  "scripts": {
    "install": "gulp install"
  },

to

  "scripts": {
    "bootstrap": "gulp install"
  },

Then the “Get Started” instructions would be:

npm install --save semantic-ui
npm run bootstrap

The current setup is really quite broken in a few basic npm scenarios. My present headache is an attempt to use semantic-ui inside my own theme package:

/theme
  /semantic
    /src
    /tasks
  package.json
  semantic.json

My app declares theme as a dependency in its package.json. Since theme depends on semantic-ui, when I attempt to install the app, the folder structure is going to look like this:

/app
  /node_modules
    /semantic-ui
    /theme
      semantic.json

Because npm flattens dependencies.

And now the folder structure doesn’t work. My semantic.json file is useless and can’t even be used to configure autoInstall.

As a workaround it seems after aborting the failed attempt and one more try with Yarn with apparent success, if then you run npm install semantic-ui --saveDev and go through the installation “all is fine”? As in, you get all the Semantic UI stuff created and a valid yarn.lock.