uikit: UIKit 3 js part does not work

Hello, trying out uikit 3 beta 4 I’m stuck on the javascript part. I’m getting Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined in line 9 of UIKit.js. It seems that it does not find $.

Edit: It seems, that this issue might be connected to me using electron, it seems to work on chrome.

Full file for reference

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.4/css/uikit.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://getuikit.com/assets/uikit/dist/js/uikit.min.js?168" defer></script>
</head>
<body>
<div class="uk-card uk-card-default uk-width-1-2@m">
    <div class="uk-card-body">
        <h3 class="uk-card-title">Labelmaker</h3>
        <p>Bitte einen Namen eingeben</p>
        <div class="uk-margin">
            <input class="uk-input" type="text" placeholder="name" id="namefield">
        </div>
    </div>
    <div class="uk-card-footer">
        <button onclick="triggerPrint()" class="uk-button uk-button-text">Drucken!</button>
    </div>
</div>
<script>
    // You can also require other files to run in this process
    //require('./renderer.js')
</script>
<script src="renderer.js"></script>
<!--<script src="assets/jQuery.js"></script>
<script src="assets/uiKit.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.4/js/uikit.js"></script>-->
</body>
</html>

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 5
  • Comments: 15 (3 by maintainers)

Most upvoted comments

Same error here. It is indeed electron related uikit displays perfectly outside of my electron app. Turns out this is part of the FAQs: http://electron.atom.io/docs/faq/

You need to rename the extra symbols electron puts in the DOM worked for me

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