Contact form 7 error

manuwweb · 13 June 2021 19:57

I have seen several people complain about this contact form 7 error, but no one seems to give a solution.

TypeError: Cannot assign to read only property 'name' of function 'props=>{// Dummy setState to update the component.
const[,setState]=Object(react__WEBPACK_IMPORTED_MODULE_1__["...<omitted>...}}'
    at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:71)
    at Array.forEach (<anonymous>)
    at connect (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:40)
    at eval (webpack-internal:///./node_modules/frontity-contact-form-7/src/processors/cf7HiddenInputs.js:5:568)
    at Module../node_modules/frontity-contact-form-7/src/processors/cf7HiddenInputs.js (C:\Users\Mannu\OneDrive\Escritorio\Programación\manuwweb\build\server.js:2874:1)
    at __webpack_require__ (C:\Users\Mannu\OneDrive\Escritorio\Programación\manuwweb\build\server.js:27:30)
    at eval (webpack-internal:///./node_modules/frontity-contact-form-7/src/index.js:9:85)
    at Module../node_modules/frontity-contact-form-7/src/index.js (C:\Users\Mannu\OneDrive\Escritorio\Programación\manuwweb\build\server.js:2850:1)
    at __webpack_require__ (C:\Users\Mannu\OneDrive\Escritorio\Programación\manuwweb\build\server.js:27:30)
    at eval (webpack-internal:///./build/bundling/entry-points/server.ts:7:91)

Does anyone know how to fix it?

Thanks you.

Johan · 13 June 2021 20:22

Usually that error means you use a field type in CF7 which is not supported by the package (like file upload).

But a bit more information about your project would help to narrow down the issue.

manuwweb · 13 June 2021 21:00

What part of the code do you need to see?

I have this component to render the form:

import { connect } from 'frontity';
import StyleContact from './StyleContact';

const Contact = ({ state, libraries }) => {
    const data = state.source.get(state.router.link);
    const post = state.source[data.type][data.id];
    const Html2react = libraries.html2react.Component;

    return (
        <section className="contact">
            <StyleContact />
            <Html2react html={post.content.rendered} />
        </section>
    );
}
 
export default connect(Contact);

kasper · 14 June 2021 06:25

Hi,

This error is because the old cf7 package uses connect() in the wrong places. Switch it out with this package instead:

manuwweb · 14 June 2021 07:27

Thanks!

It seems that this package does not give an error, but now I have another problem and it is that I cannot fill in the fields of the form.

You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Thanks for the help.

kasper · 14 June 2021 07:28

Hi @manuwweb

The cf7 package only supports input and text area for now.

manuwweb · 14 June 2021 07:46

Ok, it seems like it suddenly works.

Thank you very much for your help.

kcristin · 21 June 2021 21:30

Hey @kasper! Been trying to figure solve issues with frontity’s cf7 for over a week now. Tried using your plugin and now instead of the TypeError seen above I’m getting this one.

TypeError: Cannot assign to read only property 'name' of function 'props=>{// Dummy setState to update the component.
const[,setState]=Object(react__WEBPACK_IMPORTED_MODULE_1__["...<omitted>...}}'
    at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:71)
    at Array.forEach (<anonymous>)
    at connect (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:40)
    at eval (webpack-internal:///./packages/hcbf-frontity-theme/src/processors/contactForm.tsx:4:5406)
    at Module../packages/hcbf-frontity-theme/src/processors/contactForm.tsx (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:38108:1)
    at __webpack_require__ (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/hcbf-frontity-theme/src/index.js:14:81)
    at Module../packages/hcbf-frontity-theme/src/index.js (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:38072:1)
    at __webpack_require__ (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:27:30)
    at eval (webpack-internal:///./build/bundling/entry-points/server.ts:3:87)

Any help with this would be much appreciated

kasper · 21 June 2021 22:24

Hi @kcristin !

Do you have a repo I can see?

kcristin · 21 June 2021 23:04

Thanks for getting back so quickly! You can find my repo here: https://github.com/hcbf/hcbf

kasper · 22 June 2021 07:40

It appears that the error has something to do with this processor:

github.com

hcbf/hcbf/blob/main/packages/hcbf-frontity-theme/src/processors/contactForm.tsx

import { css } from "frontity";

const contactForm = {
  name: 'contact form',
  priority: 10,
  test: ({ component, props }) => component === "div" && /wp-block-contact-form-7-contact-form-selector/.test(props.className),
  processor: ({ node }) => {

    node.props.css = css`
      position: absolute;
      top: 125px;

      form {
        padding-left: calc(${224 / 1440} * 100vw);

        p {
          display: inline;
          width: ${100 / 3}%;
          font-family: Poppins;
          font-style: normal;

This file has been truncated. show original

And not the package. So if you could remove that for now, and test again to see if it works.

kcristin · 22 June 2021 18:57

Hmm strange that processor is really only there to add styling to the form. Removing it seems to leave me with this error:

TypeError: Cannot assign to read only property 'name' of function 'props=>{// Dummy setState to update the component.
const[,setState]=Object(react__WEBPACK_IMPORTED_MODULE_1__["...<omitted>...}}'
    at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:71)
    at Array.forEach (<anonymous>)
    at connect (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:91:40)
    at eval (webpack-internal:///./packages/hcbf-frontity-theme/src/index.js:39:1713)
    at Module../packages/hcbf-frontity-theme/src/index.js (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:38072:1)
    at __webpack_require__ (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:27:30)
    at eval (webpack-internal:///./build/bundling/entry-points/server.ts:3:87)
    at Module../build/bundling/entry-points/server.ts (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:139:1)
    at __webpack_require__ (/Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:27:30)
    at /Users/kcristin/Local Sites/HCBF/hcbf-frontity/build/server.js:104:18

It’s the same but without the contactForm portion. Could it be an error with build/server.js?

kasper · 23 June 2021 07:46

Hi.

Try to remove connect from here:

github.com

hcbf/hcbf/blob/f97ced54584e7dfbccd69093bf8a5fb1fd5e526f/packages/hcbf-frontity-theme/src/index.js#L128

    
      
              },
              source: {
                handlers: [
                  menuHandler,
                  acfHandler,
                ],
              },
            },
          };
          
          
export default connect ( Theme );

So just export default Theme

kasper · 24 June 2021 06:25

Hi @kcristin,

Did that solve it?

kcristin · 25 June 2021 00:35

Hey @kasper! I apologize I didn’t get back to you sooner, didn’t get around to working on this project yesterday. I’m super happy to say that removing connect from index.js worked! You’re such a life saver thank you !

I used your tutorial for deploying a Frontity site to Vercel through Github and had run into that pesky 500 error. Decided to double back and try seeing if my site still worked locally which (to my dismay it did not) and lead me to this. I’m happy to say that removing connect from index also removed that 500 error from my Vercel deployment. Strange, because I swear I followed Frontity’s tutorial to the tee, but maybe I just added it in as default by mistake. I really can’t thank you enough man! This Vercel issue has been with me for quite some time and I’m relieved that it’s been solved.

kasper · 25 June 2021 07:10

Hi @kcristin!

Great to hear that it solved the problems, and thank you for the kind words! Was the guide easy to follow?

kcristin · 6 July 2021 05:44

Sorry, hadn’t realized you’d replied! Yes, the tutorial was great! Yours seemed to be the only one out there with that followed that flow frontity > github > vercel. And it was very informative! Keep up the great work