Case where Uniform import doesn't work through require() (e.g. when using Webpack)

[justinmz]

Hi, I installed the plugin but keep getting an error "jQuery is not defined". Checked the Runkit test and it seems broken in there as well.

[shehi]

There are two JS files in /dist folder, one is standalone (without jQuery), the other is bundled with jQuery. Which one are you using? If you are using standalone one, make sure you also include jQuery somewhere before it.

This package isn't really NPM module compatible, more like a classic JS package - it won't require (i.e. import) jQuery even when jQuery is listed as a dependency. You will have to import jQuery manually. The reason I included bundled one, was actually to show the users an example to how concatenate and bundle this package with other packages (by providing a Docker env and Gulp integration).

[justinmz]

It should be the standalone version. Also I'm using webpack for the first time and including it like this.

import $ from "jquery"; var uniformJs = require("uniform-js");

Jquery is definitely there because it's being used for something else. Might just be that I'm including your script incorrectly?

[shehi]

I believe this package is named "jquery.uniform", not "uniform-js"...

[shehi]

And... requiring it with Webpack (which I use in my other open source project as well, but not here) might not work: it'd import both JS files from /dist. Nah, main entry point in package.json is the standalone dist file.

Ok, I think I will have to remove bundled version after all... Hmm...

[shehi]

I will look into this, this weekend - let me know if you fix it and find some workaround it in the meantime.

[imballinst]

@justinmz Hello, have you tried adding this plugin in your webpack.config.js?

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.$": "jquery",
    "window.jQuery": "jquery"
})

That will provide jquery to the dependencies that depend on jquery. Then, in your Javascript file:

import 'jquery.uniform'; //the same as 'jquery.uniform/dist/js/jquery.uniform.standalone'; 
import 'jquery.uniform/dist/css/default.css';

$("select, input:checkbox, input:radio, input:file").uniform();

That works for me. Let me know if the problem persists! :D

[justinmz]

Hey, we ended up including jQuery globally as we needed it across most of our templates which solved the problem for us.

[shehi]

Thanks for feedback.

[zuhriyansauqi]

@Imballinst should it works with jquery 3.x.x?

[imballinst]

@zuhriyansauqi I believe it does, I am using jQuery ^3.2.1 in my project and it works seamlessly (https://webpack.js.org/plugins/provide-plugin/)

[zuhriyansauqi]

@Imballinst mine doesn't work. Using the same webpack setting as above and it says that uniform is not a function. :(

[imballinst]

@zuhriyansauqi What are the version of your jquery and jquery-uniform? Mine are these:

dependencies: {
    ...
    "jquery": "^3.2.1",
    "jquery.uniform": "^4.2.0",
   ....
}

[zuhriyansauqi]

@Imballinst

dependencies: {
    ...
    "jquery": "^3.2.1",
    "jquery.uniform": "^4.2.0",
   ....
}

same as yours.. I'm using the latest version.

when i call $('.styled').uniform(), it give me an error.

[imballinst]

Ah, I see. I guess the problem is not in the Webpack, then. Maybe you don't import jquery-uniform correctly? I import it in my entry file, because it works globally across all my modules. How and where do you import it? Also make sure that jquery is imported before jquery-uniform

[zuhriyansauqi]

import $ from 'jquery'
import 'select2'
import 'jquery.uniform'

componentDidMount() {
  $('.select').select2({ width: '100%' })
  $('.styled').uniform()
}

new webpack.ProvidePlugin({
jQuery: 'jquery',
  $: 'jquery',
  jquery: 'jquery',
  'window.$': 'jquery',
  'window.jQuery': 'jquery'
})

@Imballinst

[imballinst]

Ah, you are using it with React, I see. I will need to try it first (because I haven't tried it yet in React), I thought you were trying it with plain HTML or something. I'll inform you when I'm done!

[imballinst]

This works for me @zuhriyansauqi

...
import $ from 'jquery';
import 'jquery.uniform';
import 'jquery.uniform/dist/css/default.css';
...

class Test extends React.Component {
  componentDidMount() {
    $('.xd').uniform();
  }

  render() {
    return (
      <form>
        <input className="xd" type="checkbox" />
        <button>submit</button>
      </form>
    );
  }
}

render(
  <Test />,
  document.getElementById('test-div')
);

Without Uniform: With Uniform:

I don't know actually what went wrong for you. Did you use CommonChunksPlugin and forget to include the chunk(s) in your HTML/template file? Also, have you tried to removing node_modules and do another npm install?

[meliborn]

Have the same issue with Vue.js Webpack config:

const webpack = require('webpack');

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

Using in component:

import $ from 'jquery';
import 'jquery.uniform';

export default {
  name: 'CheckBox',
  mounted(){
    $(this.$refs.unifyCheckBox).uniform({
        radioClass: 'choice'
    });
  }
}

   "jquery": "^3.3.1",
    "jquery.uniform": "^4.2.2",

[vesper8]

@meliborn did you ever figure it out? I'm also using Vue and Uniform is giving me so much pain!! I can't even get it to work if I include the scripts normally.. and I would much rather import it into my components.. how did you solve it in the end?