9

Hy,

I'm trying to install the CSS-Framework "Semantic UI" on a Windows 10 PC with npm from node.js.

I've followed the official install-instructions carefully.

  1. I've installed successful node.js (v4.0.0) with the official Windows Installer.
  2. Typed in Windows cmd npm install -g gulp to install gulp (npm v2.14.2).
    • First time I've got an error ECONNRESET, which I could solve. So gulp was successful installed globally.

  3. At least I've tried several times to install Semantic UI with this code:

    npm install semantic-ui --save cd semantic gulp build
    Which does work halfway - WARN peerdependencies & the missing dependency package jQuery was the result. But I'm still able to build my fresh installed default Semantic UI Framework with gulp build.

I said it works halfway on my Windows 10 System, but also when I try to call my local file copy of the default template Fixed Menu I get in the google chrome developer tools following error:

Uncaught ReferenceError: jQuery is not defined / semantic.min.js:11

Okay, it's just a unknown reference, but that pointed me to the missing jQuery package. After googling for it I've found a npm package npm-install-missing (best result for my predicament) and try it out in my project folder - nothing happend, because there is no package.json dependency-file.

So I went deeper in my given project structure by npm "project folder\node_modules\semantic_ui and ran it again. The result was a complete package update of every package in the node_modules-folder with enclosed jQuery package and some more: github, gulp-concat-filenames, gulp-debug, gulp-git, gulp-json-editor, gulp-prompt, gulp-tap, merge-stream, mkdirp and wrench. So 11 packages were missed due to the dependencies of Semantic UI.

But the jQuery ReferenceError is still available. When you try google chromes developer tools on the official semantic-ui.com/, which is build with it's own framework, so you couldn't get any errors, although they put the semantic.min.js file in the same default directory-structure dist/semantic.min.js. Okay, my path has just one directory in front of: semantic/dist/semantic.min.js - but this is, how it's done in the official documentation.

Hopefully someone can help me to get this framework fully alive. :)

Thanks,
Robert

Community
  • 1
  • 1
Robert Jaskowski
  • 823
  • 4
  • 11
  • 21

2 Answers2

13

While jQuery is required by Semantic UI, it's not a npm requirement.

To clarify, jQuery is a client-side JavaScript Library. Using it requires you to include its .js file on your webpages inside a <script> tag. You can download it from the official website or use a CDN.

The jquery npm package is related, but in no way the same thing. This package is used when you want to build your own jQuery file (i.e. when you want to make some changes or have some specific requirements) - you usually don't want to do this.

In short, if gulp build worked for you, then you're all set - the only two files you need are semantic.css and semantic.js. Make sure jQuery (found on jquery.com, not the one installed using npm) is also included in your web pages, right before semantic.js. So your "base" HTML file should look something like this (assuming the generated semantic.css and semantic.js are in the dist folder):

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="dist/semantic.css">
</head>

<body>
    Body goes here  

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="dist/semantic.js"></script>
</body>

</html>
fstanis
  • 5,234
  • 1
  • 23
  • 42
  • 1
    Thanks a lot @fstanis!
    I see, I've to learn the basics first before using a advanced framework like Semantic UI and the dependent tools too. It saves a lot of time and nerves. ^^     – Robert Jaskowski Sep 16 '15 at 15:31
1

The problem may sit with node itself. And the reason may be because node insert extra symbol when jquery too want to insert the symbols with the same names

as specified here: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

........

But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

    <head> <script> window.nodeRequire = require; delete window.require;
    > delete window.exports; delete window.module; </script> 
     <script type="text/javascript" src="jquery.js"></script> 
    </head>

NOTE: very important in your scripts after that renaming and delete of symbols. You need to use the new symbol. So in place of require you use nodeRequire. That will solve the problem. I was in the same problem, developing a desktop app using electron. And that solved it for me nice and neat. That's a common problem. In most all solutions depending on node.js. I had the same problem once with angular when i used bootstrap. Jquery didn't work. And that's the reason. And here is the solution.

Mohamed Allal
  • 17,920
  • 5
  • 94
  • 97