Develop Reference

Rails 7 App (Webpack) Javascript is not loading

I created a rails 7 app with the following template:
rails new
-d postgresql
-j webpack
-m https://raw.githubusercontent.com/lewagon/rails-templates/master/devise.rb
CHANGE_THIS_TO_YOUR_RAILS_APP_NAME
everything is working fine, but once I wanted to add a boostrap Modal I noticed that my javascript isn't loading into the application.html.erb. I can't even simply console.log("hello"), which confuses me. This is what my application.html.erb looks like:
Application.html.erb
This is what my File structure looks like including application.js
File structure and application.js
I tried channging the java script tags in application.html.erb, tried reinstalling webpack, tried a different template, but can't seem to get it to work. I would be greatful for any tips

Javascript/Webpack pipelining in Rails 6. application.js syntax. putting js files in javascript/packs folder

I have one bootstrap template for doing a rails project. Before rails 6 it was easy to integrate a template with a project. Now in rails 6 webpack is included. Now i am not able to copy files to javascript/packs folder and call those .js files by application.js. While compiling the webpack, it is showing:
ERROR in ./app/javascript/packs/application.js Module not found:
Error: Can't resolve 'plugins/jquery/jquery.min' in
'app/javascript/packs'
# ./app/javascript/packs/application.js 25:0-36 <= this error

I have created src folder inside app/javascript folder and pasted all .js files into it. application.js also done by require('src/file_name'), and then I changed webpacker.yml resolved_paths to resolved_paths: ['app/javascript/src'] . Now it is working fine.

yarn: $ is not defined

For the first time I am using Yarn. I have installed the latest version of Laravel Boilerplate (http://laravel-boilerplate.com/) and there is used Yarn.
My need is to include the JS library DataTables (https://datatables.net/).
Unfortunately I am new to Yarn and I am not sure if I am making everything right, because I get the error:
[Show/hide message details.] ReferenceError: $ is not defined
which is on the this line:
$(document).ready(function() {
...
This is telling me that it cannot find the jquery library, but it should be there.
Here is the webpack.mix.js code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('public');
mix.sass('resources/sass/frontend/app.scss', 'css/frontend/frontend.css')
.sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
.js('resources/js/frontend/app.js', 'js/frontend/frontend.js')
.js([
'resources/js/backend/before.js',
'resources/js/backend/app.js',
'resources/js/backend/after.js'
], 'js/backend/backend.js')
.extract([
'jquery',
'datatables.net-dt',
'bootstrap',
'popper.js/dist/umd/popper',
'axios',
'sweetalert2',
'lodash',
'#fortawesome/fontawesome-svg-core',
'#fortawesome/free-brands-svg-icons',
'#fortawesome/free-regular-svg-icons',
'#fortawesome/free-solid-svg-icons'
]);
if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
mix.version();
}
Every time I call the command "yarn prod" in order to create the CSS and js files, but the DataTables are not working.
Did I miss something?
Thanks in advance!

It's not because of yarn. Yarn is a package manager, it doesn't run any part of your application's code so cannot generate an error like yours. Yarn is just for downloading packages and manage their dependencies.
Then comes Laravel Mix for you, which is just a wrapper around Webpack. Webpack reads your application code, handles your require and import commands in your .js files and then generates your bundles.
How to make it work:
I suppose you did run the yarn command (without params) in your project root once when you installed Laravel Boilerplate. There should be a lot of packages inside your node_modules directory (more than 900).
Then you did run yarn add -D datatables.net-dt also. Now you should have a datatables.net and a datatables.net-dt folder inside node_modules.
I see you've added datatables.net-dt in your webpack.mix.js, this is OK! You don't need any other require( 'datatables.net-dt' )( window, $ ); as said in the documentation. That one line in your webpack.mix.js is enough! DataTable will be inside your vendor.js.
Now create an example table with attribute id="example" in your index.blade.php then add this code to the bottom of your resources\js\frontend\app.js:
$(document).ready(function() {
$('#example').DataTable();
});
Then run yarn dev to let Webpack generate your bundles (compiled js files) and view your site in the browser. Following these, it should be working on a fresh install install of Laravel Boilerplate, without any error. I've just tested id now, works like charm.
Your possible bug:
$ is not defined tells that some part of your code is trying to use jQuery before it has been loaded.
It's important that you must write your codes using jQuery (shortened $) inside your resources\js\frontend\app.js or in a separate .js which is later required/imported into this file! It's because jQuery and other vendor packages like DataTable are stored in vendor.js, which must be loaded before any calls to them.
So don't use custom <script> tags in your html's <head> tag for your app code because that will be loaded and executed before any other defined in the bottom of your <body> tag!
Have a look at this file resources\views\frontend\layouts\app.blade.php. In the bottom of the body tag you'll see this:
<!-- Scripts -->
#stack('before-scripts')
{!! script(mix('js/manifest.js')) !!}
{!! script(mix('js/vendor.js')) !!}
{!! script(mix('js/frontend.js')) !!}
#stack('after-scripts')
Your resources\js\frontend\app.js and all its imported scripts will be compiled to this js/frontend.js file.
How jQuery is imported in Laravel Boilerplate:
This is done well by default, you don't have to bother with it. Open your resources\js\bootstrap.js and see these two lines:
import $ from 'jquery';
window.$ = window.jQuery = $;
This file will then imported by frontend/app.js. So write your code here and you'll be fine...
PS.: If this doesn't helps you to make it work, you should edit your question and provide more info on your sources. A screenshot for example taken from your Chrome DevTools, showing the lines of your JavaScript where the error occurred.

How to add a js file to a rails project

I'm trying to add a js file which is part of a purchased theme to my rails project.
In my assets.rb file I have
Rails.application.config.assets.precompile += %w(mvpready-core.js)
In my application.js I have
// This is a manifest file that'll be compiled into application.
//= require mvpready-core
//= require_tree .
At the end of my user.html.erb I have
<%= javascript_include_tag "application" %>
But when I load the page console gives me the error
ReferenceError: mvpready_core is not defined
What am I doing wrong and how can I debug this?

I dont think you need to tell anything to the assets.rb file.
The proper way of integrating a purchased theme is to put the required assets files in the vendor folder of your rails project directory. The vendor folder is specially for the third party plugins such as bootstrap. So what you need to do is as follows:
STEP 1:
Copy and paste the necessary JS and CSS files into the particular folders of the assets inside vendor folder.
STEP 2:
Require those files in to the project's manifest file i.e application.js and application.css files.
You can find manifest files here:
app -> assets -> javascripts -> application.js and app -> assets -> stylesheets -> application.css

Let me help you understand a little bit more. Ruby on Rails has some magick that goes on in the background where you do not need to add anything to
assets.rb
once you have setup your new project all you need to do is put the javascript file into:
/app/assets/javascripts/mvpread-core.js
When you start the rails server it will autoload anything you have in following directories:
/app/assets/javascripts/mvpread-core.js
/app/assets/images/mvpread-core.png
/app/assets/stylesheets/mvpread-core.css
Now if the javascript has path's in it linking to images, other javascripts, and other stylesheets you will need to search through the source code and make sure that it is looking for the file in this url path structure:
/assets{javascripts|images|stylesheets}
Also as #Taylor Galeser asked did you put the file in /app/assets/javascripts ?
This is all a very overly simplistic explanation on what Ruby on Rails does automatically for you but it should help you get what is going on behind the scenes better.

Rails: Heroku assets in vendor getting 404

I have a javascript in the vendors/assets/javascripts folder, and I have this line of code:
<script src="assets/grid.js"></script>
in one of my app/views page.
This grid.js file (inside the vendors directory) works when I test it out in localhost, but when I precompile and push my application to heroku, it says:
GET http://www.domain.com/assets/grid.js 404 (Not Found)
Why is this occurring?
Thanks

I would use the javascript_include_tag instead and that should work
<%= javascript_include_tag("grid.js") %>
In production I believe that the asset pipeline adds a hash onto the name of grid.js for fingerprinting (Section 1.2 of that documentation) so you can't use that path <script src="assets/grid.js"></script>

I tried: Set config.assets.compress = true in my config/environments/production.rb and all was fine, but it is a bad practice and gain bad performance. Yo can see this for more details config.assets.compile=true in Rails production, why not?
My solution:
Run in your local project RAILS_ENV=production bundle exec rake assets:precompile and push all the files generated in public/assent/ in your github repo and deploy in heruko. Yo can read this for more details https://devcenter.heroku.com/articles/rails-asset-pipeline#compiling-assets-locally