I have decided to use UiKit in my Rails 6 project and it works great. However, I just cannot get the icons to work. I checked a bunch of web resources but nothing solves the problem.
I'm using
- Rails 6
- webpacker (standard w. Rails6)
- yarn (standard w. Rails6)
- jquery (for custom coding)
In my view I am doing nothing but trying to show the icon:
<span uk-icon="heart">tests</span>
test
Crickets. Nothing.
I have UiKit installed with Yarn:
$: yarn list
...
├─ uikit-icons#0.5.0
│ ├─ #types/react#^16.9.11
│ └─ react#^16.11.0
├─ uikit#3.4.1
My application.js looks like this:
require("#rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("uikit")
require("uikit/dist/js/uikit-icons")
This does not throw an error. I tried the following:
require("uikit-icons")
and it resulted in a webpacker compiling error and an error message in the js console:
Uncaught Error: Cannot find module 'uikit-icons'
I tried adding
// loads the Icon plugin
UIkit.use(Icons);
that results in JS error (again, not using react. I am using jquery).
I even added the cdn url for the icons:
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
Nix. Silence. Nothing.
What am i doing wrong?
It looks like you are only requiring the UIkit library not assigning it to anything so it's throwing an error if you try to use it.
This worked for me:
const UIkit = require('uikit')
const Icons = require('uikit/dist/js/uikit-icons')
UIkit.use(Icons);
Related
Sorry this topic has been covered many times. However, I just created a new rails 7 app using esbuild, added font-awesome-sass to the gem file, created application.css.scss (already had application.bootstrap.scss) and put "#import 'font-awesome';" in there.
I then added the following to a view page:
<i class="fa-sharp fa-solid fa-house"></i>
<%= icon 'fa-brands', 'font-awesome' %>
No page errors, no console errors---but, the icons are not visible on the page (code is in the source). I've been mindlessly trying to figure this out---but, can not figure out why this is not working.
Have I missed any step?
I've verified installation instructions for the gem, I also tried skipping the gem and installing fontawesome via yarn. Nothing has gotten icons to show up in the view.
As are you using esbuild, you can install fontawesome with npm
yarn add #fortawesome/fontawesome-free
and import it in your javascript/application.js
import "#fortawesome/fontawesome-free/js/all";
Just remember to use only the free icons, fa-sharp is not free
I have just tried with this and everything is fine, Could you try it?
Updated Steps:
create project with cmd rails _7.0.4_ new demo-rails-with-react-frontend -j esbuild
add font awesome following this
create component to test following this
The result (image below)
my file app/javascript/components/application.tsx:
import * as React from "react";
import * as ReactDOM from "react-dom";
interface AppProps {
arg: string;
}
const App = ({ arg }: AppProps) => {
return <i class="fa-solid fa-house"></i>;
};
document.addEventListener("DOMContentLoaded", () => {
const rootEl = document.getElementById("root");
ReactDOM.render(<App arg="Rails 7 with ESBuild" />, rootEl);
});
ENV
ruby 3.0.4
rails 7.0.4
font-awesome-sass 6.2.0
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
We are trying to upgrade our app to Rails 6 with Webpacker (and Stimulus). Things are going fine except for TinyMCE. We have 2 problems, I will ask them in separate SO questions.
We installed TinyMCE using
yarn add tinymce
and have version 5.3.0
In our stimulus controller header we have:
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.min';
import 'tinymce/skins/ui/oxide/content.min';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
And then in the controller connect block we have:
connect() {
console.log('gonna reload');
require.context(
'!file-loader?name=[path][name].[ext]&context=node_modules/tinymce&outputPath=js!tinymce/skins',
true,
/.*/
);
tinymce.init({
selector: '.tinymce',
plugins: ['paste', 'link'],
skin: false
});
}
This is code that essentially works, except that in the console I see:
VM40 application-68201fac0dcbbcb543e0.js:213771 GET https://xxx.ngrok.io/packs/js/icons/default/icons.js net::ERR_ABORTED 404 (Not Found)
VM40 application-68201fac0dcbbcb543e0.js:224775 Failed to load icons: default from url https://xxx.ngrok.io/packs/js/icons/default/icons.js
Do we need another require.context to handle the loading of those?
It looks like TinyMCE no longer loads the icons dynamically, so Webpack must be instructed to include them in the bundle manually. Adding the icons import after the tinymce import worked for me:
import 'tinymce/icons/default';
I'm in the process of migrating a Rails 5.1.5 project, which uses CoffeeScript, from using sprockets to using webpacker. The project also uses select2.js. With sprockets, I did the following:
Install jquery-rails (jQuery is a dependency for select2).
Put select2.js code in vendor/assets/javscripts.
In application.js.coffee, add:
#= require select2
After that I was able to use select2 to in my application.js.coffee file:
$(document).on 'turbolinks:load' ->
$('select').select2
So far I've described the pretty standard way of including/using javascript libraries with sprockets.
However, with webpacker I can't make select2 work and I'm not sure why. I have two hypothesis:
I'm not importing/requiring it properly;
it doesn't find jQuery at some point of the load process;
So for jQuery, I did the following:
yarn add jquery
included in my environment.js:
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}));
I've removed the jquery-rails gem, as well as #= require 'jquery' and tested that jquery works, so I guess I have correctly included it. However, I tried several ways of importing select2 (using es6 imports) and none of them worked. I tried:
import select2 from 'select2';
import select2 from 'select2/dist/js/select2'
import select2 from 'select2/dist/js/select2.js'
import 'select2/dist/js/select2.js'
I even tried to import it from the old vendor location by writing inside app/javascript/pack/application.js.coffee:
import '../../../vendor/assets/javascripts/select2'
I can confirm that the file contents is imported, as I put a console.log within the select2 file under node_modules/select2/dist/js/select.js and it did get printed. However, I also get the error TypeError: $(...).select2 is not a function when I execute $('select').select2() in the browser's dev tool console.
What am I missing or doing wrong?
P.S. I can provide much more info, but I didn't want my question to get any more bloated.
P.P.S. With my modest JS knowledge, I looked at the source code but couldn't recognize what exactly they are exporting and how am I supposed to import it.
I know this is an old post, but just in case someone else could benefit:
app/javascript/packs/application.js
...other requires...
require('select2')
window.Rails = Rails
import 'bootstrap'
...other imports...
import 'select2'
import 'select2/dist/css/select2.css'
$(document).on("turbolinks:load", () => {
$('.select2').select2()
})
My similar problem
I have stumble upon the same problem with another web component (Switchery):
I imported the component with yarn add switchery (no error)
I could import it correctly through WebPack with import 'switchery' (no error bundling the pack)
But when I was trying to use the Switchery object in the browser like they say in the doc:
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
I would get the error: ReferenceError: Switchery is not defined
Note: I didn't want to install RequireJS as WebPack is supposed to do the same thing (and even better) nowadays.
My solution:
The problem was the webpack doesn't expose the pack-generated variables and classes in the global scope!
So to fix this, I needed to do two things:
Explicitly give a name to the imported class from Switchery:
import Switchery from 'switchery'
Use this Class only in the same JS file where the import was done
Testing hack:
If you want to try that out and "go back" to the mess that sprocket allowed, in the same file, you can expose "globally" the variable so you can use in from the browser:
import Switchery from 'switchery'
window.Switchery = Swicthery
now you can execute the switchery almost like in the example:
var init = new window.Switchery(elem);
Hope that helps...
In development, I can't figure out how to make the jquery-ui gem to make it's sweet magic available.
I included the gem in the project Gemfile, typed bundle install, updated app/assets/stylesheets/application.scss to have the line:
#import "jquery-ui/autocomplete";
and finally app/assets/javascripts/application.js to have the line:
//= require jquery-ui/autocomplete
more-or-less as described in https://github.com/joliss/jquery-ui-rails
When I try to load a page in development, rails complains saying
File to import not found or unreadable: jquery-ui/autocomplete.
Load paths:
/home/dm/contra/app/assets/images
/home/dm/contra/app/assets/javascripts
/home/dm/contra/app/assets/stylesheets
/home/dm/contra/vendor/assets/javascripts
/home/dm/contra/vendor/assets/stylesheets
/home/dm/.rvm/gems/ruby-2.2.1/gems/jquery-rails-4.0.5/vendor/assets/javascripts
/home/dm/.rvm/gems/ruby-2.2.1/gems/coffee-rails-4.1.0/lib/assets/javascripts
/home/dm/.rvm/gems/ruby-2.2.1/gems/angularjs-rails-1.4.8/vendor/assets/javascripts
/home/dm/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/assets/stylesheets
...
Here's what the directory layout of the jquery-ui-gem looks like on this machine:
contents of ~/.rvm/gems/ruby-2.2.1/gems/jquery-ui-rails-5.0.5/
app Gemfile History.md lib License.txt Rakefile README.md VERSIONS.md
cocntents of ~/.rvm/gems/ruby-2.2.1/gems/jquery-ui-rails-5.0.5/app/assets/javascripts/jquery-ui
accordion.js datepicker-da.js datepicker-fr-CH.js datepicker-ka.js datepicker-nn.js datepicker-ta.js effect-bounce.js effect-transfer.js
autocomplete.js datepicker-de.js datepicker-fr.js datepicker-kk.js datepicker-no.js datepicker-th.js effect-clip.js menu.js
button.js datepicker-el.js datepicker-gl.js datepicker-km.js datepicker-pl.js datepicker-tj.js effect-drop.js mouse.js
core.js datepicker-en-AU.js datepicker-he.js datepicker-ko.js datepicker-pt-BR.js datepicker-tr.js effect-explode.js position.js
datepicker-af.js datepicker-en-GB.js datepicker-hi.js datepicker-ky.js datepicker-pt.js datepicker-uk.js effect-fade.js progressbar.js
datepicker-ar-DZ.js datepicker-en-NZ.js datepicker-hr.js datepicker-lb.js datepicker-rm.js datepicker-vi.js effect-fold.js resizable.js
datepicker-ar.js datepicker-eo.js datepicker-hu.js datepicker-lt.js datepicker-ro.js datepicker-zh-CN.js effect-highlight.js selectable.js
datepicker-az.js datepicker-es.js datepicker-hy.js datepicker-lv.js datepicker-ru.js datepicker-zh-HK.js effect.js selectmenu.js
datepicker-be.js datepicker-et.js datepicker-id.js datepicker-mk.js datepicker-sk.js datepicker-zh-TW.js effect-puff.js slider.js
datepicker-bg.js datepicker-eu.js datepicker-is.js datepicker-ml.js datepicker-sl.js dialog.js effect-pulsate.js sortable.js
datepicker-bs.js datepicker-fa.js datepicker-it-CH.js datepicker-ms.js datepicker-sq.js draggable.js effect-scale.js spinner.js
datepicker-ca.js datepicker-fi.js datepicker-it.js datepicker-nb.js datepicker-sr.js droppable.js effect-shake.js tabs.js
datepicker-cs.js datepicker-fo.js datepicker-ja.js datepicker-nl-BE.js datepicker-sr-SR.js effect.all.js effect-size.js tooltip.js
datepicker-cy-GB.js datepicker-fr-CA.js datepicker.js datepicker-nl.js datepicker-sv.js effect-blind.js effect-slide.js widget.js
What am I failing to do right here?
You seem to be following the wrong README file. The one you are reading, is for Rails 5.0 and above.
Follow this doc for Rails versions before 5.0 - https://github.com/joliss/jquery-ui-rails/blob/v4.2.1/README.md
I've struggled with this in the past.. Just remove the /autocomplete part and leave the require and import to just jquery-ui and it will load the autocomplete by itself and the rest.
Got my autocomplete working with this coffeescript
jQuery -> $('#booking_product').autocomplete
source: ['']