Why installing Semantic UI via npm misses jQuery & throws an reference error to it?
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.