I am following docs here: https://create-react-app.dev/docs/adding-custom-environment-variables/
did set up in heroku the variable:
REACT_APP_ENVIRONMENT = prod
and checking in code:
export const fbAppId =
process.env.REACT_APP_ENVIRONMENT === "prod"
? "316459592894290"
: "1162568760820386";
But somehow always the NOT "prod" version is assinged. Do you have any idea why?
I have react-script 3.4.3.
I'm using react in conjunction Jest and enzyme. My unit tests were working as desired until I added a config.json that lives in src/config/config.js and it appears like so:
{
"appName": "Mystery",
"clients": {
"api1": "http://localhost:8082",
"api2": "http://localhost:8083",
"api3": "http://localhost:8084"
},
}
I import this file in my client folder that I use for network requests in this manner:
import CONFIG from '../../config/config.json';
const api = new Client(CONFIG.clients.api1);
Now when I run npm test I get this error on all my files that use that specified api:
TypeError: Cannot read property 'api1' of undefined
After some google foo.... I'm stymied. Any assistance would be greatly appreciated. Please let me know if additional details are required.
I created a rust-wasm module and use workerize-loader to load it:
export const getQRCode = async (
arg: string,
width: number,
height: number
) => {
const { qrcode } = await import('uranus-qrcode');
return qrcode(arg, width, height);
};
and then I use the worker as such:
// #ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import qrCodeWorker from 'workerize-loader!workers/qrCodeWorker';
...
const workerizeQRLoader = async () => {
try {
const instance = qrCodeWorker();
const qr = await instance.getQRCode(href, 150, 150);
setQRCode({
__html: qr
});
} catch (e) {
console.warn(e);
}
};
...
useEffect(() => {
workerizeQRLoader();
// qrLoader();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
...
The above works in dev mode, but after compiling it says:
TypeError: a.getQRCode is not a function
at 8.a2ac9b2e.chunk.js:1
at l (0.69608c56.chunk.js:2)
at Generator._invoke (0.69608c56.chunk.js:2)
at Generator.forEach.e.<computed> [as next] (0.69608c56.chunk.js:2)
at r (0.69608c56.chunk.js:2)
at s (0.69608c56.chunk.js:2)
at 0.69608c56.chunk.js:2
at new Promise (<anonymous>)
at 0.69608c56.chunk.js:2
at 8.a2ac9b2e.chunk.js:1
If I import the rust-wasm module directly into the main thread it works:
...
const qrLoader = async () => {
const { qrcode: render } = await import('uranus-qrcode');
const qr = await render(href, 150, 150);
setQRCode({
__html: qr
});
};
useEffect(() => {
// workerizeQRLoader();
qrLoader();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
...
Basically I try to get React (Webpack & TypeScript flavor) to load WebAssembly modules (aka wasm, created via Rust-Wasmbindgen) through web workers. I've tried workerize-loader + wasm-loader, and it works pretty well in the dev mode but once it is compiled, the prototype will not be added to the worker (suspecting it's a bug in workerize-loader because all workerized modules behave the same). I also tried to work with worker-loader + comlink, but the worker-loader doesn't seem to work with wasm-loader (would not be able to import wasm into the worker). The only way to get this to work is to load wasm into the main thread via wasm-loader and just give up the multi-threads setup which is basically a shame...so does anyone have successfully use a WebAssembly module loaded through a web worker in a React TypeScript project? What's your setup?
I also created a starter project: https://github.com/aeroxy/react-typescript-webassembly-starter.git
You can checkout the "workerize" branch and see how it works in dev mode but after compiling, it throws "not a function" error.
This is a bit much for a comment but I got some bad and good news. Executed the following commands using node v12.16.1 and yarn 1.22.4:
git clone https://github.com/aeroxy/react-typescript-webassembly-starter.git
cd react-typescript-webassembly-starter
yarn # some warnings that packages need to be updated to later version
yarn start # dev version works
yarn build
cd build
npx serve
When opening the build version in Google Chrome 81.0.4044.113 (Official Build) (64-bit) on my Fedora 31 I can see the qr code, no errors in console.
That means that there is no fault in the project (good news) but something maybe wrong in settings on your machine (bad news), the os you are using or some other machine specific difference.
You could try a to clone the project again and run the commands exactly like I did to see if that's working. Older npm could have some problems with cached packages but that's been fixed for a while now. A while ago you needed to change the repository for npm or use vpn because it was blocked, this could also be causing you trouble.
This is a duplicate of my original answer but got deleted for some odd reason by a moderator without leaving a reason.
Now the workerize method works!
I've originally tried workerize-loader + wasm-loader, and it works pretty well in the dev mode but once it is compiled, the prototype will not be added to the worker (suspecting it's a bug in workerize-loader because all workerized modules behave the same). This indeed turns out to be a bug in workerize-loader (see workerize-loader failed to work after compiling and Version 1.2.0 does not export function on worker instance in production mode). After upgrading to the workerize-loader 1.2.1, it works in both dev and prod code.
I have updated the Master repo: https://github.com/aeroxy/react-typescript-webassembly-starter.git
1. Problem
I am running npm start which is building my react-firebase application, which compiles fine but when I look at my app on localhost I receive this error:
Build Stack Trace
2. What I've Done
I tried to follow suggestions in this Github post.
I noticed that by going to node_modules/#firebase/firestore/dist/index.cjs.js:27457:21 and changing firebase.INTERNAL.registerComponent to firebase.INTERNAL.registerComponent this changed the error to TypeError: instance.registerVersion is not a function which makes me believe that there must be some issue with my version of firebase.
I have tried to revert firebase to version 7.6.0 since there was a recent update made on 01/09/2020 to no avail.
I tried doing all the installing of dependencies in a virtual environment just in case, for some reason, there were some discrepancies between projects
First Error Location:
function configureForFirebase(firebase) {
firebase.INTERNAL.registerComponent(new component.Component('firestore', function (container) {
var app = container.getProvider('app').getImmediate();
return new Firestore(app, container.getProvider('auth-internal'));
}, "PUBLIC" /* PUBLIC */).setServiceProps(shallowCopy(firestoreNamespace)));
}
Second Error location:
function registerFirestore(instance) {
configureForFirebase(instance);
instance.registerVersion(name, version);
}
I have a simple NodeJS file named index.js includes the following lines:
const {Auth0Lock} = require('auth0-lock');
var lock = new Auth0Lock( MyClientId, MyDomain);
lock.show();
I used npm install auth0-lock to install auth0lock and have the proper package.json file. When I run this piece of code by node index.js, I get the following error:
C:\Users\....\node_modules\auth0-lock\lib\utils\url_utils.js:6
var parser = global.document.createElement('a');
^
TypeError: Cannot read property 'createElement' of undefined
Also, when I change const {Auth0Lock} = require('auth0-lock') to const Auth0Lock = require('auth0-lock'), I get the following error:
var lock = new Auth0Lock(
^
TypeError: Auth0Lock is not a constructor
Would you please help me to fix this error and have an auth0lock authentication dialog?
If you are using auth0-lock with NodeJS you need to use a bundler like webpack or browserify.
Please refer to this repo: for setup configuration with webpack.
Alternativel