Why installing Semantic UI via npm misses jQuery & throws an reference error to it?
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.
- I've installed successful node.js (v4.0.0) with the official Windows Installer.
- Typed in Windows cmd
npm install -g gulpto install gulp (npm v2.14.2).- First time I've got an error
ECONNRESET, which I could solve. So gulp was successful installed globally.
- First time I've got an error
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 withgulp 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
Answer
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>