Geek Answers Handbook

Why install the semantic interface through npm jQuery passes and issues a link to it?

Hy

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

I closely followed the official installation instructions .

  • I installed successful node.js (v4.0.0) with the official Windows installer .
  • Windows cmd introduced npm install -g gulp for installing gulp (npm v2.14.2).
    • The first time I have an ECONNRESET error that I could solve . Thus, gulp was successfully installed globally.

  • At least I tried several times to set up a semantic interface with this code:

    npm install semantic-ui --save cd semantic gulp build
    Which works halfway is WARN peerdependencies and the missing jQuery dependency package. But I can still create a new installed default semantic interface platform with gulp build .

I said that it works halfway on my Windows 10 system, but also when I try to call a local copy of the default template file Fixed Menu I got into the Google Chrome developer tools after an error:

Unprepared ReferenceError: jQuery undefined /semantic.min.js: 11

Well, this is just an unknown link, but it pointed to a missing jQuery package. After searching it, I found the npm package npm -install-missing (the best result for my predicament) and try it in the project folder - nothing happens because the package.json dependency file does not exist.

So I went deeper in my project structure using npm "project folder \ node_modules \ semantic_ui and started it again. The result was a complete package update for each package in the node_modules stick with closed jQuery and a few more: github, gulp -concat-filenames , gulp -debug, gulp -git, gulp -json-editor, gulp -prompt, gulp -tap, merge-stream, mkdirp and key. Thus, 11 packages were skipped due to semantic interface dependencies.

But jQuery ReferenceError is still available. When you try to use the google chromes developer tools on the official semantic-ui.com/ , which is created with its own structure, so you cannot get any errors, although they put the semantic.min.js file in the same default directory dist /semantic.min.js. So, my path has only one directory in front: semantic / dist / semantic.min.js - but this is the way it is done in the official documentation.

Hope someone can help me fully implement this infrastructure. :)

Thanks,
Robert

+5
source share
2 answers

While jQuery is required for the semantic interface, this is not an npm requirement.

To clarify, jQuery is a JavaScript client library. Using it, you must include its .js file in your web pages inside the <script> . You can download from the official website or use the CDN .

the jquery npm package is bundled , but by no means the same. This package is used when you want to create your own jQuery file (i.e. when you want to make some changes or have some specific requirements) - usually you do not want to do this.

In short, if gulp build worked for you, then you are all set up - you only need two semantic.css and semantic.js files. Make sure jQuery (found on jquery.com and not the one installed using npm) is also included in your web pages, right before semantic.js. Therefore, your “basic” HTML file should look something like this (assuming that 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>
+12
source

The problem may be with the node itself. And the reason may be that node insert an extra character when jquery also wants to insert characters with the same name

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

Thanks to the integration of Node.js in Electron, there are some additional characters inserted into a DOM type module that are required for export. This causes problems for some libraries because they want to insert characters with the same name.

........

But if you want to keep the possibilities of using Node.js and the Electron API, you must rename the characters on 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: it is very important in your scripts after this renaming and deleting characters. You need to use a new character. Therefore, instead of require you use nodeRequire . This will solve the problem. I had the same problem - developing a desktop application using an electron. And that decided it for me beautifully and neatly. This is a common problem. In most of all solutions, depending on Node.js. I once had the same problem with angular when I used bootstrap. JQuery did not work. And that is the reason. And here is the solution.

0
source

More articles:


All Articles