TestCafe Invalid destructuring assignment target

Describe the bug We are using TestCafe to do our e2e tests and when we do a simple test we are getting a weird error. We would like to ask for your help on what this could mean. When we compile the app both in development and in production everything works fine but as soon as we try to start testing using testcafe, it doesn’t let us proceed. Any idea what this could be?

To Reproduce Steps to reproduce the behavior:

1. Go to https://github.com/DiogoBatista/react-hook-form-test-cafe
2. Clone it and install it
3. run yarn start

1. run yarn run e2e in a separate terminal

1. See error

Expected behavior It shouldn’t give an error on the react-hook-form library

Screenshots

import React from "react";
import logo from "./logo.svg";
import { useForm } from "react-hook-form";

import "./App.css";

const App = () => {
  const { control } = useForm();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

Desktop (please complete the following information):

• OS: MacOs
• Browser chrome
• Version 80.0.3987.87

Additional context Not sure what could be the error but it seems that the whole import of a hook is a problem. I know that this is could be related with the use of testcafe but your help would be much appreciated 🙏 I created a simple repo with a CRA app and a simple testcafe test to demonstrate what I’m talking about. Thank you for you support and keep up the good work!!

[Kryshtopenko]

Workaround.

1. Install next dependencies to your project: npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env

2. Add { test: /\.(js)$/, exclude: [/node_modules\/(?!(react-hook-form)\/).*/], use: [ { loader: "babel-loader" } ] }, as rule to your webpack.common.ts.

3. Create babel.config.json { "presets": [ [ "@babel/preset-env", { "modules": "commonjs" } ] ], "plugins": [ [ "@babel/plugin-transform-runtime" ] ] }

Enjoy.

[lvwrence]

fyi, i got alerted to similar error on prod on latest chrome (Chrome 80.0.3987)

TypeError
Invalid attempt to spread non-iterable instance

at this line:

const { register, handleSubmit, errors } = useForm()

Also, it seems like user was using google translate on the page, so might be related to https://github.com/react-hook-form/react-hook-form/issues/985?

will try to repro locally.

btw, thanks for the library! it’s super useful.