When using Hooks, Unhandled Rejection (TypeError): Cannot read property 'match' of undefined

[libersolis-dev]

Concurrent Mode: False

package.json(freshly created create-react-app)

  "name": "sagas",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1",
    "reactime": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

First off, awesome tool.

Using reactime with a new create-react-app and hooks produces the following dismissible error.

This error displays immediately, but does not break the app.

After dismissing the error the following displays in devtools.

Uncaught (in promise) TypeError: Cannot read property 'match' of undefined
    at 0.chunk.js:43501
    at Array.forEach (<anonymous>)
    at 0.chunk.js:43500
    at Array.forEach (<anonymous>)
    at push../node_modules/reactime/astParser.js.module.exports (0.chunk.js:43488)
    at createTree (0.chunk.js:43705)
    at createTree (0.chunk.js:43716)
    at updateSnapShotTree (0.chunk.js:43736)
    at 0.chunk.js:43754
    at Module../src/index.js (main.chunk.js:164)
    at __webpack_require__ (bundle.js:786)
    at fn (bundle.js:151)
    at Object.1 (main.chunk.js:177)
    at __webpack_require__ (bundle.js:786)
    at checkDeferredModules (bundle.js:46)
    at Array.webpackJsonpCallback [as push] (bundle.js:33)
    at main.chunk.js:1

React time does not find the app and no debugging is available.

This only seems to be happening with hooks.

The error is thrown as soon as useState is called to set the initial value.

Refactoring the counter to a class based component resolves the issue and reactime works as expected.

See code below.

https://github.com/mannyhagman/hooks-counter/blob/master/src

[libersolis-dev]

Ok I've done some more debugging and name is not a prop on hook.id, at least not during this time through the loop. There is another array called elements that does have a name property and it looks like that is where the names of the hook state/setter can be accessed.

hook.id.name is undefined and being pushed into the statements array and failing at line 37.

[chriswillsflannery]

Will look into this - Manny, any chance I could clone the repo you're working on?

[rocky9413]

Will look into this - Manny, any chance I could clone the repo you're working on?
Chris, this is one simple counter app with functional component instead of class component (with count and setCount useState)
https://github.com/mannyhagman/hooks-counter/blob/master/src
I think it has something to do with the latest create react act and the webpack

[libersolis-dev]

Thanks for the quick response. Yes please feel free to clone.

[mlizchap]

Couldn't this be solved by adding a null check? -> if (el && el.match(/_use/))