tjtanjin / react-chatbotify

A modern React library for creating a flexible and extensible chatbot.
https://react-chatbotify.tjtanjin.com/
MIT License
103 stars 49 forks source link

[Bug] Just a bug from wordpress with great React chatbotify #75

Closed Vince-ALIEN closed 2 weeks ago

Vince-ALIEN commented 2 weeks ago

index.js:7776 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getCurrentStack') at Ma (index.js:7776:1) at index.js:7914:1 at F (index.js:4430:1) at gu (index.js:7913:1) at c (index.js:7956:1) at Object.y [as renderToString] (index.js:7963:1) at zs (index.js:11579:1) at Array.map () at Qu (index.js:11561:1) at index.js:11731:1

Have you an idea please....

tjtanjin commented 2 weeks ago

Hey @Vince-ALIEN! Could you share more information about your project (e.g. versions, what you've tried so far etc)?

Vince-ALIEN commented 2 weeks ago

Yes of course sorry..

I use the Basic form for beguin.

This is my package.json: "devDependencies": { "@wordpress/components": "^25.11.0", "@wordpress/scripts": "^27.9.0" }, "dependencies": { "react": "^18.2.0", "react-chatbotify": "^1.7.0", "react-dom": "^18.2.0"

Then the error arrive at step : ask_pet: { message: "Do you own any pets?", options: ["Yes", "No"], function: ({ userInput }) => { console.log('Ask pet step:', userInput); updateForm('pet_ownership', userInput); }, path: "ask_choice",

and perhaps it's that ? : end: { message: "Thank you for your interest, we will get back to you shortly!", render: () => (

First Name: {form.firstName || 'N/A'}

Last Name: {form.lastName || 'N/A'}

Email: {form.email || 'N/A'}

Age: {form.age || 'N/A'}

Pet Ownership: {form.pet_ownership || 'N/A'}

Pet Choices: {form.pet_choices ? form.pet_choices.join(', ') : 'N/A'}

Num Work Days: {form.num_work_days || 'N/A'}

  ),

I had in app.js : const sendFormData = async (formData) => { if (!formData || Object.keys(formData).length === 0) { console.error('No form data to send'); return; }

try {
  const response = await fetch(wpuiSamplePlugin.ajaxurl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      action: 'wsp_send_form_data',
      form_data: JSON.stringify(formData),
      nonce: wpuiSamplePlugin.nonce
    }),
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  if (data.success) {
    console.log('Form data sent successfully');
  } else {
    console.error('Failed to send form data:', data.data);
  }
} catch (error) {
  console.error('Error sending form data:', error);
}

};

tjtanjin commented 2 weeks ago

Yes of course sorry..

I use the Basic form for beguin.

This is my package.json: "devDependencies": { "@wordpress/components": "^25.11.0", "@wordpress/scripts": "^27.9.0" }, "dependencies": { "react": "^18.2.0", "react-chatbotify": "^1.7.0", "react-dom": "^18.2.0"

Then the error arrive at step : ask_pet: { message: "Do you own any pets?", options: ["Yes", "No"], function: ({ userInput }) => { console.log('Ask pet step:', userInput); updateForm('pet_ownership', userInput); }, path: "ask_choice",

and perhaps it's that ? : end: { message: "Thank you for your interest, we will get back to you shortly!", render: () => (

First Name: {form.firstName || 'N/A'}

Last Name: {form.lastName || 'N/A'}

Email: {form.email || 'N/A'}

Age: {form.age || 'N/A'}

Pet Ownership: {form.pet_ownership || 'N/A'}

Pet Choices: {form.pet_choices ? form.pet_choices.join(', ') : 'N/A'}

Num Work Days: {form.num_work_days || 'N/A'}

), I had in app.js : const sendFormData = async (formData) => { if (!formData || Object.keys(formData).length === 0) { console.error('No form data to send'); return; }

try {
  const response = await fetch(wpuiSamplePlugin.ajaxurl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      action: 'wsp_send_form_data',
      form_data: JSON.stringify(formData),
      nonce: wpuiSamplePlugin.nonce
    }),
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data = await response.json();
  if (data.success) {
    console.log('Form data sent successfully');
  } else {
    console.error('Failed to send form data:', data.data);
  }
} catch (error) {
  console.error('Error sending form data:', error);
}

};

It's a little hard to read the text formatting above 😥

Is your project public on GitHub? It would also help if you could narrow down to the exact step where the error happens, thanks!

Vince-ALIEN commented 2 weeks ago

It's done, I think you're going to scream...

https://github.com/Vince-ALIEN/wp-chatbotify

tjtanjin commented 2 weeks ago

It's done, I think you're going to scream...

https://github.com/Vince-ALIEN/wp-chatbotify

Ahhh do you mean you got it to work? :D

Vince-ALIEN commented 2 weeks ago

It work as i expect, but I think it's horrible code...

Vince-ALIEN commented 2 weeks ago

What i do... My code.. is horrible.

tjtanjin commented 2 weeks ago

What i do... My code.. is horrible.

Don't give up!

On a side note: Closing this bug report since your issue is resolved. You can feel free to chat on discord or seek more clarifications there as well 😄

Vince-ALIEN commented 2 weeks ago

I dont know how i do it at all.. I just remove the footer and the chatHistory...

tjtanjin commented 2 weeks ago

I dont know how i do it at all.. I just remove the footer and the chatHistory...

If you can describe what you're trying to do I can possibly provide some guidance - though this would be better done on discord than on a GitHub issue 😅