I'm having a hard time importing my uikit.js in my react js component.

This is my import sample, the uikit.css works but the uikit.js provides this kind of error:

 import './uikit/css/uikit.css';
 import './uikit/js/uikit.js';

  Line 5:     'define' is not defined         no-undef
  Line 5:     'define' is not defined         no-undef
  Line 573:   'DocumentTouch' is not defined  no-undef
  Line 1107:  'MSGesture' is not defined      no-undef
  Line 5039:  Unexpected use of 'location'    no-restricted-globals
  Line 5043:  Unexpected use of 'location'    no-restricted-globals
  Line 6679:  Unexpected use of 'location'    no-restricted-globals

I'm having a hard time importing my uikit.js in my react js component.

This is my import sample, the uikit.css works but the uikit.js provides this kind of error:

 import './uikit/css/uikit.css';
 import './uikit/js/uikit.js';

  Line 5:     'define' is not defined         no-undef
  Line 5:     'define' is not defined         no-undef
  Line 573:   'DocumentTouch' is not defined  no-undef
  Line 1107:  'MSGesture' is not defined      no-undef
  Line 5039:  Unexpected use of 'location'    no-restricted-globals
  Line 5043:  Unexpected use of 'location'    no-restricted-globals
  Line 6679:  Unexpected use of 'location'    no-restricted-globals

• javascript
• reactjs
• uikit

• import UIkit from 'uikit' – Ash Commented May 17, 2018 at 18:51

3 Answers 3

This shouldn't be a problem. First of all install uikit with

npm i uikit --save

Then import it into your application as you would any other package.
If you used create-react-app, and you are calling it in src directory, just do

import '../node_modules/uikit/css/uikit.css'

else determine the depth and adjust the relative path accordingly

I did it by doing the following;

1. install uikit * npm i uikit --save or yarn add uikit --save

2. Go to the index.js file and include this so u can use it in any component;

    import "uikit/dist/css/uikit.min.css";
   

   or/and

   import "uikit/dist/css/uikit-core.min.css";
   

NB: Don't forget to include the uikit javascript by including this in your index.js file too.

 import "uikit/dist/js/uikit.min.js"; 

Hopefully, this helps!!

Don't forget, use data-uk-... instead of uk-... in react. For example:

<ul className="uk-grid" data-uk-grid>
    <li>Home</li>
    <li>About</li>
</ul>

• according to: https://getuikit.com/docs/javascript#component-usage