Due to this issue https://github.com/facebook/metro/commit/9773229227895bfc5a5bde969108a4cbcc270eab#diff-ce1179d24387784c3c5f856c4b5b55d8R59
Object.assign fails on dev builds for RN under certain scenarios (which is explained in the above link's comments). The issue is that one of my node modules triggers this particular scenario. I need to polyfill for that reason.
I'm trying to polyfill my own Object.assign (based on this https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/Libraries/polyfills/Object.es6.js, except without the check for an existing one)
When I log out global from within the node module, I can see that it is pointing to my code
Object: ƒ Object()
arguments: (...)
assign: ƒ assign(target, varArgs)
arguments: (...)
caller: (...)
length: 2
name: "assign"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: objectAssign-polyfill.js:2
[[Scopes]]: Scopes[1]
However, the node module still appears to be using its own Object.assign rather than my polyfilled one.
When I modify the code in the node module to use global.Object.assign, it seems to finally work. However, is there a way to do this without doing that (because then I'd have to do it everywhere)?
The code is below:
// objectAssign-polyfill.js
Object.defineProperty(Object, 'assign', {
value: function assign(target, varArgs) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
let to = Object(target);
for (let index = 1; index < arguments.length; index++) {
let nextSource = arguments[index];
if (nextSource != null) {
for (let nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true,
});
// shims.js
import "node-libs-react-native/globals";
import './objectAssign-polyfill'
import { btoa } from "Base64";
import nodeUrl from 'url';
global.btoa = btoa;
global.URL = class URL {
constructor(url) {
return nodeUrl.parse(url)
}
}
// index.js (the root of my RN app)
/** #format */
import "./shims";
import { AppRegistry } from "react-native";
import Core from "./Core";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => Core);
Related
I am trying add a qr code scanning functionality to my react app. I am using #zxing(https://www.npmjs.com/package/#zxing/browser & https://www.npmjs.com/package/#zxing/library) packages.
Following the readme, here's my js code. I have hosted the application on aws so its SSL covered. But I can't seem to figure out the issue. I have read the git repo of both and the functions do exists(https://github.com/zxing-js/browser/tree/master/src/readers)
import React, { useState, useEffect } from "react";
import {
NotFoundException,
ChecksumException,
FormatException
} from "#zxing/library";
import { BrowserQRCodeReader, BrowserCodeReader } from '#zxing/browser';
export default function() {
var qrCodeReader = null;
var codeReader = null;
var sourceSelect = null;
console.log("ZXing code reader initialized");
useEffect(() => {
codeReader = new BrowserCodeReader();
qrCodeReader = new BrowserQRCodeReader();
console.log(codeReader.listVideoInputDevices()); // ISSUE: RETURNS -> listVideoInputDevices() is not a fuction
console.log(qrCodeReader.listVideoInputDevices()); // ISSUE: RETURNS -> listVideoInputDevices() is not a fuction
console.log("Code Reader", codeReader); // ISSUE: SEE IMAGE BELOW
console.log("QR Code Reader", qrCodeReader); // ISSUE: SEE IMAGE BELOW
}, []);
Instead of using the import try using:
`
const zxing = require('zxing-js/library');
`
so whenever I want to import a model via GLTFLoader locally I get this error:
JSON.parse: unexpected character at line 1 column 1 of the JSON data
but when I try it via a link it works.
The link I tried with is:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/ladybug.gltf
I tested the models I used in the official three.js-Editor and even exported them from there to get a "clean" gltf model. I also saved the content of the link in a gltf file and it didnt work neither.
This is my code:
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
async function run() {
try {
var loader = new GLTFLoader();
loader.crossOrigin = true;
loader.load(
"./scene.gltf",
//"https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/ladybug.gltf",
function (data) {
var object = data.scene;
object.position.set(0, 0, 0);
scene.add(object);
}
);
} catch (e) {
console.log(e);
}
}
run();
As Marquizzo said: You have to run a local server for the models. You cannot import them via a path normally, because of security restrictions.
I am new in Jest. I tried to write test for basic function which is
export const queryValidate = (query) => {
const str = query.replace(/\s+/g, "");
const conditionsArray = [
str === "",
str === "{",
str === "}",
str === "{}",
];
if (conditionsArray.includes(true)) {
return true;
} else {
return false;
}
};
In my Jest test file like that
import { queryValidate } from "./components/QueryValidate";
console.log(queryValidate("{"));
I am getting this error message :
import { queryValidate } from "./components/QueryValidate";
SyntaxError: Cannot use import statement outside a module
I cannot understand it is about Jest error or React module error. I try a write dummy test like :test("Fake test", () => {
expect(true).toBeTruthy();
});
Its work .
Can someone help me?
I don't have enough reputation to add a comment, therefore I'm adding an answer. I faced the same issues a while back.
As Estus has mentioned in the comment, you need to change the Jest config.
You can also have a look at babel-jest and then set a babel config file/ .babelrc, along with the preset env.
I am using Jhipster with Angular. I have a method that is trying to check to see if the user in as admin.
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { IPost } from 'app/shared/model/post.model';
import { AccountService } from 'app/core/auth/account.service';
import { Subscription } from 'rxjs';
import { Account } from 'app/core/user/account.model';
#Component({
selector: 'jhi-post-detail',
templateUrl: './post-detail.component.html'
})
export class PostDetailComponent implements OnInit {
post: IPost | null = null;
authSubscription!: Subscription;
account: Account | null = null;
constructor(protected activatedRoute: ActivatedRoute, private accountService: AccountService) { }
ngOnInit(): void {
this.activatedRoute.data.subscribe(({ post }) => (this.post = post));
this.authSubscription = this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
}
previousState(): void {
window.history.back();
}
private isAdmin(): boolean | undefined {
return this.account?.authorities.includes('ROLE_ADMIN');
}
}
When the code is compiled I get an error
ERROR in ./src/main/webapp/app/entities/post/post-detail.component.ts 21:30
Module parse failed: Unexpected token (21:30)
File was processed with these loaders:
* ./node_modules/angular2-template-loader/index.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/thread-loader/dist/cjs.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| }
| isAdmin() {
> return this.account ? .authorities.includes('ROLE_ADMIN') : ;
| }
| };
ℹ 「wdm」: Failed to compile.
As a workaround, if I just hard-code the return value to 'true' in the isAdmin() method it works and compiles. How come just checking to see if the array contains something causes the webpack to freak out?
Optional chaining was introduced in Typescript 3.7, current JHipster 6.7.1 uses Typescript 3.4.5 so it's not very surprising that your expression is not understood and translated as ternary operator.
Try upgrading typescript version in package.json and npm install to see if it solves it.
I've been trying to setup using Sencha Cmd for our ExtJS 4.2.2 project, and the build completes successfully, but when I try to run the app I get this:
TypeError: comp is null
I'm running the testing build, so the app.js is concatenated but not minified.
Same thing happens if I run the production build.
If I execute from my raw source code files, the app runs fine.
Its happening in this code in the generated app.js:
/**
* Creates new LoadMask.
* #param {Object} [config] The config object.
*/
constructor : function(config) {
var me = this,
comp;
if (arguments.length === 2) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask now uses a standard 1 arg constructor: use the target config');
}
comp = config;
config = arguments[1];
} else {
comp = config.target;
}
// Element support to be deprecated
if (!comp.isComponent) {
if (Ext.isDefined(Ext.global.console)) {
Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
}
comp = Ext.get(comp);
this.isElement = true;
}
me.ownerCt = comp;
if (!this.isElement) {
me.bindComponent(comp);
}
me.callParent([config]);
if (me.store) {
me.bindStore(me.store, true);
}
},