Phoenix: Error when refer to exq_ui dependency via git - reactjs

I use exq and exq_ui for background job processing and monitoring in my Phoenix application.
At first, I refer to exq_ui in mix.exs's deps like this:
{:exq_ui, "~> 0.11.0", only: [:dev, :qa, :stg, :prod]}
And it works fine.
But then I discover 2 bugs in the UI:
When I click on the tab Busy, it blows up on the server side, and shows nothing in the tab Busy in UI.
In the tab Scheduled, when a job is passed args as a list of map, it is showed as [Object object] in the column Args, instead of the real content of the args.
I fix those bugs here in this PR to the main official repo:
https://github.com/akira/exq_ui/pull/89/files
But I cannot expect it will be merged anytime soon, so I change my dependency in mix.exs like this:
{:exq_ui, "~> 0.11.0",
git: "https://github.com/chauhonglinh/exq_ui.git",
branch: "feature/fix_busy_tab_in_exq_ui",
only: [:dev, :qa, :stg, :prod]}
Now the trouble happens.
The mix deps.get, mix deps.compile and iex -S mix phx.server all run successfully.
But then when I browse to http://localhost:4040, the UI doesn't show up, and in the javascript console, there are errors:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4040/assets/vendor.css".
exq_ui:20
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4040/assets/exqui.css".
vendor.js:1 Uncaught SyntaxError: Unexpected token <
exqui.js:1 Uncaught SyntaxError: Unexpected token <
Question: Why did this error not happen with ordinary deps config, but it happened with deps config referred to a git repo?
How can I fix it?
I think React and Angular also have similar errors in certain situations, but it seems that nobody has a good fix for them, just some anecdotes here and there.

I figured out what the problem was. But I don't see any good solution for it yet if my PR is not merged (short of copying the whole exq_ui package and create a new one)
Here is the problem.
Referring to package like this points to binary distribution on hex.pm, hence it has all the emberjs and js modules prepackaged and babelified correctly:
{:exq_ui, "~> 0.11.0", only: [:dev, :qa, :stg, :prod]}
However, the referring to package in github points to source from github, so it has only source:
{:exq_ui, "~> 0.11.0",
git: "https://github.com/chauhonglinh/exq_ui.git",
branch: "feature/fix_busy_tab_in_exq_ui",
only: [:dev, :qa, :stg, :prod]}
Solution for dev environment:
In order for it to work in dev environment, from within my Phoenix repo, I need to run the following commands:
cd deps/exq_ui/priv/ember
npm install
bower install
node_modules/ember-cli/bin/ember build --environment=production
Then the web UI at http://localhost:4040 will work properly.
Remaining Question: When I refer to exq_ui from a git repo, I still don't see how I can make a binary distributed version for exq_ui when I want to release my Phoenix app.

Related

Corrupted React component name?

This is an unusual one.
I commited a git branch, merged it, then hit undo on the merge. If I roll back to the commit (that had just been working) I get the error:
Uncaught TypeError: Cannot read properties of undefined (reading 'includes')
at UniqueComponentName (UniqueComponentName.js:13:1)
Line 13 is the opening declaration of the functional component:
export const UniqueComponentName = ({ side, mode, menuJSON, pcbData, ...props }) => {
I thought, initially, it was a problem with an 'includes' in the component but trial and error led me to discover the following:
A brand new component named UniqueComponentName, made with a
template that works under any other name, still throws this error.
If I don't include the UniqueComponentName component in any other
component, the app performs fine.
As soon as I include it, the error above is thrown. Again, the
contents of UniqueComponentName are irrelevant as I can literally
copy and paste another working component and the error comes up.
I'm wondering if it's possible that the merge and undo merge corrupted some reference to UniqueComponentName? It's a long shot, I'm aware, but I'm there has been a lot of work since the last commit.
Further info:
If of relevance:
Reactjs is running off the standard create-react-app server locally.
I have been staging commits locally, and using a 3rd party build
pipeline to run builds on anything I push to github. The builds are hosted an a remote server that isn't involved here. As far as I
know, there's no production builds locally : I just hit save on any
file as I'm working on it and see webpack compiles, browser updates,
etc.
I'm considering starting up a fresh create-react-app project and bringing in all the /src files from the current project, to see if mt theory holds up.
The error is caused by create-react-app serving old bundle files.
Those files are located in the node_modules/.cache/ folder.
Solution;
Delete the node_modules/.cache/ folder
Restart your dev-server
React should now re-create all the bundle files, sourcemaps, etc..
- Old git issue with some in-depth details

CRA - Failed to register a ServiceWorker, unsupported MIME type ('text/html')

I am getting the following error when publishing my create react app but the error doesn't appear locally. I recently updated my React version and a load of packages too. I'm guessing it's possibly something to do with that as I've never had this issue before?
Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://**subdomain**.azurewebsites.net/') with script ('https://**subdomain**.azurewebsites.net/service-worker.js'): The script has an unsupported MIME type ('text/html').
Any input on this will be greatly appreciated. The error doesn't appear to be breaking anything from what I can see but I'd rather not push this to production with any kind of errors
So turns out the issue was because I updated the react version. CRA doesn't have service workers out of the box anymore. The project was returning 'unsupported MIME type ('text/html')' because it was hitting 404 looking for a file that doesn't exist.
The fix was relativly simple.
I replaced the registerServiceWorker() in my index.js file with reportWebVitals(). I then added reportWebVitals.js to my src folder. (I just created a temp react project and pulled the file from that). After I did that it started to work for me. I think I also had to npm install web-vitals.

Vespa Tutorial – HTTP API use-case fails to activate with IllegalArgumentException

I'm currently following the Vespa tutorials, and ran into an issue with the HTTP API use-case. Everything works fine from the mvn install package to the vespa-deploy prepare target/application.zip.
The call to vespa-deploy activate returns normally, but the application then never gets available on localhost:8080. Looking at /opt/vespa/logs/vespa/vespa.log (in the VM) one finds the following stack trace:
Container.com.yahoo.jdisc.core.StandaloneMain error Unexpected:
exception=
java.lang.IllegalArgumentException: Could not create a component with id 'com.mydomain.demo.DemoComponent'.
Tried to load class directly, since no bundle was found for spec: sample-app-http-api-searcher.
If a bundle with the same name is installed, there is a either a version mismatch or the installed bundle's version contains a qualifier string.
at com.yahoo.osgi.OsgiImpl.resolveFromClassPath(OsgiImpl.java:48)
...
This occurred using a fresh Docker image with a clean clone of the sample-apps git repository. Preparing and activating the basic sample as well as the other http example did work seamlessly.
I checked the sources and the xml files for obvious problems but don't have any clue about what is failing and where.
target/application.zip contains
application/components/http-api-using-searcher-1.0.1-deploy.jar
application/hosts.xml
application/searchdefinitions/basic.sd
application/services.xml
And the jar itself does contain a com/mydomain/demo/DemoComponent.class file (among other things).
Potentially related issue on the github tracker: https://github.com/vespa-engine/vespa/issues/3479 I'll be posting a link to this question there as well, but I still think it's worth a SO question, at least to get some action behind the vespa tag :)
The bundle id in the application's services.xml file was wrong. Please pull the application from git and try again now. See also PR: https://github.com/vespa-engine/sample-apps/pull/18
Brief explanation: The bundle id given in the bundle="<id>" declaration in services.xml must match the 'Bundle-SymbolicName' in the bundle's manifest. When the bundle has been built with the Vespa bundle-plugin, the symbolic name is by default the same as the project's artifactId. Hence, in most cases you just have to verify that the bundle id matches the artifactId.

Angular 2, Webpack 2, async routes: Cannot find module

I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .

Sencha Cmd v3 build error when implementing Bryntum Scheduler

Using Cmd 3.0.0.141, I have successfully generated a workspace and an Ext app in that workspace. The application builds correctly until I attempt to integrate the Bryntum Scheduler, where I encounter an error when I try to build:
"Failed to resolve dependency Sch.panel.SchedulerTree for file ExtCalendar.view.Tree"
the app is very simple at this point, uses Ext.application and follows the MVC pattern where I have a view defined "ExtCalendar.view.Tree" that extends 'Sch.panel.SchedulerTree". I also have models and stores that extend Bryntum classes as well, so I assume the compiler will trip over those as well, since it can't see the Sch namespace.
I've added a 'js' path to my app.json that points to the bryntum js file where 'Sch.panel.SchedulerTree' comes from. I've tried to run the 'refresh' command with the same results (Failed to resolve...). I've regenerated the bootstrap.js file manually using 'compile', but nothing from the Sch namespace ever gets added to it, despite the Brytum lib file being in the classpath.
What do I need to do in order to successfully run the 'build' command with libs like this?
Or, do I need to take a more granular approach using the 'compile' command?
With the help of the nice folks on the Sencha forums, I was able to resolve my build issues. The solution, for me, involved a shim. I added an external shim.js file to my index with as many //#require and //#define directives as needed in order to resolve the dependency issues.
According to the nice folks at Bryntum, once I upgrade from the free-trial version of the Bryntum Scheduler, I will be able to get rid of the shim and simply rely on the sencha.cfg classpath pointing at the Bryntum src.
Also, as an aside, the app.json file is not used in ExtJS apps, its inclusion in the generated files was a bug in build 141 of Cmd v3.
See this thread for more detail.

Resources