any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don't know how to manage that , any idea ?
jquery-ui-dist and jquery-ui-bundle do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui package from npm with webpack.
Update jquery-ui to 1.12 by updating package.json and npm install.
Then you can require each widget like this.
require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");
If you have used require("jquery-ui") before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.
See documentation on using the 1.12 official npm package.
For some reason jquery-ui didn't play nice with webpack. I had to require jquery-ui-bundle instead.
npm i -S jquery-ui-bundle
and then require it after jquery e.g.
require('jquery');
require('jquery-ui-bundle');
youre in luck I did this just that yesterday, it's rather easy.
npm install --save jquery jquery-ui
Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js
...
plugins: [
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
"window.jQuery":"jquery"
}),
...
Then include two aliases in the webpack.config.js
The node_modules folder
The jquery-ui folder
``````
resolve : {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui/jquery-ui.js",
// bind to modules;
modules: path.join(__dirname, "node_modules"),
Make sure that jquery gets loaded first in your app startup file.
var $ = require("jquery"),
require("jquery-ui");
If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(jpe?g|png|gif)$/i, loader:"file" },
And use in your app startup file.
require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");
webpack-jquery-ui
webpack-jquery-ui
- use this plugin, e.g. if you use Rails 5, run
yarn add webpack-jquery-ui
When jQuery UI plugin starts, it checks if jquery provided, so
Add this code to your webpacker configuration file (shared.js - if you use it with Rails 5)
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery'",
"window.$": "jquery"
})
]
Add these lines into your app code.
require('webpack-jquery-ui');
require('webpack-jquery-ui/css');
to fix ActionController::InvalidAuthenticityToken in jquery.ajax
You have to pass an authenticity_token parameter with all your PUT, POST and DELETE requests.
To do that you can usually fetch it from the header with $('[name="csrf-token"]')[0].content
So your request would look something like:
var that = this;
$.ajax({
url: navigator_item.url,
data: { authenticity_token: $('[name="csrf-token"]')[0].content},
method: 'DELETE',
success: function(res) {
...
}
});
I include jQuery into my application in another way
Instead of using:
plugins: [
new webpack.ProvidePlugin({...
You should add 'jquery': 'jquery/src/jquery' to aliases in the webpack config file:
module.exports = {
resolve: {
alias: {
'jquery': 'jquery/src/jquery'
}
}
It will provide module name 'jquery'. jQuery UI checks this name on init.
Then in you app.js file you write:
import $ from 'jquery'
import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.
window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.
The accepted answer doesn't work for me as the jQuery-ui package on NPM isn't pre-built and therefore doesn't contain jquery-ui.js; the package will either need built before use or all the widgets included/used individually.
Quickest way I got the whole package working was by first downloading the distributable version:
npm install jquery-ui-dist --save
I needed to add an alias for jquery-ui-dist to avoid a 'Cannot find module' error (using just require('jquery-ui-dist') won't work, because the .js filename is different), by adding this to webpack.config.js:
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
Finally, you can use this in the .js file where the modules are loaded:
var jQuery = require('jquery');
require('jquery-ui');
Alternatively, you can avoid having to require the scripts when loading the modules, and having to declare jQuery as a variable, by using ProvidePlugin in your webpack.config.js:
plugins: [
new webpack.ProvidePlugin({
'jQuery': 'jquery',
'$': 'jquery',
'global.jQuery': 'jquery'
})
],
The steps that worked for me (in a Rails 5.1.6 project) aren't identical to any of the above:
Install jquery and jquery-ui: yarn add jquery and yarn add jquery-ui
Add the following to the webpack config (i.e. in /config/webpack/environment.js) to globally set $ and jquery and jQuery:
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery'
})
)
Require whichever individual jquery-ui package(s) you want, at the top of your pack (e.g at the top of /javascript/packs/application.js:
require("jquery-ui/ui/widgets/sortable")
Then you can call, for example, $('.selector').sortable() anywhere in your pack.
add jquery in your node_modules using;
npm install --save jquery jquery-ui
and add externals in your webpack.config.js like;
...
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js",
}
it worked for me
You should import all of these and check which ones you really need.
require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');
Related
I have been configuring rollup for creating custom react component library on top of fomantic-ui.
I have already setup the rollup.config.js
ALthough in the configuration, I need to resolve an import:
#import (multiple) '../../theme.config';
the import is part of fomantic-ui-less library, which needs to be resovled to:
path.join(__dirname, '/themes/theme.config')
and I do have themes/theme.config at my project root.
when I run build command it throws following error:
[!] (plugin postcss) Error: '../../theme.config' wasn't found. Tried - E:\Projects\UILibrary\node_modules\fomantic-ui-less\theme.config,..\..\theme.config
and I have used the rollup-plugin-postcss plugin and #rollup/plugin-alias, and called it inside plugins array
...
plugins: [
...
alias({
entries: [
find: '../../theme.config$',
replacement: path.join(__dirname, '/themes/theme.config')
]
})
postcss(),
...
]
I have also tried changing the order of plugins.
And the worst part is, it is working when configuring the storybook, using webpack alias.
.storybook/main.js
webpackFinal: async (config) => {
config.resolve.alias = {
"../../theme.config$": path.join(__dirname, "../themes/theme.config")
}
...
}
I still have a few dependencies on jQuery. With Rails 6 and Webpack it's required to expose jquery otherwise errors occur. I have been using expose-loader 1.0.3 for some time without issue but, if I upgrade to expose-loader 2.0.0 or 3.0.0 I get:
ERROR in ./node_modules/jquery/dist/jquery.js
Module build failed (from ./node_modules/expose-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Users/drama/Sites/FlightRecord/node_modules/expose-loader/dist/index.js:19:24)
ℹ ｢wdm｣: Failed to compile.
There are a few blog posts regarding this issue, but all center around the formatting of associated syntax in environment.js... I've tried several different syntax stylings and they all result in the same error.
With expose-loader 1.0.3 I simply add the following in environment.js to expose jQuery:
environment.loaders.append("jquery", {
test: require.resolve("jquery"),
use: [
{ loader: "expose-loader", options: { exposes: ["$", "jQuery"] } }
],
});
This same syntax results in the error above if used with expose-loader >= 2. So, it seems the unhappy code lies in the environment.loaders.append call. I've read the Changelog, and the docs, and stackoverflow, and blogs...but, nothing I try seems to satisfy the new expose-loader.
For now, I'm back to just using 1.0.3...but I would like to conquer this and get 3.0.0 working.
How do I expose jQuery for Webpacker in Rails 6.1 using expose-loader 3.0.0?
My environment.js file contains the folling:
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
Rails: ['#rails/ujs'],
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
)
environment.loaders.append("jquery", {
test: require.resolve("jquery"),
use: [
{ loader: "expose-loader", options: { exposes: ["$", "jQuery"] } }
],
});
You don't need expose-loader anymore, to load jQuery.
Add to config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.append(
"Provide",
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
);
I’ve been using select2 via CDN. I started migrating CDN to using the webpacker gem. I stumbled upon a difficulty, where I can’t import/require or in any way include it. So here is my setup:
I’ve migrated select2 via the following steps:
yarn add select2
Below is my environment.js file (this is the configuration file, that webpacker uses to configure webpack):
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
environment.js
require("select2")
I tried all kinds of require and many others, but none of these seem to work. Please, advise. Thank you.
Here's what I would check:
Install Webpacker in your Rails project properly, per the project README. If you're starting with a Rails 6 app, this will be done by default.
Add both jquery and select2:
yarn add jquery select2
Add a select box to the DOM
<select class="js-states" name="state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
Import jquery, select2 and select2 css and apply to the select box when the page is loaded:
import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'
window.addEventListener('DOMContentLoaded', () => {
$('.js-states').select2()
})
For development, set compile: true in config/webpacker.yml. Running the webpack-dev-server is optional.
Those are the steps I took to create this demo: https://github.com/rossta/rails6-webpacker-demo/compare/example/select2
I am running into a strange issue where everything is working as expected except select2. I am having Rails 6.0.0 app and installed select2 via yarn add select2.
Then i added it to application.js file. File looks like below.
#app/javascripts/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('datatables.net')
require('datatables.net-dt')
require('datatables.net-bs4')
require('select2')
import "bootstrap"
import 'popper.js/dist/popper.js';
import $ from 'jquery';
global.$ = jQuery;
import "chart.js"
import 'select2'; // globally assign select2 fn to $ element
import 'select2/dist/css/select2.css'; // optional if you have css loader
document.addEventListener("turbolinks:load", () => {
setTimeout(function() {
$('.success, .alert').fadeOut();
}, 10000);
})
Right now it looks like this
select2 dropdown box
When I go to Source tab in chrome developer tools, it shows only select2/dist/js folder under node_modules. I have tried precompiling and clobbering the assets but not working. The whole this is running fine in my local, only causing issue in production server.
Edit:
My production.rb
https://gist.github.com/rajanhcah/3ee13925b0ae305a6fe2c64013ab6534
If you're including CSS in app/javascripts/packs/application.js, make sure that app/views/layouts/application.html.erb is also using the stylesheet_pack_tag (see the "Usage" section in the webpacker doc).
Otherwise, if you have stylesheet_link_tag, you can use the classical app/assets/stylesheets/application.css.
# app/assets/stylesheets/application.scss
#import 'select2/dist/css/select2';
I am using Angular 4.1.3 with Rails 5.1
I am trying to implement the app component and if I use template and write my html, everything works, but I want to use templateUrl.
Here is my component.
import { Component } from '#angular/core';
#Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {}
And this is my file structure
├── app
| ├── app.component.html
| └── app.component.ts
| └── app.module.ts
I understand that in the #Component you can add moduleId: module.id but I thought this is no longer needed in angular 4.1.3.
If I do add it, it tells me:
moduleId should be a string in "AppComponent"
I also thought that if you do not include the moduleId angular just grabs from root directory, but if I do an absolute path, it should work right?
If you guys could help, that would be awesome.
I am assuming you're using the new webpacker-gem in your rails project!
There is a description of how to use templateUrl with it here in the documentation: Use HTML templates with Typescript and Angular
If you would like to keep templateUrl you could use angular2-template-loader webpack plugin:
# add plugins to project
yarn add angular2-template-loader raw-loader
and configure it:
# edit config/webpack/loaders/angular.js with
module.exports = {
test: /.ts$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [/\.(spec|e2e)\.ts$/]
}
# create a new loader for htmls config/webpack/loaders/html.js
module.exports = {
test: /\.(html)$/,
loader: 'raw-loader',
exclude: /\.async\.(html)$/
}