I want to include this stimulus component into my brand new rails 7 app:
https://www.stimulus-components.com/docs/stimulus-dropdown
When I follow their setup approach, i get the following error in my browser console:
platforms#:1 Uncaught TypeError: Failed to resolve module specifier "stimulus-dropdown". Relative references must start with either "/", "./", or "../".
I found this article on stackoverflow:
Failed to resolve module specifier "stimulus-autocomplete"
which suggests to add a "pin" to my importmap.rb.
So i took the dropdown link from here https://www.jsdelivr.com/package/npm/stimulus-dropdown
and put it into my importmap.rb by:
pin "stimulus-dropdown", to: "https://cdn.jsdelivr.net/npm/stimulus-dropdown#2.0.0/dist/stimulus-dropdown.min.js"
But it doesnt work and displays a 404 in my browser console.
I hope someone can help, there must be an easy way to use stimulus-components in a brand new rails 7 app.
i was also struggling but i have figured it out
first run -
./bin/importmap pin stimulus-dropdown
second create a stimulus controller called 'dropdown' -
rails g stimulus dropdown
then copy-paste the following code into the dropdown controller
import { Application } from '#hotwired/stimulus'
import Dropdown from 'stimulus-dropdown'
const application = Application.start()
application.register('dropdown', Dropdown)
After you do all the above you are ready to use stimulus drop-down in your
views. for the view example check the docs on the site.
I suggest adding it with yarn as well with yarn add stimulus-dropdown. This worked for me when I faced your issue.
Related
I am trying to render my react component on my ruby on rails app. There is no error but the page renders nothing. I suspect if the tutorial is outdated or if failed to asked me to import some stuff.
I followed closely to this site: https://medium.com/quick-code/simple-rails-crud-app-with-react-frontend-using-react-rails-gem-b708b89a9419
This is probably the most critical part of the tutorial.
Let’s return to config/routes.rb for a second and add our Home index page to be the root:
root to: 'home#index'
Now all our index page need is a corresponding view. Create a new ‘home’ folder inside app/views and add index.html.erb file to it:
app/views/home/index.html.erb
This file will only contain one line that takes advantage of react_component view helper that comes with ‘react-rails’ gem. It’s not going to work right now, but it all will make sense in a moment.
<%= react_component 'Main' %>
Creating our first React Component
Create a file named app/assets/javascripts/components/_main.js.jsx
We are going to follow the usual syntax for creating a stateless/presentational React Component that we will call Main:
const Main = (props) => {
return(
<div>
<h1>Fruits are great!</h1>
</div>
)
}
Head to localhost:3000 in the browser and see for yourself that our first Component was loaded on the page. Pretty cool!
I tried to include code like
import React from "react"
import ReactDOM from 'react-dom';
but nothing renders too.
When trying to debug, I tried not to deviate from the tutorial as I am still new and hope to learn from one source at a time to prevent conflicting and different methods.
So I have a rails app, with angular being slowly introduced. IM having an issue with rails routing and angular ui-route playing together nicely.
I have a order/index.html.erb that has
<div ng-app="orders">
<div ui-view></div>
</div>
That ultimatley routes to a partials/orders/users/index.html file. Within that file I have a link to the edit page, that looks like this.<a ui-sref="users_orders_edit({userId: order.user.id, orderId: order.id})">Edit</a>
That link is being routed by angular to an edit page. Here is the issue. When I refresh the edit page with the url /users/:id/orders/:order_id/edit, it throws a rails error, saying that route is not defined.
What am I missing here?
Here's what I do to solve this. In your routes.rb file add the following towards the bottom of the file so that it doesn't match every route:
get "/(*redirect_path)", to: "the_controller_that_serves_your_angular_app#index"
You don't have to call it redirect_path. It can be named whatever you like because you won't use it. This is telling rails to map all uncertain paths to your angular app. This will allow your users to refresh and it still load the angular app and even go to the correct state.
I have to two pages served by laravel 5
localhost/home
localhost/login
In my home page, i have an angular2 component called <my-app></my-app> and is working fine.
But when i visit the login page which doesn't contain any component, angular throws me an error "EXCEPTION: The selector "my-app" did not match any elements". How do i fix this issue when visiting the login page.
I did all the bootstrapping for Angular 2.0 Beta in my master layout page which makes the bootstrapping available to both pages.
I was searching for the solution for a few hours. A solution that works for me is in main.ts:
if (document.querySelector("homeSelector")) {
platform.bootstrapModule(HomeModule);
}
Similarly for other pages and other modules.
It means you declared a Component with the my-app selector but you are not using the <my-app> anywhere.
Angular2 requires at least one component if you start the app. A workaround could be something like the following.
if(window.location.pathname == '/home') {
bootstrap(myapp); // or your initialization
}
I'm new to alchemy-cms.
I created a fresh install from the guides. I did not add any concept or structure.
Going to localhost:3000 I have to add the first user and after that I have a clean site.
When trying to add a new page, I have to select a type (page-layout?) and type in a name.
The Type combobox remains empty, and therefore the website don't allow me to add a page. What am I doing wrong? I think I'm missing something very obvious here.
I have looked allready in the source code, and running the following:
rails console
Alchemy::PageLayout.all
and this results in:
=> [{"name"=>"index", "unique"=>true, "elements"=>["article"], "autogenerate"=>["article"]}]
So I would guess the combobox should be filled with this item.
The index page layout is marked as unique, so it can only be added once per language. And as the so called language root page (the first most page in your page tree) already has this page layout, no new page can be created using this page layout.
In order to fix your problem you need to add another page layout to your page_layouts.yml file. It is good practice to add an standard page layout that is not unique (default) and can therefore be added multiple times per language.
I made a small mixin for the Chosen plugin that worked well in this fiddle.
When I use this in my ember-rails application the chosen box shows up, but has no options. I think it is related to my using ArrayController.extend vs Object.create (in the fiddle), but I can't figure out why. When I change extend to create in rails, it tries to create the controller twice and gives an error.
Ember changes so fast, did I miss something from the fiddle version to the ember-rails version?
(ember-rails source code under assets at https://github.com/camdub/watchd)
Looking at your code, it seems that you're using the routing. Nice. You understood that when using routing, the controllers are instantiated for you by the framework, and each xxxView has its xxxController instance, accessible by the controller property.
in repos.handlebars, try to directly use `controller'.
<div class="container top-section">
{{view Watchd.ChosenSelect
contentBinding="controller.content"
valueBinding="controller.selected"
}}
</div>