I am using Rails 7 with importmap and esbuild. The assets:precompile task succeed but when I open the webpage I see this in JS console
GET https://staging.example.com/assets/src/jquery net::ERR_ABORTED 404
GET https://staging.example.com/assets/utility/direct_upload
net::ERR_ABORTED 404 GET
https://staging.example.com/assets/utility/manual_keywords
net::ERR_ABORTED 404 GET https://staging.example.com/assets/src/toastr
net::ERR_ABORTED 404 GET
https://staging.example.com/assets/utility/modals net::ERR_ABORTED 404
GET https://staging.example.com/assets/controllers net::ERR_ABORTED
404 GET https://staging.example.com/assets/custom/init
net::ERR_ABORTED 404 GET
https://staging.example.com/assets/custom/dropdown net::ERR_ABORTED
404 https://staging.example.com/assets/custom/notification
net::ERR_ABORTED 404
app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../builds
app/assets/javascript/application.js
require('#rails/ujs').start();
import "#hotwired/turbo-rails"
import * as ActiveStorage from "#rails/activestorage"
ActiveStorage.start()
import "./src/jquery"
import Popper from "popper.js"
import 'bootstrap'
import dataTable from 'datatables.net-bs4'
dataTable(window, $)
import "chartkick"
import "chart.js"
import "./src/toastr"
import './utility/direct_upload'
import 'utility/manual_keywords'
import './utility/modals'
import "./controllers"
import './custom/init'
import './custom/dropdown'
import './custom/notification'
config/importmap.rb
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "https://ga.jspm.io/npm:#hotwired/turbo-rails#7.1.3/app/javascript/turbo/index.js"
pin "#hotwired/turbo", to: "https://ga.jspm.io/npm:#hotwired/turbo#7.1.0/dist/turbo.es2017-esm.js"
pin "#rails/actioncable/src", to: "https://ga.jspm.io/npm:#rails/actioncable#7.0.3/src/index.js"
pin "#rails/activestorage", to: "https://ga.jspm.io/npm:#rails/activestorage#6.0.5/app/assets/javascripts/activestorage.js"
pin "popper.js", to: "https://ga.jspm.io/npm:popper.js#1.16.1/dist/umd/popper.js"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap#4.6.1/dist/js/bootstrap.js"
pin "jquery", to: "https://ga.jspm.io/npm:jquery#3.6.0/dist/jquery.js"
pin "datatables.net-bs4", to: "https://ga.jspm.io/npm:datatables.net-bs4#1.12.1/js/dataTables.bootstrap4.js"
pin "datatables.net", to: "https://ga.jspm.io/npm:datatables.net#1.12.1/js/jquery.dataTables.js"
pin "chartkick", to: "https://ga.jspm.io/npm:chartkick#4.2.0/dist/chartkick.js"
pin "toastr", to: "https://ga.jspm.io/npm:toastr#2.1.4/toastr.js"
pin "chart.js", to: "https://ga.jspm.io/npm:chart.js#3.8.0/dist/chart.esm.js"
package.json
"scripts": {
"build": "node esbuild.config.js",
"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
esbuild.config.js
const path = require('path')
const rails = require('esbuild-rails')
require("esbuild").build({
entryPoints: ["application.js"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/assets/javascript"),
watch: process.argv.includes("--watch"),
//inject: ["inject-jquery.js"],
plugins: [rails()]
}).catch(() => process.exit(1))
layout.html
<%#javascript_include_tag "application", "data-turbo-track": "reload"%>
<%= javascript_importmap_tags %>
Related
I recently got rid of webpacker and installed importmap and turbo. My Stimulus JS controllers are not rendering anything.
importmap.rb :
# Pin npm packages by running ./bin/importmap
pin "application", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "#hotwired/turbo-rails", to: "turbo.js", preload: true
typewriter_controller.js :
import { Controller } from "#hotwired/stimulus"
export default class extends Controller {
connect() {
// some code...
}
}
application.html.erb:
<head>
some stuff..
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag "turbo", type: "module-shim" %>
<%= javascript_importmap_tags %>
</head>
I tried to re-install the stimulus gem but it didn't work. I'm running out of ideas on this one.
As from the stimulus-rails installation guide, I would check the following files are configured this way:
In app/javascript/controllers/index.js
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "#hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
In app/javascript/controllers/application.js
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
In app/javascript/application.js
import "controllers"
This assumes you are indeed using importmap and not some other JavaScript bundler (e.g., yarn).
i downloaded this template here https://bootstrapmade.com/regna-bootstrap-onepage-template/
my goal is to get it going in rails 7. i copied the content of index.html to experiment.erb.html.
And i copied the javascript content to app javascript.
my importmap.rb looks like this
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap#5.1.3/dist/js/bootstrap.esm.js"
pin "#popperjs/core", to: "https://unpkg.com/#popperjs/core#2.11.2/dist/esm/index.js" # use unpkg.com as ga.jspm.io contains a broken popper package
pin_all_from "app/javascript/aos", under: "aos"
pin_all_from "app/javascript/purecounter", under: "purecounter"
pin_all_from "app/javascript/glightbox", under: "glightbox"
pin_all_from "app/javascript/isotope", under: "isotope"
pin_all_from "app/javascript/swiper", under: "swiper"
pin_all_from "app/javascript/main", under: "main"
my application.js looks like this:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import '#hotwired/turbo-rails';
import 'controllers';
import 'bootstrap';
import 'aos/aos';
import 'purecounter/purecounter_vanilla';
import 'glightbox/glightbox';
import 'isotope/isotope';
import 'swiper/swiper-bundle.min';
import 'main/main';
My error message in chrome browser is
aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'AOS')
at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:182
at aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1:187
(anonymous) # aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1
(anonymous) # aos-75b913982a069d95d17deb4a5fa63c1019abfca2c7bad6623a03e046e1e8dd31.js:1
[filestructure in vscode1
if you know what i have to fix, please explain.
I need help with following code:
Rails 7.0.3
view.html.erb
<div id="calendar"></div>
importmap.rb
pin "fullcalendar", to: "https://ga.jspm.io/npm:fullcalendar#5.11.0/main.js"
javascript/application.js
import "fullcalendar"
javascript/controllers/fullcalendar_controller.js
import { Controller } from "#hotwired/stimulus"
import FullCalendar from 'fullcalendar'
export default class extends Controller {
connect() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
}
}
layouts/applications.html.erb
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
And the output... :(
Failed to register controller: fullcalendar (controllers/fullcalendar_controller)
ReferenceError: exports is not defined
at main.js? [sm]:20877:37*
Any help would be appreciated
The issue is with calendar js file, you can download the fullcalendar js file to your local project, ./bin/importmap pin fullcalendar --download and then you can see fullcalendar.js file under vendors directory vendors/javascript/fullcalendar.js then replace that js file content with the full_calendar source https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.11.2/main.js finally add export line to end of the fullcalendar.js file export default FullCalendar;. Hope it may help you with your issue.
My app is rendering a blank page The console has the error "Uncaught Error: Target container is not a DOM element." from index.js line 7
This is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import '../stylesheets/index.css';
import App from '../components/App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('body')
);
serviceWorker.unregister();
index.html.erb:
<%= javascript_pack_tag 'index.js', 'data-turbolinks-track': 'reload' %>
<div id="root"></div>
Shyam's comment answered my question I needed to put my javascript_pack_tag below the div tag in my index.html file
React Router 4 is running on top of Rails and React, but following a <Link /> element triggers a GET request in my server and a full page reload in my development environment.
Here are the current versions I'm running:
"#rails/webpacker": "^3.0.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"clean-webpack-plugin": "^0.1.17",
"webpack-dev-server": "^2.9.5",
"webpack-merge": "^4.1.1"
I'm using the foreman gem, which runs the rails server and webpack-dev-server on localhost:5000.
What I've tried:
Adding historyApiFallback to my webpack-dev-server CLI
Using either <Link /> and <NavLink />
Adding a trailing / to my links; <Link path='/sign-in/' component={Register} />
Rendering just <App /> at the highest level component, and adding <BrowserRouter /> and all routing/switching to <App />
I've tried using exact path, strict path, and just path
I'm curious if it's something with my webpack config... I can post that as well if necessary. It just seems like this is all set up right but something else funky is going on.
What is working:
- I can switch between components, even though my rails routes in routes.rb has a catch-all: get '*path', to: 'pages#index'
Here is my highest level component, index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Main from '../react/src/components/Main';
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<Router>
<Main />
</Router>,
document.getElementById('app')
);
});
Here is main.js:
import React from 'react';
import { Route, Switch, } from 'react-router-dom';
import Dashboard from './Dashboard';
import FormContainer from './FormContainer';
const Main = props => {
return (
<main>
<Switch>
<Route path="/sign-in/" component={FormContainer} />
<Route path="/" component={Dashboard} />
</Switch>
</main>
);
};
export default Main;
An example of a component that is rendered, Dashboard.js:
import React from 'react';
import { Link } from 'react-router-dom';
const Dashboard = props => {
return (
<div>
<h2>Dashboard</h2>
<Link to="/sign-in/">Sign In</Link>
</div>
);
};
export default Dashboard;
The empty controller responsible for my root page:
class PagesController < ApplicationController
end
Also my routes.rb:
Rails.application.routes.draw do
root "pages#index"
get '*path', to: 'pages#index'
end
I've gone through multiple tutorials and I'm fairly certain that this is structured correctly... I think I'm mainly looking for any hints as to what may be interfering with React Router, outside of the library, i.e. webpack, running on localhost, etc.
I was able to fix this issue by renaming a tag of <main> that my application.html.erb's <%= yield %> tag was wrapped in... I don't quite understand why wrapping <%= yield %> in a tag specifically called <main> causes a page reload/disables client-side rendering, but in my case, it did!