RangeError: Maximum call stack size exceeded

[epireve]

Hi, I am trying this React library. I make it into a component and the modal loads for a few seconds before it is gone. I noticed in the URL it returns "?" while the modal load.

Upon checking the terminal it says:

RangeError: Maximum call stack size exceeded
    at RegExp.exec (<anonymous>)

What do you think I did incorrectly?

P/S: Don't mind the styling, I did customStyles and has disabled darkMode.

[civan]

Hi @epireve! it might be caused by a recursive call, or circular references, a can you share how is it being implemented? so I can help you troubleshoot?

[epireve]

Hey Civan!

Sure, I just created a new component that has CSVImporter and call <FileImportTool /> in another client component. The following is the component;

\\\ FileUploadTool.tsx
'use clients';
import { useState } from 'react';
import { CSVImporter } from 'csv-import-react';
import Button from '~/core/ui/Button';

function FileImportTool() {
  const template = {
    columns: [
      {
        name: 'First Name',
        key: 'first_name',
        required: true,
        description: 'The first name of the user',
        suggested_mappings: ['first', 'name'],
      },
      {
        name: 'Last Name',
        suggested_mappings: ['last'],
      },
      {
        name: 'Email',
        required: true,
        description: 'The email of the user',
      },
    ],
  };

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open CSV Importer</Button>

      <CSVImporter
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        // darkMode={true}
        onComplete={(data) => console.log(data)}
        template={template}
        customStyles={{
          // 'font-family': 'cursive',
          'font-size': '15px',
          'base-spacing': '2rem',
          'border-radius': '2px',
          'color-primary': 'salmon',
          'color-primary-hover': 'crimson',
          'color-secondary': 'indianRed',
          'color-secondary-hover': 'crimson',
          'color-tertiary': 'indianRed',
          'color-tertiary-hover': 'crimson',
          'color-border': 'lightCoral',
          'color-text': 'brown',
          'color-text-soft': 'rgba(165, 42, 42, .5)',
          'color-text-on-primary': '#fff',
          'color-text-on-secondary': '#ffffff',
          'color-background': 'bisque',
          'color-background-modal': 'blanchedAlmond',
          'color-input-background': 'blanchedAlmond',
          'color-input-background-soft': 'white',
          'color-background-menu-hover': 'bisque',
          'color-importer-link': 'indigo',
          'color-progress-bar': 'darkGreen',
        }}
      />
    </>
  );
}

export default FileImportTool;

This is the component I called in page.tsx:

/// EmissionDataImport.tsx
'use client';
import { Input } from '~/core/ui/input';
import Textarea from '~/core/ui/Textarea';
import { useRouter } from 'next/navigation';
import FileImportTool from './FileUploadTool';

interface DataEntryFormProps {
  source: string; 
  sourceData: any;
}
export const DataFileImport: React.FC<DataEntryFormProps> = ({
  source,
  sourceData,
}) => {
  console.log('sourceData', sourceData);
  const router = useRouter();
  return (
    <div className="max-w-4xl mx-auto my-8">
      <form className="grid grid-cols-2 gap-8">
        <div className="space-y-6">
          <div>
            <h2 className="text-lg font-semibold">
              Bulk Import {sourceData.source_name} data
            </h2>
            <p className="text-sm text-gray-600">General Description</p>
          </div>
          <FileImportTool />
        </div>
      </form>
    </div>
  );
};

RangeError error typically occurs when there's a recursive function that doesn't have a proper base case or termination condition, causing it to call itself indefinitely until the call stack overflows.

I have no idea why this is happening.