Menu
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.
npm install -g gulp to install gulp (npm v2.14.2).
ECONNRESET, which I could solve. So gulp was successful installed globally.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
406
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements.
According to the StackShare community, Material-UI has a broader approval, being mentioned in 69 company stacks & 80 developers stacks; compared to Semantic UI React, which is listed in 16 company stacks and 22 developer stacks.
Who uses Semantic UI? 120 companies reportedly use Semantic UI in their tech stacks, including Snapchat, Accenture, and Kmong.
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>
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
