Nextjs config for JSX file type-CodePudding

The

// @components/Widget import * as React from "react"; import { useEffect } from "react"; export default function Widget(props) { function loadViralLoops() { const SCRIPT_SRC = "https://app.viral-loops.com/widgetsV2/core/loader.js"; const scriptExists = document.head.querySelector( `script[src="${SCRIPT_SRC}"]` ); if (scriptExists) { return Promise.resolve(); } return new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = SCRIPT_SRC; script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); } useEffect(() => { loadViralLoops().then(() => { const ViralLoops = globalThis["ViralLoops"]; console.debug("[VL] -> load ViralLoops script", ViralLoops); }); }, []); useEffect(() => { console.debug("[VL] -> set props.ucid", props.ucid); }, ["[VL] -> set props.ucid", props.ucid]); return ( <> {props.ucid ? ( <form-widget ucid={props.ucid} popup={props.popup} /> ) : null} </> ); } Widget.defaultProps = {};

CodePudding user response：

Try Creating a file .babelrc at the project level, and add this config and install added deps,

{ "presets": ["next/babel", "@babel/preset-react"], "plugins": ["@babel/plugin-transform-react-jsx"] }

CodePudding user response：

I have done the following to make the viral-loop widget to work in Next.js.

To Integrate ViralLoop with Next.js application install the below package

yarn add @viral-loops/widgets

Install babel/preset-react

Yarn add @babel/preset-react --save-dev

Once the installation is complete go to Next.config.js and add the following snippet to transpile JSX

{ test: /\.(js|jsx)$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'], }, }, },

Once the above steps are done the unexpected token issue was fixed but to import the widget i have to use the dynamic import like below

import dynamic from 'next/dynamic'; const ViralLoopsWidget: any = dynamic(() => import('@viral-loops/widgets/dist/react').then((mod) => mod.ViralLoopsWidget), {ssr: false});

If the dynamic import is not needed then we can use the same inside an useEffect which will be called only on the client side render not on server side render

useEffect(() => { const viralLoopInit = async () => { const viralLoop = await import('@viral-loops/widgets/dist/react'); console.log('viralLoop is', viralLoop); console.log('viralLoop1 is', await viralLoop.getCampaign()); } viralLoopInit(); }, []);