We Keep Coding

I keep seeing 'XRWebGLLayer' is not defined no-undef' when using three.js in react.js to create WebXR app

I'm trying to use WebXR using Three.js in React but I keep seeing this error:
'XRWebGLLayer' is not defined no-undef
for baseLayer: new XRWebGLLayer(session, gl)
I tried this same code in vanilla.js and had no errors at all but when I try it with react.js it doesn't compile.
The tutorials I'm referring to are: https://developers.google.com/ar/develop/webxr/hello-webxr and https://www.devbridge.com/articles/ar-app-development-tutorial/
I'm using version 0.133 of three.js and I imported it into my react app using:
import * as THREE from 'three';
I'm relatively new to react and three.js. Can anyone please help point me in the right direction? I'd really appreciate it!!

XRWebGLLayer is available in the window object.
Also refer:
https://stackoverflow.com/a/62264777/4290781
const { XRWebGLLayer } = window;
const baselayer = new XRWebGLLayer(session, gl);

Bootstrap 5 Webpack plugins are not fully functional

I imported the Bootstrap 5 plugin as documented using Webpack
import Offcanvas from '../node_modules/bootstrap/js/dist/offcanvas';
import Dropdown from '../node_modules/bootstrap/js/dist/dropdown';
import ScrollSpy from '../node_modules/bootstrap/js/dist/scrollspy';
The events are working fine as below:
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})
But when I want to create an instance:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
I get an error:
Uncaught ReferenceError: bootstrap is not defined
I would be grateful for any help in this matter

Try new Offcanvas() instead of new bootstrap.Offcanvas():
var bsOffcanvas = new Offcanvas(myOffcanvas)
Yes, the Bootstrap 5 documentation states you can use bootstrap.Offcanvas, but in your case, you don't import bootstrap, you import Offcanvas directly. That's why bootstrap isn't defined.

Properly Importing v3 of JointJS

When working with version 2.2.1 of JointJS I imported it like this:
import { default as joint } from "jointjs";
Now I'm working with version 3.0.2. "joint" from the line above is undefined. The import no longer works. I noticed in the release notes for JointJS 3.0.0:
Notable changes -
full support for ES Modules
How should I import it now?

there is no default import anymore,
import * as joint from 'jointjs' works just fine. If need a smaller bundle you can cherry pick parts you actually need:
import { dia } from 'jointjs/src/core.mjs';
// import shapes you need
import * as standard from 'jointjs/src/shapes/standard.mjs';
const graph = new dia.Graph([], { cellNamespace: { standard } });
new dia.Paper({
cellViewNamespace: { standard },
el: document.getElementById('paper'),
width: 500, height: 500,
model: graph
});
const rectangle = new standard.Rectangle().size(200, 200).position(100, 100).addTo(graph)
Please note you need to be careful with the cellViewNamespace for the dia.Paper and cellNamespace option for the dia.Graph in this setup. Otherwise, you could encounter the Uncaught Error: dia.ElementView: markup required error
runnig this snippet is a quick check you've set up the namespaces correctly:
const cells = JSON.stringify(graph.toJSON());
graph.clear();
graph.fromJSON(JSON.parse(cells));

How do you add external javascript libraries using ES6 style imports?

I'm having trouble understanding exactly how to use older javascript libraries within newer ES6 projects. I'm looking at a React project that's been compiled with webpack, written with ES6 and transpiled with Babel. Each component follows the import * from "" notation.
There's an external javascript library I want to use within the project: https://github.com/pchen66/panolens.js. The compiled library doesn't follow ES6 export format, and only has one global object PANOLENS.
What should I do if I want to include this into my project?

This is not the best.
Include it in your html :
<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>
<script src="bundle.js"></script>
<script>window.PANOLENS = PANOLENS</script>
Where bundle.js is your own builded javascript code.
Then, you will be able to use PANOLENS object anywhere.
Example component :
import react, {Component} from 'react'
export default class Test extends Component {
componentDidMount(){
var panorama, viewer;
panorama = new window.PANOLENS.ImagePanorama('asset/equirectangular.jpg' );
viewer = new window.PANOLENS.Viewer(
container: document.getelementbyid('viewer-container'), // A DOM Element container
controlBar: true, // Vsibility of bottom control bar
controlButtons: [], // Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
autoHideControlBar: false, // Auto hide control bar
autoHideInfospot: true, // Auto hide infospots
horizontalView: false, // Allow only horizontal camera control
cameraFov: 60, // Camera field of view in degree
reverseDragging: false, // Reverse orbit control direction
enableReticle: false, // Enable reticle for mouseless interaction
dwellTime: 1500, // Dwell time for reticle selection in millisecond
autoReticleSelect: true, // Auto select a clickable target after dwellTime
passiveRendering: false, // Render only when control triggered by user input
);
viewer.add( panorama );
}
render(){
return(
<div id='viewer-container'></div>
)
}
}

It doesn't really matter if the module itself follows ES6 syntax. It will either follow commonJS or AMD, both of which webpack can handle, and at worst, you can just require/import the whole file into your bundle: https://www.npmjs.com/package/panolens.js.
EDIT: This npm module/repo does use module.exports if you look at the dist.

EDIT:
Yeah, it looks like someone has forked the library and made an NPM package out of it. Have you taken a look at https://github.com/sbolel/pano. There is an ES6 example.
Install the package:
npm install --save pano
Then import:
import Pano from 'pano'
import { Page } from 'pano'
// Pano.Page === Page
const panoPage = new Page('pano')
panoPage.init()
ORIGINAL:
You could load the script asynchronously using the method below, or if you are using a bundler, it would have a way to import external scripts. For example, Webpack has Externals for this.
After doing this, you can access the the global object PANOLENS, as per the documentation. You'll want to make sure the PANOLENS object is available before using it in your application.
Add the following to your static HTML:
<script src="https://github.com/pchen66/panolens.js" async></script>
If you are planning to only use the script in a certain React component (presuming you use React), you could use a library such as react-async-script-loader. This will allow you to lazy load a script on a particular component. It has a bunch of properties that can be used to determine when the script is ready to be used.
Again, after the script has successfully loaded, you may use the library by accessing it through the global PANOLENS variable.

So you would want some kind of module shimmer. If you are using webpack you should try this:
https://github.com/webpack/docs/wiki/shimming-modules
There are similar shims for browserify too:
https://github.com/thlorenz/browserify-shim
You could also fork the repo and shim it manually something like this, the implementations may vary though.
/**
* Panolens.js
* #author pchen66
* #namespace PANOLENS
*/
var PANOLENS = { REVISION: '3' };
module.exports = PANOLENS;

How to import Javascript file into Ionic/Angular project

For my Ionic 2 app, I'm using the three.js and a PLYLoader extension for three.js (found here: https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/PLYLoader.js)
I'm able to import in three.js just fine, by putting this in my index.html:
<script src="three.js"> </script>
Then in the relevant TypeScript file:
import * as THREE from '../../three.js';
So I'm trying to do the same thing with PLYLoader:
<script src="PLYLoader.js"> </script>
and
import * as PLYLoader from '../../PLYLoader.js';
But whenever I load the page, I get the following error:
ionViewDidLoad error: __WEBPACK_IMPORTED_MODULE_2__three_js__.PLYLoader is not a constructor
Ionic/Angular is obviously able to find the file, but for some reason the TypeScript isn't interpreting the JavaScript class correctly. Is there a reasonable solution to this?

I don't see any exports in PLYLoader. That could be one issue.

On the npm page, it specifically has this code:
const THREE = require("three");
const PLYLoader = require("three-ply-loader");
PLYLoader(THREE);