Rails_uis throw error when creating a new RailsApp - ruby-on-rails

After creating a new ruby 2.6 / rails6 app and
scaffolding the destroy popup is not working.
Any idea whats wrong.. happens out of sudden..
package.json
{
"name": "untitled1",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0-alpha",
"#rails/activestorage": "^6.0.0-alpha",
"#rails/ujs": "^6.0.0-alpha",
"#rails/webpacker": "^4.0.6",
"turbolinks": "^5.2.0",
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.5.1"
}
}
console shows this error:
rails-ujs.js:22 Uncaught TypeError: Cannot set property 'Rails' of undefined
at rails-ujs.js:22
at rails-ujs.js:37
at rails-ujs.js:38
at Module.<anonymous> (rails-ujs.js:822)
at Module../node_modules/#rails/ujs/lib/assets/compiled/rails-ujs.js (rails-ujs.js:822)
at __webpack_require__ (bootstrap:19)
at Object../app/javascript/packs/application.js (application.js:6)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83

github.com/rails/webpacker/issues/2109,
solves the problem,
comment out //corejs: 3, in babel.config.js
Hopefully the bug will be solved soon.

For anyone that is as catastrophically dumb as I am with this Q/A as my only possible lead (that will take you nowhere) – My issue with Rails being undefined was that my javascript_include_tag was missing. In short, make sure you have:
<!-- app/views/layouts/application.html -->
<!-- turbolinks optional -->
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Related

Action Text [Rails 7 Error] vanishing field

Trying to isolate an error I'm getting with the basic setup of a new blog site using the below just so I can test Action_Text for the create blog section.
Every-time i create the below- it works great until i change the <%= form.text_area :content %> to <%= form.rich_text_area :content %> then the text area vanishes????
package.json
{
"name": "app",
"private": "true",
"dependencies": {
"#hotwired/stimulus": "^3.1.0",
"#hotwired/turbo-rails": "^7.1.3",
"#popperjs/core": "^2.11.5",
"#rails/actiontext": "^7.0.3-1",
"bootstrap": "^5.2.0",
"bootstrap-icons": "^1.9.1",
"esbuild": "^0.14.54",
"sass": "^1.54.3",
"trix": "^2.0.0-beta.0"
},
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
"build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
rvm gemset create project
rails new project --css bootstrap
rails g scaffold blog title:string content:text
Rails db:migrate
Rails action_text:install
Rails db:migrate
class Blog < ApplicationRecord
validates_presence_of :title
has_rich_text :content
end
<%= form.rich_text_area :content %>
I have searched for days online, tested, broken this multiple times and still cant find a solution.
Any assistance would be great.
Thank you

Error when trying to import npm package (easyMDE) in application.js - (Uncaught ReferenceError: EasyMDE is not defined)

Im trying to include easyMDE in my rails 6 project. I was including it from an external source before and that worked (via unpkg.com). To improve loading times I wanted to include it into my project via yarn.
I did the following steps:
yarn add easymde --save
In application.js:
require("easymde");
But when reloading the page I get the following error:
Uncaught ReferenceError: EasyMDE is not defined
When I run webpack-dev-server I see that easymde.js gets compiled:
Built at: 08/11/2020 3:16:09 PM
Asset Size Chunks Chunk Names
js/application-caadc00338c3578fee39.js 1.2 MiB application [emitted] [immutable] application
js/application-caadc00338c3578fee39.js.map 1.39 MiB application [emitted] [dev] application
js/easymde-1f6737d8a160c1180536.js 872 KiB easymde [immutable] easymde
js/easymde-1f6737d8a160c1180536.js.map 805 KiB easymde [dev] easymde
manifest.json 675 bytes [emitted]
ℹ 「wdm」: Compiled successfully.
application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
require("easymde")
package.json:
{
"name": "logbook_v2",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"easymde": "^2.11.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.11.0"
}
}
Let me know if you need any more code. :-)
Update
Here is the file where I use the editor:
<%= render "components/sidebar" %>
<div class="form-wrapper post-form-wrapper">
<%= form_with model: #post, class: 'form post-form' do |f| %>
<%= f.text_field :name, placeholder: 'title', class: 'field post-field' %>
<%= f.text_area :content, id: 'mde' %>
<%= f.submit 'create post', class: 'form-button post-form-button' %>
<%end%>
</div>
<script type="text/javascript" charset="utf-8">
var easyMDE = new EasyMDE({
element: document.getElementById("mde"),
placeholder: "Write your post here...",
autosave: {
enabled: true,
uniqueId: <%= current_user.id %>
},
blockStyles: {
code: "~~~"
},
minHeight: "calc(100vh - 320px)",
renderingConfig: {
codeSyntaxHighlighting: true
},
promptURLs: true,
toolbar: ["bold", "italic", "strikethrough", "heading", "|", "code", "quote", "clean-block", "|", "link", "image", "|", "unordered-list", "ordered-list", "|", "preview", "side-by-side", "fullscreen", "|", "guide"]
});
</script>
If I put in import * as EasyMDE from 'easymde'; (suggested by #Ninh Le) at the beginning of the script I get this error: Uncaught SyntaxError: import declarations may only appear at top level of a module
Easymde using module.exports, you can find it here
So to use it in with yarn and rails 6 I think the way is in js file:
import * as EasyMDE from 'easymde';
var easyMDE = new EasyMDE({element: document.getElementById('my-text-area')});
Edit: To make it can call globally, call this in application.js file
import * as EasyMDE from 'easymde';
window.EasyMDE = EasyMDE;

Cannot find module '#rails/ujs' - Rails 6 Webpack App

I have these errors in a Rails 6 app and all javascript is not working:
ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '#rails/activestorage' in '/Users/jrsahuquillo/Dropbox/myappname/app/javascript/packs'
# ./app/javascript/packs/application.js 9:0-31
ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '#rails/ujs' in '/Users/jrsahuquillo/Dropbox/myappname/app/javascript/packs'
# ./app/javascript/packs/application.js 5:0-21
My package.json is:
{
"name": "myappname",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0-alpha",
"#rails/activestorage": "^6.0.2",
"#rails/ujs": "^6.0.2",
"#rails/webpacker": "4.2.0",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"jquery-ui-dist": "^1.12.1",
"popper.js": "^1.16.0",
"serialize-javascript": "2.1.2",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.8.0"
},
"optionalDependencies": {
"fsevents": "2.0.0"
}
}
In application.js:
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("bootstrap/dist/js/bootstrap");
In app/views/layouts/application.html.erb:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
It was working ok, but I don´t know when and why it left working.
Could someone help me?
Sorry, I solved it yet. Previously to having the error, I installed yarn autoclean, and I discovered later that in .yarnclean there was this:
# asset directories
docs
doc
website
images
assets
I removed this, and error disappeared.
Run the commands. the node_modules has a problem i guess.
yarn add rails-ujs turbolinks
npm install rails-ujs turbolinks
Encountered this error when running system tests and managed to fix it by removing node_modules folder and anything that was cached in /tmp folder and then reran yarn install.
Cause of the issue for me was:
Had recently ran yarn autoclean --init yarn autoclean --force and then tried to reverse it since everything was messed up.

Bootstrap JS functions not loading in Rails 6/Webpacker

Climbing the learning curve with Webpacker and Rails 6.
I've installed Boostrap 4 using Yarn and Webpacker. When I try play with Bootstrap components in a browser's JS console then I get: TypeError: $.fn.button is undefined.
If I remove the Yarn installation add a Bootstrap CDN link in the head of the HTML (the old way) everything works fine. When I remove the CDN links and revert to using Webpacker I get back to the error above.
Here is my Webpacker setup:
// package.json
{
"name": "depot",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0-alpha",
"#rails/activestorage": "^6.0.0-alpha",
"#rails/ujs": "^6.0.0-alpha",
"#rails/webpacker": "^4.0.7",
"bootstrap": "4.2.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.8.0"
}
}
// enviornment.js
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;
// application.js
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("jquery");
require("bootstrap");
import "./src/application.scss";
# layouts/application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
%title Depot
= csrf_meta_tags
= csp_meta_tag
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
Is there something I should be doing to export the Bootstrap functions to the global namespace?
Found a forum where this was discussed: https://gorails.com/forum/how-to-use-bootstrap-with-webpack-rails-discussion
They mentioned it could be caused by having jQuery loading multiple times, with the latest declaration preventing Bootstrap's JS from loading. I couldn't find any evidence of this in my project.
For me the fix ended up being a few lines added to the webpack entry point that exposed jQuery to the browser:
# packs/application.js
import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;
I noticed even I removed require 'jquery' from applications.js, jquery still appears in the compiled application.js, so I removed this from enviroment.js
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
and add this to application.js
import JQuery from 'jquery';
window.$ = window.JQuery = JQuery;
restart rails server, it works!
If you want to know why see this answer

SyntaxError occurs when reading js.erb file with webpacker

I'm currently developing with Rails5 and React.
And to use React, we use a gem called react-rails, and this gem uses webpacker.
At that time, in React, js.erb file was created to refer to the image precompiled with assets.
The information I looked up on the net had rails-erb-loader, so it should have been readable.
However, SyntaxError occurred.
I will write the details below.
ErrorLog
# ./bin/webpack-dev-server
~~~
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/myproject/app/javascript/components/sample.js.erb: Unexpected token (1:1)
> 1 | <% helpers = ActionController::Base.helpers %>
sample.js.erb
<% helpers = ActionController::Base.helpers %>
export const png_path = "<%= helpers.image_path('sample.png') %>"
package.json
{
"name": "Sample",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.0.0",
"#rails/webpacker": "^4.0.7",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"lodash": "^4.17.14",
"prop-types": "^15.7.2",
"rails-erb-loader": "^5.5.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react_ujs": "^2.6.0",
"reactjs-popup": "^1.4.1"
},
"devDependencies": {
"webpack-dev-server": "^3.8.2"
}
}
How can I solve this error?
We will wait for the answer.
This issue was not resolved. Sorry

Resources