Develop Reference

Is there a way to import a function using Next.js dynamic import? react-component-export-image issues with Next.js ssr

I was getting the 'window is not defined' error when importing react-component-export-image so I used a dynamic import to get around that. I don't get that error anymore but now I get 'exportComponentAsPNG(componentRef) is not a function'. Is there a better way to deal with the 'window is not defined' error or a way to use the function I am importing dynamically? If not, is there a different npm library that works to generate an image from a react component?
import React, { useRef } from 'react'
// import { exportComponentAsPNG } from 'react-component-export-image' *This gave window not defined error so I used dynamic import*
import dynamic from 'next/dynamic'
import ProductCard from '../ProductCard/ProductCard.component'
import Button from '../Button/Button.component'
const { exportComponentAsPNG } = dynamic(
() => import('react-component-export-image'),
{
ssr: false
}
)
const Plaque = () => {
const componentRef = useRef()
// eslint-disable-next-line react/display-name
const ComponentToPrint = React.forwardRef((props, ref) => {
return (
<div ref={ref}>
<ProductCard />
</div>
)
})
return (
<ComponentToPrint ref={componentRef} />
<button onClick={() => exportComponentAsPNG(componentRef)}> // "Error: exportComponentAsPNG is not a function"
Export As PNG
</button>
)
}
export default Plaque

next/dynamic is used to dynamically import React components, not regular JavaScript functions or libraries.
For that, you can use a regular dynamic import on exportComponentAsPNG inside the onClick callback.
<button onClick={async () => {
const { exportComponentAsPNG } = await import('react-component-export-image')
exportComponentAsPNG(componentRef)
}}>

The exportComponentAsPNG function needs access to window which is undefined with server side rendering. I was able to fix the issue by dynamically importing the Plaque component that used exportComponentAsPNG to the page where it is called with sever side rendering set to 'false'.
import dynamic from 'next/dynamic'
const Plaque = dynamic(() => import('../compnonents/Plaque'), {
ssr: false
})
const Page = () => {
return <Plaque />
}
export default Page
Now that the component is no longer using SSR I was able to import and use the function normally.
import { exportComponentAsPNG } from 'react-component-export-image'
Here you can find the documentation for the library: https://www.npmjs.com/package/react-component-export-image

convert Vue3 Typescript to Vue3 Javascript

Hi i could you please help me to convert this into javascript in Vue3 thank you
import type { App } from 'vue'
import Screenfull from './Screenfull.vue'
const components = [
Screenfull,
]
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
}
export default install

Your plugin loops through a bunch of components and registers them globally, using the name property of the component. So make sure each component registered this way has a name property:
Dashboard.vue
<template>
<div>My component</div>
</template>
export default {
name: 'Dashboard' // ✅ Add this
}
Remove the typing from the install function:
const install = (app) => {
components.forEach(component => {
app.component(component.name, component)
})
}
Remove this line:
import type { App } from 'vue'

Import a javascript file in Vue compoment

I'm building a project using Laravel and vue js and I needed to import a js package name ( photojshop ) ", which enable to edit an image filter or color " in my vue component.
I tried this way :
<template>
<img src=".." id="myImg" >
</templete>
<script>
import $ from 'jquery'
export default {enter code here
data: () => ({
......data of your component
}),
mounted() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'my local js file')
document.head.appendChild(recaptchaScript)
},
methods: {
EditImage(){
$('myImg').photoJshop({ .... }) (error)
}
}
}
</script>
but when I call the function $('..').photoJshop({}) an error occur function is not defined (photoJshop)

My problem is solved i just needed to write my code in
this.$nextTick(function () {
....
})
so that

Adyen's Checkout SDK integration in react app

I have a react app and I want to set up adyen (payment processing API) in that. I want to use the checkout SDK (https://docs.adyen.com/developers/checkout/web-sdk )as its very simple,
I have moved the js logic to componentDidMount, but having problem loading the sdk,
<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js"></script>
So I can use the below function from SDK:
chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
I have tried using react-script-tag, in my React component:
render() {
return (
<div className='checkout-warpper'>
<ScriptTag type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.9.2.min.js" />
<div className="checkout" id="adyen-checkout">
{/* The checkout interface will be rendered here */}
</div>
</div>
);
}
but still get the error:
Uncaught ReferenceError: chckt is not defined.

Try window.chckt.hooks.beforeComplete = ... chckt is a global scope variable.
The easiest way to load external script is by using react-async-script-loader
import React from 'react';
import scriptLoader from 'react-async-script-loader'
class CheckoutSDK extends React.Component {
componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
if (isScriptLoadSucceed) {
window.chckt.hooks.beforeComplete = function(node, paymentData) {
return false; // Indicates that you want to replace the default handling.
};
}
}
}
render() {
return null
}
}
export default scriptLoader('https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSDK.1.6.3.min.js',)(CheckoutSDK)

you can try using import ScriptLoader from 'react-script-loader-hoc'; and you can find on window.chckt.

How to add external javascript file with reactjs

I have an external JS file script.js
(function($) {
// Mega Menu
$('.toggle-icon').on('click', function() {
if ($(this).hasClass("active")) {
$(this).removeClass('active');
$(this).next().slideUp();
} else {
$(this).find('.toggle-icon').removeClass('active');
$(this).find('ul').slideUp();
$(this).addClass('active').next().slideDown();
}
});
// End Mega Menu
});
i want to add this file in my React-Redux App
Can anyone please help me to solve this mystery

Export your js code and then import it in your react component.
export function toggleIcon() {
$('.toggle-icon').on('click', function() {
if ($(this).hasClass("active")) {
$(this).removeClass('active');
$(this).next().slideUp();
} else {
$(this).find('.toggle-icon').removeClass('active');
$(this).find('ul').slideUp();
$(this).addClass('active').next().slideDown();
}
});
}
Then you can import it in your react component.
// custom is the path to the file that holds your js code
import { toggleIcon } from './custom';
Then call it in your react component, for example in a react lifecycle method like componentDidMount.
componentDidMount() {
toggleIcon();
}
Another (faster) way is by using require in your react component to load in the js code.
require('./custom');
That way you load the js code immediately, and you don't need to make an exportable version of your function, it just requires the file.

You need export your file and then import it in your React-app, it's recommended to include these kinds of logics in your React app, but if you really needed, export your function and import in the React Component which you need it, you can name you function as well, something like the below code:
export function toggleIcon () {
$('.toggle-icon').on('click', function() {
if ($(this).hasClass("active")) {
$(this).removeClass('active');
$(this).next().slideUp();
} else {
$(this).find('.toggle-icon').removeClass('active');
$(this).find('ul').slideUp();
$(this).addClass('active').next().slideDown();
}
}
and import it:
import {toggleIcon} from 'custom';
toggleIcon(); // call your external function like this

Try to put ToogleIcon instead of toogleIcon in the component where you want instance it.
import {ToggleIcon} from 'custom';
ToggleIcon(); // call your external function like this
and export defaultinstead of export
export default function toggleIcon () {
$('.toggle-icon').on('click', function() {
if ($(this).hasClass("active")) {
$(this).removeClass('active');
$(this).next().slideUp();
} else {
$(this).find('.toggle-icon').removeClass('active');
$(this).find('ul').slideUp();
$(this).addClass('active').next().slideDown();
}
}