Unable to mount actionable to routes - reactjs

I am trying to add ActionCable to my routes.
One guide says to do:
/config/routes.rb
...
mount ActionCable.server = '/cable'
...
However when I try to do so and run rails routes, I get the following error:
undefined method server=' for ActionCable:Module (NoMethodError) Did you mean? server
I have tried looking for an answer to this however I couldn't find anything.
I am trying to do a React - Ruby on Rails class project.

Wondering if the syntax changed with rails versions. In the Rails Guides (which you should be using), it states to use mount in the application.rb file
class Application < Rails::Application
config.action_cable.mount_path = '/websocket'
end

Related

MDbootstrap materialSelect is not a function Rails and Webpacker app

Im trying to figure out why the function materialSelect() is doesn't exist in the app context.
The MDboostrap select field is created correct with behaviour and style but I am trying to destroy and re-initialize using materialSelect() such as:
const $select = $('.mdb-select');
$select.materialSelect({destroy: true});
$select.materialSelect();
I get the follow error:
materialSelect is not a function
This app uses Rails 6/Webpacker. I think there is a file missing here since this app was created without the min.js file, instead each mdbootrap dependency was downloaded and added to the project.
The reason why this is not working is because of the MDBoostrap version. This project uses 2.2.1 and materialSelect() doesn't exist under this version. I was able to get it working on latest version 4.20.0

Cannot use a web worker with my microfrontend

I just want to use a simple web worker in one of my single-spa react micro frontend. However when I initialize it, that doesn't work, the program cannot find the worker. I tried with the 2 following methods inside of my root.component.js:
The classic way ->
let myWorker = new Worker('./worker.js');
The error message printed is just:
GET http://example.com/worker.js 404 (Not Found)
The webpack way ->
let myWorker = new Worker(new URL('./worker.js', import.meta.url));
And the error message printed is
react_devtools_backend.js:4049 DOMException: Failed to construct 'Worker': Script at 'http://example.com:8001/src_worker_js.project-name.js' cannot be accessed from origin 'http://example.com'.
I'm a beginner with single-spa and webpack so I suppose I'm just not doing the correct method.
You can get answer from this link:
https://medium.com/#krishnachirumamilla/content-security-policy-worker-src-cd06ecfa2fe8
I am working on micro frontends and faced the same problem and solved using the slution in the link
and also I used below solution to achieve
https://github.com/maxime1992/demo-webworker-library/blob/master/projects/fibonacci-webworker/src/lib/fibonacci.token.ts

Target class [App\\Http\\EnsureFrontendRequestsAreStateful] does not exist

I am using Laravel Sanctum to authenticate a react SPA with a laravel API backend.
While I am trying to access routes which does not need authentication, I am getting this error:
"Target class [App\Http\EnsureFrontendRequestsAreStateful] does not exist."
What should I do to guard only some routes, while leaving others open.
You are probably missing the import in the app/Http/Kernel.php file.
// app/Http/Kernel.php
<?php
namespace App\Http;
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;
This can usually be solved with: composer dump-autoload
You can read more about what the command does here
composer dump-autoload won’t download a thing. It just regenerates the list of all classes that need to be included in the project (autoload_classmap.php). Ideal for when you have a new class inside your project.

Cannot run website in Apache (Cannot use import statement outside a module)

I have tried asking on Super User community before, but didn't get any answers so I'm trying my luck here.
I'm running an Apache web server and decided to host a React application. I have a nano-react-app folder which contains the files shown below. I can render the website in debug mode so I know my code is working properly. But when I go online, I get this error :
Uncaught SyntaxError: Cannot use import statement outside a module (index.js:1)
which points to the line import React from 'react'; in index.js. To be honest, I don't really understand what the error is telling me so I don't know where and how to look. All I could figure out is that my Index.js file — with a capital i — is called from index.html with a lowercase i and it changes nothing locally but on server-side it returns this error when capitalizing i:
GET http://mywebsite/src/Index.js net::ERR_ABORTED 404 (Not Found)
Now.. I have read in another SO question that I should add type="module" when calling index.js in script tag but now I get this error :
Uncaught SyntaxError: Unexpected token '<' (index.js:5)
I would highly appreciate any solutions... Thanks!
Browsers don't support JSX natively. You need to transpile your code to JavaScript by creating a production build. How you do that depends on the toolchain you have selected and is covered in the React documentation.

request.getContextPath in React

I am building an Single-Page-Application where the front end is using ReactJS, and React Router.
The application shall be hosted with conventional app server either Tomcat or Weblogic (just due to whatever reason as required by our client).
My question is straight forward: in React, how could I get the application context path which is equivalent to request.getContextPath() as in jsp? I did many searching in google, but none of it could just give me a straight to the point answer. Whether react having such equivalent function? Or if I could grab this path from JSP? If so, how to grab it?
Thanks.
I had this problem as well and solved it like this:
In reactjs, when you are building your app for production, you need to run "npm run build".
To build it correctly, you need to set the homepage property in package.json to the main url of your site.
In my case I am using http://localhost:3000 for local development, and http://localhost:8080/myapp for stage testing.
That app needs to know if there is a "myapp" in the url or not. This is basically the problem of this post.
My answer is, because you need to specify the homepage property in package.json anyway, I am using this value to find my context path.
I am doing this like this:
{packageJson.homepage.substring(packageJson.homepage.lastIndexOf("/"))+"/login"}
For my test environment this returns: /login
For my stage environment this returns: /myapp/login
Maybe this helps.

Resources