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
Related
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;
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.
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
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' %>
The serviceworker-rails gem has a nice example of why I want to do this. tldr I can generate the manifest using asset helpers and loops.
// app/javascripts/packs/manifest.json.erb
<% icon_sizes = Rails.configuration.serviceworker.icon_sizes %>
{
"name": "My Progressive Rails App",
"short_name": "Progressive",
"start_url": "/",
"icons": [
<% icon_sizes.map { |s| "#{s}x#{s}" }.each.with_index do |dim, i| %>
{
"src": "<%= image_path "serviceworker-rails/heart-#{dim}.png" %>",
"sizes": "<%= dim %>",
"type": "image/png"
}<%= i == (icon_sizes.length - 1) ? '' : ',' %>
<% end %>
],
"theme_color": "#000000",
"background_color": "#FFFFFF",
"display": "fullscreen",
"orientation": "portrait"
}
I also want to inject other rubyland configs into my packfiles such as public keys and other runtime app settings that the js bundle should have. Default rails handles this case really well with erb. How can I do basically the same thing using webpack instead of sprockets?
I tried putting a json.erb in app/javascripts/packs but no go.
To have erb support, try rails webpacker:install:erb
I had the same issue and eventually rendered it using a dedicated controller for the manifest, which also had the advantage of not having to tweak the fingerprinted name and cache headers as the middleware in serviceworker-rails does.