I'm getting this error
TypeError: window.OneSignal.push is not a function
in the latest SDK and Cordova plugin. But when I downgraded the onesignal-cordova-plugin to 2.11.3 I get a plugin_not_installed error.
import React from "react";
import { OneSignal } from "#awesome-cordova-plugins/onesignal";
React.useEffect(()=> {
OneSignalInit();
}, [])
const OneSignalInit = async () => {
OneSignal.startInit(import.meta.env.VITE_ONESIGNAL_APPID, import.meta.env.VITE_GOOGLE_PROJECT_ID); // Error: TypeError: window.OneSignal.push is not a function
};
Package JSON:
Related
I would like to know how to mock this kind of dependency's error. If I omit this import and comment out related source code, the test process is going to be fine. Already have got through Mock Function Jest, but no idea what I should do.
*This project was created by CRA with template typescript.
App component.
import { useAuthenticator } from '#aws-amplify/ui-react';
const App = () => {
const { user } = useAuthenticator((context) => [context.user]);
return (
<div>{user?.username}</div>
);
};
export default App;
Test code here.
import App from 'src/App';
import { render, screen } from '#testing-library/react';
describe('First group',()=>{
test('rendering App component',()=>{
// App includes 'import { useAuthenticator } from '#aws-amplify/ui-react';'
render(<App/>)
screen.debug()
})
})
Error outputs here.
● Test suite failed to run
TypeError: window.URL.createObjectURL is not a function
> 1 | import { useAuthenticator } from '#aws-amplify/ui-react';
| ^
2 |
3 | const App = () => {
4 | const { user } = useAuthenticator((context) => [context.user]);
at define (node_modules/maplibre-gl/dist/maplibre-gl.js:25:43)
at node_modules/maplibre-gl/dist/maplibre-gl.js:35:1
at node_modules/maplibre-gl/dist/maplibre-gl.js:3:81
at Object.<anonymous> (node_modules/maplibre-gl/dist/maplibre-gl.js:6:2)
at Object.<anonymous> (node_modules/#aws-amplify/ui-react/dist/index.js:1:484)
at Object.<anonymous> (src/App.tsx:1:1)
Based on slideshowp2's answer, added setup and config file. But still hits the error. Both are located rootDir.
jest.setup.js
if (typeof window.URL.createObjectURL === 'undefined') {
window.URL.createObjectURL = jest.fn();
}
jest.config.js
module.exports = {
setupFilesAfterEnv: ['./jest.setup.js'],
};
UPDATE
This PJ was created by CRA so it required to follow their rule. I finally resolved this by slideshowp2's answer and the correct location to put the pollyfilling code.
src/setupTests.ts
if (typeof window.URL.createObjectURL === 'undefined') {
window.URL.createObjectURL = jest.fn();
}
See troubleshooting#jest
As of v2.15.0 of #aws-amplify/ui-react which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:
window.URL.createObjectURL is not a function
Please follow the steps below to resolve this issue.
Navigate to or create a Jest setup file for your project.
Add the following code to polyfill the unrecognized function in your Jest setup file:
jest.setup.js:
if (typeof window.URL.createObjectURL === 'undefined') {
window.URL.createObjectURL = jest.fn();
}
jest.config.js:
module.exports = {
//...
setupFilesAfterEnv: ['./jest.setup.js'],
//...
}
This is a known problem when using the jsdom library (a dependency of Jest) with a package that uses an unrecognized function. See this issue.
I'm using React [^17.0.1] and arcgis-js-api [^4.18.1] for the app,
After 'npm start' I'm receiving the below errors,
The console errors are below,
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor
index.js:1 [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor
[esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor
workerFactory.js:5 Uncaught (in promise) TypeError: e is not a function
Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null
The SalesChartCard.js
import React, { useRef, useEffect } from 'react';
import { Card, CardBody, CardTitle } from 'reactstrap';
import ArcGISMap from '#arcgis/core/Map';
import MapView from '#arcgis/core/views/MapView';
import esriConfig from '#arcgis/core/config';
import '../../assets/css/map.css';
const SalesChartCard = () => {
esriConfig.assetsPath = '/assets';
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
/**
* Initialize application
*/
const map = new ArcGISMap({
basemap: 'gray-vector',
});
/* eslint-disable no-unused-vars */
const view = new MapView({
map,
container: mapDiv.current,
extent: {
spatialReference: {
wkid: 102100,
},
xmax: -13581772,
xmin: -13584170,
ymax: 4436367,
ymin: 4435053,
},
});
/* eslint-enable no-unused-vars */
}
}, []);
return (
<Card>
<CardBody>
<CardTitle>Map</CardTitle>
<div className="mapDiv" ref={mapDiv} />
</CardBody>
</Card>
);
};
export default SalesChartCard;
I followed below links for development,
jsapi-resources
build with ES modules
Link
Still I'm getting same console errors.
Kindly look into updated Git-repo and suggest solution.
Clone the repo and run the app then navigate to the url
http://localhost:3000/app/dashboards/default
then the application breaks and starts to give errors.
Try upgrading to 4.19. What you are seeing looks like a configuration issue that was changed at 4.19.
This is expo ReactNative App. Able to build and run the app using
expo start
However, InteliJ Flags this file as having an error and all this file has is the above referenced code
import { ButtonActionTypes } from "../types/ButtonTypes";
import { Action } from "redux";
export const incrementCount = (): Action<string> => {
return {
type: ButtonActionTypes.Increment
}
};
How do I get rid of this error so the project in InteliJ looks clean?
I am new to ReactJS.
Seem to be having trouble integrating web3 from Metamask in React.
Metamask version: web3#1.0.0-beta.34
import Web3 from 'web3'
let web3;
window.addEventListener('load', function () {
if (typeof window.web3 !== 'undefined') {
web3 = new Web3(window.web3.currentProvider);
} else {
// No web 3 provider
console.log("Please install Metamask");
}
});
export default web3;
Getting the following error:
window is not defined
ReferenceError: window is not defined
at Object../lib/getWeb3.js (lib/getWeb3.js:5:0)
window is not defined on Server, only in client's browser, hence you can't use MetaMask server-side. However, you can connect to INFURA when you want to use web3 in your React component server-side or without MetaMask support.
The simplest way is to use react-web3-provider component.
Add the Web3Provider to your root React component:
import Web3Provider from 'react-web3-provider';
ReactDOM.render(
<Web3Provider
defaultWeb3Provider="https://mainnet.infura.io/YOUR_API_KEY"
loading="Loading..."
>
<App />
</Web3Provider>
)
Then in component where you want to use Web3:
import { withWeb3 } from 'react-web3-provider';
class MyComponent {
render() {
const { web3 } = this.props;
web3.eth.getAccounts(console.log);
// Version 1.0.0-beta.35
return "Web3 version: {web3.version}";
}
}
export default withWeb3(MyComponent);
I am trying to use angular upgrade path to use angular1 and angular2 using webpack loader. When I take angular1 and just load angular2 it all works fine and the reason is upgrade static file error which is mentioned below
my angular bootstrap file is as following:
import 'angular2-universal-polyfills/browser';
import { enableProdMode } from '#angular/core';
import { platformUniversalDynamic } from 'angular2-universal';
import { AppModule } from './app/app.module';
import 'bootstrap';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { UpgradeModule } from '#angular/upgrade/static';
// Enable either Hot Module Reloading or production mode
if (module['hot']) {
module['hot'].accept();
module['hot'].dispose(() => { platform.destroy(); });
} else {
enableProdMode();
}
// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => {
//platform.bootstrapModule(AppModule);
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.info("Angular 2 bootstrapping");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ["app"], { strictDi: true });
});
};
if (document.readyState === 'complete') {
bootApplication();
} else {
document.addEventListener('DOMContentLoaded', bootApplication);
}
And the error I am getting is below
Error in ./~/#angular/upgrade/static.js
Module parse failed: C:\TFS\PostAnything\Postanything.Web.Client\node_modules\#angular\upgrade\static.js Line 8: Unexpected token
You may need an appropriate loader to handle this file type.
| * found in the LICENSE file at https://angular.io/license
| */
| export { downgradeComponent } from './src/aot/downgrade_component';
| export { downgradeInjectable } from './src/aot/downgrade_injectable';
| export { UpgradeComponent } from './src/aot/upgrade_component';
# ./ClientApp/boot-client.ts 9:15-49
I have resolved this issue finally by taking guidance from other GitHub repo and created my own to have Angular1 and Angular hybrid app with Webpack.
Click here for Github repo link