Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RangeError: Maximum call stack size exceeded #209

Open
epireve opened this issue Feb 3, 2024 · 2 comments
Open

RangeError: Maximum call stack size exceeded #209

epireve opened this issue Feb 3, 2024 · 2 comments

Comments

@epireve
Copy link

epireve commented Feb 3, 2024

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.

2024-02-04 03 06 54

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
Copy link
Collaborator

civan commented Feb 6, 2024

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
Copy link
Author

epireve commented Feb 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants