I'm trying to install "wysiwyg-rails" and "toastr-rails".
And I also tried to install alternative gems like "Summernote" to avoid the error, but the same error happens "Module not found". The CSS files are loaded successful, but the JavaScript file doesn't load.
Installing the Summernote gem using:
application.js:
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("summernote/summernote-bs4.min")
aplication.scss:
#import "bootstrap";
#import "summernote-bs4";
Everything is configured and when I try to load the page the Chrome console shows:
application.js:9 Uncaught Error: Cannot find module 'summernote/summernote-bs4.min'
Application.js line 9: `require("summernote/summernote-bs4.min")`
And the server terminal displays the message:
Module not found: Error: Can't resolve 'summernote/summernote-bs4.min' in '/d/myproject/app/javascript/packs'
I'm using Ruby 2.7.0p0 and Rails 6.0.2.1 and I have jQuery and popper installed by yarn.
Usually, gems are meant to be used with Sprockets (the assets pipeline). Gems that support Webpacker integration usually have a matching yarn/npm package.
I haven't even found a way to make a gem with JavaScript assets that are automatically recognized by the Webpacker compiler. You have to add a JavaScript package or copy the needed JavaScript into the JavaScripts folder.
When using Webpacker, it's easier to add third-party code using npm/yarn packages instead of Rails gems if you need assets.
Related
I'm trying to wrap the bootstrap-sass gem inside another gem (let's call it my-engine). Along the way, I'm building a small Rails application to test things out. As a first step, I wanted to make sure I could get bootstrap-sass working directly in my Rails application. The Gemfile for the Rails app looks like this:
gem 'bootstrap-sass', '3.3.1.0'
gem 'my-engine, path: "~/dev/my-engine"
This works fine. The bootstrap assets are loaded into my Rails application and everything looks good. Now, I want to take bootstrap-sass out of my Rails app and let it load through my-engine. So, my Rails application Gemfile now looks like:
gem 'my-engine, path: "~/dev/my-engine"
The .gemspec for my-engine has:
spec.add_runtime_dependency 'bootstrap-sass', '3.3.1.0'
I can re-bundle the my-engine gem with no problems. I can re-bundle the Rails application with no problems. However, when I refresh the page of the Rails app, I get the following error:
File to import not found or unreadable: bootstrap-sprockets.
That break occurs when sprockets is trying to build the application.css file. Sometimes this will pass and I'll get a different error about missing the bootstrap.js javascript file when the application.js is being built.
Why is this happening? I'm wondering if it has something to with the fact that I'm developing the gems locally and haven't published them, although I'm not sure why that would affect bootstrap-sass which is published. I'm using bundler 1.5.3.
Make sure 'bootstrap-sass' is required in your engine. One sensible place to do this is in your lib/my-engine.rb file:
require 'bootstrap-sass'
Adding the bootstrap-sass gem as a runtime dependency in the .gemspec isn't enough when you're trying to wrap gems.
As you want to use more and more scss/js/coffeescript libraries, you may want to consider moving to bower vs gemfiles as the source for bootstrap-sass-official. We use bower-rails for rake tasks and auto-configuration. It's a really lite config/rake task layer over standard bower.
Addressing your answer, bootstrap problems via the gem was one of the reasons I switched our engine over to just bower assets. We now import bootstrap-sass-official and have full control, note however that for sass files you will need to import the longer path to the source file, i.e. in our engine _application.scss:
# our custom variable overrides
#import 'overrides/variables';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets';
#import 'bootstrap-sass-official/assets/stylesheets/bootstrap';
NOTE: if you want your app sass variables to override engine and sass variables, make sure your engine has _application.scss not application.scss, the leading underscore is critical for variable context/scope.
Thinking ahead, you may need to ignore bower transitive dependencies as we did.
(i.e. some dependencies may use 'bootstrap' while others use 'bootstrap-sass-official' etc)
We use it like this in our .bowerrc such as the following:
{
"ignoredDependencies": [
"bootstrap",
"bootstrap-sass",
"bootstrap-sass-official"
]
}
In conclusion
We have been using this for several months with success. bower-rails will install the dependencies in /vendor/assets and if referenced in your engine, you won't need to reference them at all in your application project. It has been fast and easy to maintain/add/update libraries and know exactly how files are included.
I'm trying to setup angular-chart.js in an Angular on Rails application, per github instructions. But the documentation is not specifically for Rails so I'm running into errors.
Installation instruction: http://jtblin.github.io/angular-chart.js/
For reference,
installed via bower, bower install angular-chart.js --save
added as dependency, angular.module('myModule', ['chart.js']);.
Documentation then recommends then adding <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>, but this file is not found if I add this line (think because using Rails).
Since the application is Angular ontop of Rails, I assume it needs to be added to Rails application.js file. As otherwise there is an angular no module error.
But I'm not sure exactly what needs to be added to application.js. I've tried:
chart.js
angular-chart.js
angular-chart
(prefaced by //= require)
But everything results in a Rails error,
Sprockets::FileNotFound in Boards#index
couldn't find file 'chart.js' with type 'application/javascript'
Is there a way to find out exactly what needs to be added to application.js? Or some other way to solve this?
(Apologies if this is difficult to follow.)
You can use (as you mentioned in discussion) gem browserify-rails to easily pick-up bower/node.js packages. Include gem into Gemfile, bundle install, and then install npm/bower package into app.
gem 'browserify-rails'
We have a rails 3.2 app, but we are not using the asset pipeline feature, manifest file.
we minify the scripts and css through YUI compressor.
We want to use turbolinks in our application. I had followed following steps
Added the gem to gemfile and bundled it.
Next, copied the jquery.turbolinks.js file to javascript folder and included the JS as a last JS in the head.
But it does not seem to work, still getting complete page reload.... any inputs what I am doing wrong?
Try this:
/Gemfile
gem 'turbolinks'
/app/assets/javascripts/application.js
//= require turbolinks
And restart your server and you're now using turbolinks! Watch this for more information!
I am using Ruby On Rails and have ActiveAdmin on top of that on a windows machine. I don´t think ActiveAdmin has anything to do with it, but I am just saying.
The Javascript file that is included via HTML is /assets/active_admin.js and the manifest file itself looks like this:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
When I run my Rails application and open http://localhost:3000/assets/active_admin.js, the log tells me, that active_admin.js was compiled, but the file still looks just like the manifest just with an added semicolon at the end:
//= require active_admin/base
//= require just_datetime_picker/nested_form_workaround
;
Why is no Javascript code included?
When I try to run the precompile pipeline manually via bundle exec rake assets:precompile RAILS_ENV=development, it actually creates all the CSS files, but the JS files still look like the one described above.
Since I am operating on a windows machine, I do not have the gem 'therubyracer' installed, but NodeJS. Also the bundle install works fine and I also do not get any errors.
Are you using Ruby v2.0? Try downgrading to 1.9.
Symptom: The JavaScript manifest file does not compile, no errors are shown; however, a mysterious semi-colon ; appears at the end of the file after "preprocessing" the assets.
Solution: Downgrade to Ruby v1.9.3!
See two other posts on the same topic.
My Rails Javascript manifest file neither compiles nor include any required files
Javascript manifest file "application.js" is not processed
What a sorry mess it is to be programming in 2013!
I'm using Spree 0.70.3, Rails 3.1.3, and a custom fork of the Spree Editor plugin. (N.B. the relevant code for this fork hasn't changed from master.)
When I request a page which should get TinyMCE on a text area, I see this error in my development log:
Error compiling asset admin/all.js:
Sprockets::FileNotFound: couldn't find file 'tinymce-jquery'
(in <gemset-path>/bundler/gems/spree_editor-48cdfcfaf7bd/app/assets/javascripts/admin/spree_editor.js:9)
The line in question looks like this:
//= require tinymce-jquery
The editor depends on the tinymce-rails gem, which has a few candidates for the file in question:
assets/vendor/tinymce/jquery-tinymce.js
assets/precompiled/tinymce/jquery.tinymce.js
assets/precompiled/tinymce/tiny_mce_jquery.js
assets/integration/tinymce-jquery.js
The README for that gem says the require line quoted above is correct, however. None of the gem's paths are in Sprockets' search path as shown by putting Rails.application.config.assets.paths into the console.
Should I be adding the gem's path to the Sprockets search path somehow, or is this something the gem isn't doing correctly?
I assume you cannot precompile the gem, I had a similar issue so what i did was to download the javascript plugin from the site manually and copied the directories into my rails app. or i also tried to use a lower version of tinymce-rails gem and it worked.