We Keep Coding

laravel-vue-pagination module not loading in app

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.

How to construct js object in React

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});
}
}

mochapack Cannot assign to read only property 'exports' of object

I would like to create a vuejs unit test for components.
I follow this official tutorial vuejs : Vuejs component unit test
I have created those file :
setup.js (main script for all test) :
require('jsdom-global')()
global.expect = require('expect')
// import jsdomGlobal from 'jsdom-global'
// export const jsdonGlobal = require('jsdom-global')
home.spec.js (unit test component file) :
import Vue from 'vue'
import { shallowMount } from '#vue/test-utils'
import Home from '../../src/page/Home.vue'
// import Home from '#/components/Home'
describe('Home.vue', () => {
it('test the test', async () => {
const wrapper = shallowMount(Home)
let divContainer = wrapper.find('div.container')
expect(divContainer.children()).to.have.length(12)
})
})
my babel.config.js :
module.exports = {
presets: [
'#vue/app',
'#babel/preset-env'
],
}
and this my 'npm run test' command :
"mochapack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
All of this generate a 'Cannot assign to read only property 'exports' of object '#' error
others informations :
if a comment all line into setup.js and Home.spec.js file the behavior is identic (very strange behavior which difficult to understand where is the error)
I already try this preset Babel ('#babel/preset-env') for transpiling
I don't have a export instruction into my setup.js file and Home.spec.js file
Can you help me to understand why I have to error and how I can resolve this ?
The all others questions don't help me to resolve this because I don't have export instruction into my test code...

Cannot read property 'initSdk' of undefined - Appsflyer integration React Native

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

Cannot import SCSS file while running mocha test on isomorphic app

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