Issues with iframe-resizer in Next.js: GPLv3 License Warning and "No response from iFrame" Error

Question

I'm building a testimonial feature in my Next.js 14 project where testimonials are embedded using an iframe. My goal is to generate an iframe tag (and potentially the necessary script tags) that, when pasted into the HTML of any website, will allow users to see all the testimonials available on our website. To handle the iframe resizing, I'm using the iframe-resizer library as recommended - text.

I added the iframe-resizer package to my project, and I also included the required GPL V3 license since my project is open-source. You can check the source code here.

However, I'm encountering a couple of issues in the console:

Warning: GPLV3 License Version The console shows a warning about the GPL V3 license: console errors I have already added a LICENSE file to my GitHub repository, so I'm not sure why this is still showing up. This seems to indicate that the iframe is not responding correctly. I'm not sure if the child package isn't loaded correctly or if there's something else causing this issue.

Here is the code I'm using: EmbeddedTestimonials.tsx:

'use client';

import { Testimonial } from '@/interfaces/Testimonial';
import { FaRegStar, FaStar } from 'react-icons/fa';
import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';
import './embed.css';

const IframeResizer = dynamic(() => import('@iframe-resizer/react'), { ssr: false });

interface EmbeddedTestimonialsProps {
  error: string | null;
  testimonials: Testimonial[];
  spaceName: string;
}

export default function EmbeddedTestimonials({ error, testimonials, spaceName }: EmbeddedTestimonialsProps) {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, index) => (
      index < rating ? <FaStar key={index} className="text-yellow-500 inline" /> : <FaRegStar key={index} className="text-yellow-500 inline" />
    ));
  };

  const content = (
    <>
      {error && <p className="error">Error: {error}</p>}
      {testimonials.length === 0 && !error && <p>No testimonials found for this space.</p>}
      <div id="testimonials-container">
        {testimonials.map((testimonial: Testimonial) => (
          <div key={testimonial.id} className="testimonial">
            <div className="testimonial-header">
              <div className="testimonial-avatar">
                {testimonial.userName.charAt(0).toUpperCase()}
              </div>
              <div className="testimonial-author">{testimonial.userName}</div>
            </div>
            <div className="text-yellow-500 mb-2">{renderStars(testimonial.rating)}</div>
            <div className="testimonial-content">{testimonial.textContent}</div>
            <div className="testimonial-date">{testimonial.createdAt}</div>
          </div>
        ))}
      </div>
    </>
  );

  if (!isClient) {
    return content;
  }

  return (
    <IframeResizer
      license='GPLv3'
      checkOrigin={false}
      onResized={(event) => {
        console.log(`Iframe resized to ${event.height}px height and ${event.width}px width`);
      }}
      scrolling={false}
      style={{ width: '1px', minWidth: '100%' }}
    >
      {content}
    </IframeResizer>
  );
}

page.tsx:

import { getTestimonials } from '../../../utils/testimonials';
import { Testimonial } from '@/interfaces/Testimonial';
import EmbeddedTestimonials from './EmbeddedTestimonials';

export const dynamic = 'force-dynamic';

export default async function EmbedPage({ params, searchParams }: { 
  params: { spaceName: string }, 
  searchParams: { theme?: string, initialCount?: string } 
}) {
  const { spaceName } = params;
  const { theme = 'light', initialCount = '20' } = searchParams;
  
  let testimonials: Testimonial[] = [];
  let error = null;

  try {
    testimonials = await getTestimonials(spaceName) as Testimonial[];
    testimonials = testimonials.filter(testimonial => testimonial.isLiked);
  } catch (err) {
    console.error('Error fetching testimonials:', err);
    error = err instanceof Error ? err.message : 'An unknown error occurred';
  }

  const displayCount = Math.min(parseInt(initialCount), testimonials.length);

  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{`Wall of Fame - ${spaceName}`}</title>
      </head>
      <body className={theme === 'light' ? 'light-theme' : 'dark-theme'}>
        <EmbeddedTestimonials 
          error={error}
          testimonials={testimonials.slice(0, displayCount)}
          spaceName={spaceName}
        />
      </body>
    </html>
  );
}

What I've Tried: I followed the official React integration guide from iframe-resizer here. I ensured that the license='GPLv3' is passed as a prop to the IframeResizer component. I've added the @iframe-resizer/child package to the project. Goal: The goal is to generate an iframe tag along with any required script tags so that when this code is embedded into the HTML of an external website, it displays all the testimonials available on our website and dynamically resizes itself to fit the content properly.

Additional Context: The repository is open source and includes the appropriate license file for GPL V3. You can view the code text. Any help in resolving these errors would be greatly appreciated! I'm especially unsure about how to fix the "No response from iFrame" issue.

Answer 1

You can just ignore this message if your project is released under the GPL. It has no effect on how the library runs.