I'm trying to implement AppsFlyer in a react native app but I have this error "Cannot read property 'initSdk' of undefined"
I imported react-native-appsflyer
import React, { Component } from 'react';
import {
Alert,
Platform,
AppRegistry,
NetInfo,
Text,
} from 'react-native';
//...
import appsFlyer from 'react-native-appsflyer';
//...
And tried to call the initSdk method
export default class App extends Component {
initSdk(){
console.log('allo appsflyer');
let options = {
devKey: 'AF_DEV_KEY',
appId: "IOS_APP_ID",
isDebug: true
};
appsFlyer.initSdk(options,
(result) => {
this.setState( { ...this.state, initSdkResponse: result });
console.log(initSdkResponse);
},
(error) => {
console.error(error);
}
)
}
And launched it in my startApp function
startApp(root) {
this.initSdk();
console.log('app store update --> root', root);
switch (root) {
//...
}
}
}
Someone to help me please ?
This error might occur if the native dependencies were not properly linked, this should be resolved if you run react-native link react-native-appsflyer from the project's root (for Android native dependencies) and add relevant Pod dependencies for iOS:
Add the appsFlyerFramework to Podfile and run pod install.
Example:
pod 'react-native-appsflyer',
:path => '../node_modules/react-native-appsflyer'
(assuming your Podfile is located in iOS directory)
Run pod install
If you are not using cocoapods you can follow the manual integration instructions: https://github.com/AppsFlyerSDK/react-native-appsflyer#manual-integration-integrating-without-cocoapods
Related
I try to migrate vue project to vite from vue-cli.
In vue-cli, I used the function to import route.
function loadView(view: string) {
return () => import(/* webpackChunkName: "[index]" */ `#/pages/${view}.vue`);
}
And I changed function to this in vite.
function loadView(view: string) {
return () => import(`#/src/pages/${view}.vue`);
}
And when I run project, it works well but this warning is called.
The above dynamic import cannot be analyzed by Vite.
But I set resolve.alias: [{ find: "#", replacement: "/src" }], in vite.config.js so I don't know why this warning is called.
How can I remove this warning? And How can I set chunkname in vite?
After loading in the laravel-vue-pagination module, I added it to app.js and tried to use it. I was able to import the component and export as props with no issue, but using the element gives me this error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
I also get a Vetur message in my app.js on hover.
Could not find a declaration file for module 'laravel-vue-pagination'. 'e:/Dev/repos/itgg-core/node_modules/laravel-vue-pagination/dist/laravel-vue-pagination.common.js' implicitly has an 'any' type.
Try `npm i --save-dev #types/laravel-vue-pagination` if it exists or add a new declaration (.d.ts) file containing `declare module 'laravel-vue-pagination';`Vetur(7016)
According to this, I added a laravel-vue-pagination.d.ts file at the root of my project:
declare module 'laravel-vue-pagination' { }
This doesn't seem to help in any way though.
app.js :
require('./bootstrap');
// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
const el = document.getElementById('app');
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
InertiaProgress.init({ color: '#4B5563' });
require('chart.js');
require('laravel-vue-pagination');
I assume something is wrong with the require, or loading the module, but I am not sure. Any help is greatly appreciated.
I have some problems with React and Advertisement.
Wanna use 'Coupang' Advertisement, but they support the script library only.
I can add it to 'index.html' in the public directory, but cannot customize the location.
here is the code,
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":23232,"subId":null});
</script>
It's a dynamic advertisement.
How can I add it to the React functional component??
MB this will be helpful.
useScript will help you add script to your code dynamically.
and you custom hook (just create PartnersCoupang);
const usePartnersCoupang = () => {
const const [loaded, error] = useScript('https://ads-partners.coupang.com/g.js');
React.useEffect(() => {
if (loaded) {
new PartnersCoupang.G({"id":23232,"subId":null});
}
}, [loaded]);
React.useEffect(() => {
if (error) {
console.error('PartnersCoupang Failed.');
}
}, [error]);
}
Actually, you should eject from your create-react-app project by this command:
$ yarn eject
or:
$ npm run eject
Then you can see a folder that name is config, in this folder you can see all configuration of your project, especially your Webpack configs, then you should add your external library to the webpack as external key on the configuration of Webpack:
// webpack.config.js
...
module.exports = {
...
externals: {
PartnersCoupang: '[path-to]/g.js',
},
...
};
Then in your component import it easily:
import React, { Component } from 'react';
import PartnersCoupang from 'PartnersCoupang';
class YourComponent extends Component {
componentDidMount() {
new PartnersCoupang.G({"id":23232,"subId":null});
}
}
I have this strange error when I'm running a test on a component that's using vee-validate. What's even weirder is that it doesn't happen when I actually use this.errors in that component (even putting console.log(this.errors) is making it disappear).
Test code:
import { mount } from '#vue/test-utils';
import { renderToString } from '#vue/server-test-utils';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateConfig from '#/vee-validate-config';
Vue.use(VeeValidate, VeeValidateConfig);
import FolderSelect from '#/components/FolderSelect';
describe('FolderSelect', () => {
let propsData, wrapperDeep;
beforeEach(() => {
wrapperDeep = mount(FolderSelect);
});
it('renders select box if option "existing folder" is selected', () => {
// this code is forcing component to use vee-validate:
wrapperDeep.setData({folder: 'existing'});
});
Output from yarn test:unit:
[Vue warn]: Error in directive validate bind hook:
"TypeError: Cannot read property '_transitionClasses' of undefined"
It's coming from node_modules/vue/dist/vue.runtime.common.js, line 1739 and 589.
After I add to tested component:
created () {
console.log(this.errors);
},
The error is gone! Why the error appears otherwise? Is Vue clearing vee-validate if it's not used? (this.errors is an ErrorBag added by vee-validate). Doesn't help if I add {{ errors }} to the template, though.
I'm injecting vee-validate like this:
export default {
inject: ['$validator'],
(...)
I had the same problem try adding {sync: false} after mounting the component
beforeEach(() => {
wrapperDeep = mount(FolderSelect,{sync: false});
});
This worked for me.
We hit this at work with #vue/test-utils#1.0.0-beta.25, and it got resolved by updating to #vue/test-utils#1.0.0-beta.29, without using sync: false.
I'm trying to test a react component.
Foo.jsx
import * as React from 'react';
require('css/foo'); // foo.scss but using resolve in the webpack
...rest of code
Foo.spec.js (this is just a boiler place for test)
import * as React from 'react';
import * as TestUtils from 'react-addons-test-utils';
import Foo from '../src/js/Foo';
function setup() {
const renderer = TestUtils.createRenderer();
renderer.render(<Menu />);
const output = renderer.getRenderOutput();
return {
props: props,
output: output,
renderer: renderer
}
}
describe('Menu Component', () => {
it('should render', () => {
setup();
})
});
tests.js
function noop() {
return null;
}
require.extensions['.scss'] = noop;
When trying to load mocha from CLI
./node_modules/.bin/mocha tests.js ./test/**/*.spec.js
And I'm getting an error
Error: Cannot find module 'css/foo' ...
I tried:
Handle WebPack CSS imports when testing with Mocha
but it doesn't work either.
If I comment that line out, the test is executing.
I've found the solution.
https://github.com/darul75/web-react/blob/master/app/components/TodoSection/TodoItem.js#L13
When I'm running test on the server:
APP_ENV=SERVER ./node_modules/.bin/mocha tests.js ./test/**/*.spec.js
On the client I have to add a plugin to the webpack config:
plugins: [
new webpack.DefinePlugin({
'process.env': {
'APP_ENV': JSON.stringify('BROWSER'),
}
})
]
Assuming you're using Webpack for the test, you can use Sokra (the creator of Webpack)'s null-loader, to make sure that all SCSS requires/imports result in null, and thereby not causing any errors.
{test: /\.scss?$/, loader: 'null'}
https://github.com/webpack/null-loader