Import uikit framework in webpack config error "UI.$ is not a function"

Question

I use Uikit in react project it success to import .less with resolve:{...} but issue on import uikit.js and I change to imports-loadaer is It was the same

in webpack.config.js file

...
...
,
resolve: {
    root: [
        path.join(__dirname, 'theme/js'),
        path.join(__dirname, 'theme/less'),
        path.join(__dirname, 'theme/img'),
        path.join(__dirname, 'theme/timeline')
    ],
    extensions: ['','.js','.less','.jpg','.png','.svg']
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
],
module:{
    loaders:[
        {
            test:/\.js$/,
            loader:'babel',
            exclude:[nodeModulesPath],
            query: {presets: ['es2015', 'react']}
        },
        {
            test: /\.(eof|eot|ttf|woff(2)?)(\?[a-z0-9]+)?$/,
            loader: "url-loader?name=./bin/font/[name]-[hash].[ext]"
        },
        {
            test: /\.(png|jpg|svg)?$/,
            loader: "url-loader?limit=30000&name=./bin/img/[name]-[hash].[ext]"
        },
        {
            test: /\.(less|css)?$/,
            loader: 'style!css!less'
        }
    ]
},

and call in file

import 'gradient/uikit' <-- work !
import $ from 'jquery' <--- work !
import 'uikit.js' <--- issue "UI.$ is not a function"

Is there any way. please

Answer 1

5 options:

1 (this worked fine)

This worked for me without the UI.$ issue:

global.jQuery = require('jquery')
global.$ = global.jQuery
require('uikit')
window.UIkit.offcanvas.show('#sidebar')

2 (not working for me)

In your main.js file add the following:

import $ from 'jquery'
import jQuery from 'jquery'
window.$ = $
window.jQuery = jQuery

This must be executed BEFORE the import UIkit from 'uikit' line. So, add this before importing any component that may use uikit.

3 (not working for me)

You can also try the new npm module uikit-loader: https://www.npmjs.com/package/uikit-loader

4 (not working for me)

You can also try adding this to your webpack config file:

var webpack = require('webpack')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery"
    })
  ]
}

5 (not working for me)

You can try the webpack imports-loader: https://www.npmjs.com/package/imports-loader