Develop Reference

Elixir Phoenix serve Javascript from /priv/static

I am currently fighting esbuild in my phoenix project. I have a heex template on which I want to use Trumbowyg as a text editor. First I tried to import the javascript file via vendoring it and doing import trumbowyg from '../vendor/trumbowyg.min.js in app.js.
I thought this would work because it did for AlpineJs. But it didn't. It complained about missing jQuery. So I vendored jQuery the same way: import {jQuery, $} from '../vendor/jquery.min.js. But no success. Same error message Uncaught ReferenceError: $ is not defined.
Then I had the idea to fix it via importing the scripts in the template withing <script> tags. SO i just threw the two js files into the /priv/static/assets/ folder. This worked in development with the following tags:
<script type="text/javascript" src={Routes.static_path(#conn, "/assets/jquery.min.js")}></script>
<script type="text/javascript" src={Routes.static_path(#conn, "/assets/trumbowyg.min.js")}></script>
But this stopped working in production (I use the docker deploy method). Then I tried using some kind of Plug.Static implementation but I did not get it to work.
So my question now is: How can I make those scripts load in a production environment? Even better would be to know how to configure esbuild to use deploy the script files correctly. I don't know what to change, because my AlpineJs import is working fine.
import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar"
import Alpine from "../vendor/alpine.min"
window.Alpine = Alpine;
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})
// Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
window.addEventListener("phx:page-loading-start", info => topbar.show())
window.addEventListener("phx:page-loading-stop", info => topbar.hide())
// connect if there are any LiveViews on the page
liveSocket.connect()
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
That's the content of my app.js file. But like I said, adding: import trumbowyg from '../vendor/trumbowyg.min.js or import {jQuery, $} from '../vendor/jquery.min.js gets me errors like Uncaught ReferenceError: $ is not defined and Uncaught ReferenceError: jQuery is not defined.
Every help is appreciated. Thanks in advance.

I am unable to import js file from dynamic path

I am trying to import a js file with static path which is working fine, but when I change path to dynamic it give me the error (Uncaught SyntaxError: Unexpected token '<' (at common.js:1:1)
main.80ab3b6a.js:942 undefined) if I put the path static like ~/ALLPATH/translation/en/tarnslate.js then it is working, but if I change it to dynamic then give me the error
const ln = $scope.locale;
if (ln) {
$scope.commonLang = (await import(`~/ALLPATH/translation/translation/${ln}/tarnslate.js`)).languages;
console.log($scope.commonLang);
}

Dynamic import with template string as path error

I'm trying to get dynamic importing working while supporting a dynamic path, but I've noticed the following behavior below:
// Using lazy and Suspense API from React
// FAILS
const path = "folder/file";
// use `${path}` template string because using variable inside import fails
const LazyModule = lazy(() => import(`${path}`));
return <Suspense fallback={this._getFallback()}><LazyModule></Suspense>;
// SUCCEEDS
// use actual string
const LazyModule = lazy(() => import("folder/file"));
return <Suspense fallback={this._getFallback()}><LazyModule></Suspense>;
I read that we cannot use variables inside import statements, but if we convert it using "" + <path> or `${path}`, I thought this was supposed to solve this issue. However, when I use this, I get the error:
Uncaught (in promise) Error: Cannot find module 'folder/file'.
Is there a known workaround for this behavior?
Using webpack "3.12.0".

Using JS functionality in Ionic App Component TS

Within an Ionic app, I'm trying to call an external JS file's functions in a TS file and am receiving this error: (Line 9 is labelImage = function(){)
Error: Uncaught (in promise): Error: Module parse failed: Unexpected token (9:15)
You may need an appropriate loader to handle this file type.
|
| export class CloudVision{
| labelImage = function(){
| // Creates a client
| const client = new vision.ImageAnnotatorClient();
I import this JS file at the start of the TS file:
import { CloudVision } from '../../../vision.js'
and use it with:
CloudVision.labelImage()

try this
import * from '../../../vision.js
or include it in ionic-li
or look for type definition in typings

window is not defined while creating sitemap for React app

I'm working on a React app and I want to create a sitemap for the same. I'm using react-router-sitemap to generate this sitemap and here is my sitemap-builder.js:
require('babel-register');
const router = require('./root.js').default;
const Sitemap = require('../').default;
const filterConfig = {
isValid: false,
rules: [
/\/admin/,
/\*/,
],
};
(new Sitemap(router)
.filterPaths(filterConfig)
.build('https://www.ace-up.com')
.save('./sitemap.xml')
);
But every time I run the file, I get the following error:
ReferenceError: window is not defined
at Object.initialize (/< path >/node_modules/react-ga/src/index.js:55:8)
I was getting a similar error for all my js files also, wherever I could find them but I ended up commenting them out for the time being to make the sitemap work.
What would be the proper way to get the react-router-sitemap to ignore the window problem?