Can't use UIkit with Webpack

Question

Simply set up a project with webpack. Just install uikit with npm install uikit --save

in my main js file I use

import 'jquery';
import 'uikit/dist/js/uikit.js';

In my main html file I write below code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.12/css/uikit.min.css" />
</head>
<body>

<ul uk-accordion>
    <li class="uk-open">
        <h3 class="uk-accordion-title">Item 1</h3>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 2</h3>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <h3 class="uk-accordion-title">Item 3</h3>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

<script src="dist/main.js"></script>
</body>
</html>

White run the npm start everything works well.. But it says Uncaught ReferenceError: UIkit is not defined.

Error picture is here. click on me

What I missing.. thanks for the help.

My github repo link is https://github.com/anamwp/style-switcher — Anam, Feb 24 '17 at 06:33

score 3 · Answer 1 · edited May 23 '17 at 12:17

UIKit needs its stuff in the window object. So this might be the naive way to do it in main.js:

import Vue from 'vue';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
import jQuery from 'jquery';
import App from './App';

UIkit.use(Icons);

window.jQuery = jQuery;
window.UIkit = UIkit;

module.exports = new Vue({
  router,
  el: '#app',
  template: '<App/>',
  components: { App },
  store,
});

Instead, a better solution seems to be to edit the Webpack config, as per this SO answer. So, this works for me:

{
    test: require.resolve('jquery'),
    loader: 'expose-loader?jQuery!expose-loader?$'
  },
  {
    test: require.resolve('uikit'),
    loader: 'expose-loader?UIkit'
  }

score 0 · Answer 2 · answered Nov 26 '20 at 23:21

Yes you can.

npm install uikit --save

and add this to you startup script

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// loads the Icon plugin
UIkit.use(Icons);

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

Official documentation here UIkit

A starter project here gabihodoroaga/webpack-uikit-translate

And a tutorial here hodo.dev

Can't use UIkit with Webpack

2 Answers2