Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools

by

Unfortunately this is a fact of life when using the debugger in Babelified code with Chrome. To implement arrow functions with the ECMAScript spec behavior, the this keyword needs to be transformed into a different name, and there’s currently no way to tell Chrome what do to for debugging. Firefox’s developer tools have a bunch of extra logic to address issues like this, so it may work properly if you’re using Firefox and enable to “Map Scopes” checkbox, but it can also be slower because it isn’t trivial.

One option would be to try to use the spec option of the arrow function transformation, which should make this behave better for debugging, but may not work in all cases.

"plugins": [
    ["transform-es2015-arrow-functions", {spec: true}]
]

More Related Contents:

  1. Dynamically import images from a directory using webpack
  2. How to import and export components using React + ES6 + webpack?
  3. How to tell webpack dev server to serve index.html for any route
  4. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  5. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  6. Programmatically navigate using react router V4
  7. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  8. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  9. Differences between creating a new class to using export const
  10. where is create-react-app webpack config and files?
  11. Updating React state when state is an array of objects
  12. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  13. IMAGE: You may need an appropriate loader to handle this file type
  14. React Js require ‘fs’
  15. ReactJS with ES6: this.props is not a function when I communicate two components
  16. Nextjs: Unable to load images from static folder
  17. React: Which is recommended arrow or normal function?
  18. webpack can’t find module if file named jsx
  19. How should I configure create-react-app to serve app from subdirectory?
  20. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  21. Difference between import React and import { Component } syntax [duplicate]
  22. combine react build output into single js file
  23. How to set build .env variables when running create-react-app build script?
  24. How to assign the correct typing to React.cloneElement when giving properties to children?
  25. What is the expected return of `useEffect` used for?
  26. Importing images breaks jest test
  27. Webpack & Typescript image import
  28. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  29. Put A Warning If Page Refresh in ReactJS
  30. Unable to load images from static folder

Leave a Comment