Comments (19)
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).
from uniform.
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?
from uniform.
I believe this package is named "jquery.uniform", not "uniform-js"...
from uniform.
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...
from uniform.
I will look into this, this weekend - let me know if you fix it and find some workaround it in the meantime.
from uniform.
@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
from uniform.
Hey, we ended up including jQuery globally as we needed it across most of our templates which solved the problem for us.
from uniform.
Thanks for feedback.
from uniform.
@imballinst should it works with jquery 3.x.x?
from uniform.
@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/)
from uniform.
@imballinst mine doesn't work. Using the same webpack setting as above and it says that uniform is not a function. :(
from uniform.
@zuhriyansauqi What are the version of your jquery
and jquery-uniform
? Mine are these:
dependencies: {
...
"jquery": "^3.2.1",
"jquery.uniform": "^4.2.0",
....
}
from uniform.
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.
from uniform.
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
from uniform.
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'
})
from uniform.
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!
from uniform.
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
?
from uniform.
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",
from uniform.
@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?
from uniform.
Related Issues (20)
- Site is down HOT 9
- A radio button with no "name" property, doesn't check HOT 1
- Uncaught ReferenceError: returnFalse is not defined HOT 5
- Selected option won't be applied in Chrome v50 on Android 6 HOT 2
- Chrome v50 activates drop down twice (flickering) HOT 12
- about bindMany
- DevOps Overhaul HOT 3
- Website download link should point to 2.2.2, currently points to 2.2.0 HOT 1
- v4.0 - Final legacy browser release with major bugfixes
- jquery 怎么获取到复选框选中的value值 HOT 1
- 508 Compliancy "aria-checked" HOT 2
- Different label for file selection boxes that allow selection of multiple files HOT 2
- Multiple file selected but only one filename shown HOT 2
- getComputedStyle undefined HOT 7
- select boxes are not displayed properly when using tabbed panels HOT 2
- Select box preventdefault first click HOT 1
- Get value from radio checked HOT 4
- [FR] Allow adding a CSS class to field to avoid unwanted transformation
- @types for using with TypeScript+React?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from uniform.