Semantic-ui npm install

1

Has anyone successfully installed Semantic-ui via npm? I am trying to install it for Meteor 1.3 but so far no luck :frowning:

Uncaught TypeError: Package.describe is not a function, component-package.js:2

2 Likes
2

Until issue 6037 is resolved Iā€™d suggest sticking with Atmosphereā€™s semantic:ui package.

1 Like
3

Iā€™m using semantic-ui-less npm package with Meteor thanks to 1.3.2 RC 4 :slight_smile:

1 Like
4

Well still some issuesā€¦

5

Any update on this? What is the easiest way to get Semantic working these days. I cant install the Atmosphere package anymore since I had to remove some packages it depends on.

6

This issue still exists with Meteor v1.5.1 and itā€™s really annoying since semantic-ui for Meteor is not updated very often.

Here is what I did:

$ meteor create semantic2 && cd semantic2
$ meteor npm install --save semantic-ui@2.2.10

Note: Iā€™m specifying semantic-ui v2.2.10 here because v2.2.11 has a bug in the ā€œgulp buildā€ process (which is currently being addressed by the maintainer of semantic-ui and it should be fixed in a couple of days).

The last command will run the semantic-ui installer and I set the installation folder as ā€œclient/semantic/ā€ (using the automatic installation). You have to put it somewhere in the ā€œclientā€ folder otherwise the server will try to load semantic-ui as well, which doesnā€™t make sense to me.

Then:

$ cd client/semantic/
$ gulp build
$ cd ../..
$ meteor

The app is launched successfully. But now if you open the app in your browser and take a look at the console here is what you can see:

TypeError: Package.describe is not a function   app.js:52:1
component-package.js http://localhost:3000/app/app.js:52:1
fileEvaluate http://localhost:3000/packages/modules-runtime.js:343:9
require http://localhost:3000/packages/modules-runtime.js:238:16
<anonymous> http://localhost:3000/app/app.js:62659:1

I donā€™t understand why this issue occurs. Does anyone understand it? Or at least could give us a hand on understanding the source of this?

Any help would be much appreciated! Thanks!

7

Last time I messed around with semantic-ui I had to install it with this method:

But it would be much better if we could just get it working through npm.

8

I found the proper way to install the semantic-ui npm package in Meteor without any hack or dirty thing :slight_smile:
Iā€™m currently writing an article about it on Medium and I will ask for a submission on the Meteor Blog. I will post the link here very soon. Stay tuned!

EDIT: @nilsi The link you posted is about installing semantic-ui-css which is a very limited flavor of Semantic UI (only the default theme is supported).

1 Like
9

Im curious about this blog post. Let me know when you got it ready :slight_smile:

10

Did you ever get round to finishing that article? Iā€™m trying to get this working now myself.

11

The way we do it:

  1. Install semantic-ui npm package somewhere it wonā€™t be included in the meteor installation by default, like /private, and install gulp and related packages to build semantic.
  2. Set semantic.json to build to /public
{
  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "../../../public/semantic",
      "uncompressed": "../../../public/semantic/components",
      "compressed": "../../../public/semantic/components/",
      "themes": "../../../public/semantic/themes/"
    },
    "clean": "../../../public/semantic"
  },
  "permission": false,
  "autoInstall": false,
  "rtl": false,
  "version": "2.2.13"
}
  1. include <link rel="stylesheet" type="text/css" href="/semantic/semantic.min.css"> in your main.html
  2. Add some convenience scripts to package.json for easily building / watching
    "semantic:build": "cd ./private/semantic/semantic && gulp build"

Advantages:

  • It doesnā€™t slow down builds

Downsides:

  • It wonā€™t be included in the merged css bundle
2 Likes