electron-react-boilerplate: Debugger not working in latest version

I cloned the latest version of this repo and added a debugger inside a React render function like this:

export default class Home extends Component {
  render() {
    console.log('NODE_ENV', process.env.NODE_ENV)
    debugger
    return (
      <div>
        <div className={styles.container}>
          <h2>Home</h2>
          <Link to="/counter">to Counter</Link>
        </div>
      </div>
    );
  }
}

The app didn’t start and I got this error in the terminal after running npm run dev:

[0] webpack: bundle is now VALID.
[1] [10869:0907/084912:ERROR:CONSOLE(1531)] "TypeError: Cannot read property 'requestContent' of undefined TypeError: Cannot read property 'requestContent' of undefined
[1]     at Object.requestFileContent (chrome-devtools://devtools/bundled/inspector.js:8311:80)
[1]     at Object.requestContent (chrome-devtools://devtools/bundled/inspector.js:7599:209)
[1]     at Object.workingCopy [as _lazyContent] (chrome-devtools://devtools/bundled/sources_module.js:265:73)
[1]     at Object._ensureContentLoaded (chrome-devtools://devtools/bundled/source_frame_module.js:1883:63)
[1]     at Object.wasShown (chrome-devtools://devtools/bundled/source_frame_module.js:1876:7)
[1]     at Object.wasShown (chrome-devtools://devtools/bundled/sources_module.js:268:46)
[1]     at Object.wasShown (chrome-devtools://devtools/bundled/sources_module.js:594:52)
[1]     at Object._notify (chrome-devtools://devtools/bundled/inspector.js:1608:45)
[1]     at Object._processWasShown (chrome-devtools://devtools/bundled/inspector.js:1601:43)
[1]     at Object.show (chrome-devtools://devtools/bundled/inspector.js:1622:6)", source: chrome-devtools://devtools/bundled/inspector.js (1531)

The debugger throws an error anywhere, not just inside a render function.

I’ve tried Node 6.5, 6.3, 5.10, 4.2.2 all with the same result. Just to make sure React didn’t change something, I used https://github.com/facebookincubator/create-react-app to generate a new react app and I can use debugger statements as usual.

I saw a commit (and later removal) about removing debugger and console statements in production. That console.log statement says we are in development when it throws.

For my sanity, I went back to an older project based on this repo (electron-react-boilerplate) and tested it with a debugger statement and it worked fine. The relevant config in package.json from that older version is this:

  "scripts": {
    "test": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --recursive --require ./test/setup.js test/**/*.spec.js",
    "test-watch": "npm test -- --watch",
    "test-e2e": "cross-env NODE_ENV=test mocha --compilers js:babel-core/register --require ./test/setup.js --require co-mocha ./test/e2e.js",
    "lint": "eslint app test *.js",
    "hot-server": "node server.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js --progress --profile --colors",
    "start": "cross-env NODE_ENV=production electron ./",
    "hot-client": "cross-env HOT=1 NODE_ENV=development electron ./",
    "package": "cross-env NODE_ENV=production node package.js",
    "package-all": "npm run package -- --all",
    "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
    "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run hot-client\""
  },
  "devDependencies": {
    "asar": "^0.10.0",
    "babel-core": "^6.7.4",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-webpack-loaders": "^0.4.0",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "chai": "^3.5.0",
    "chromedriver": "^2.21.2",
    "co-mocha": "^1.1.2",
    "concurrently": "^2.0.0",
    "cross-env": "^1.0.7",
    "css-loader": "^0.23.1",
    "del": "^2.2.0",
    "electron-packager": "^6.0.0",
    "electron-prebuilt": "^0.37.2",
    "electron-rebuild": "^1.1.3",
    "eslint": "^2.5.3",
    "eslint-config-airbnb": "^6.2.0",
    "eslint-plugin-react": "^4.2.3",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "fbjs-scripts": "^0.5.0",
    "iron-node": "^3.0.6",
    "jsdom": "^8.2.0",
    "json-loader": "^0.5.4",
    "minimist": "^1.2.0",
    "mocha": "^2.4.5",
    "node-libs-browser": "^1.0.0",
    "react-addons-test-utils": "^0.14.7",
    "selenium-webdriver": "^2.53.1",
    "sinon": "^1.17.3",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-target-electron-renderer": "^0.4.0"
  },
  "dependencies": {
    "electron-debug": "^0.5.2",
    "react": "^15.0.1",
    "react-addons-shallow-compare": "^15.0.1",
    "react-bootstrap": "^0.28.3",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.1",
  },
  "devEngines": {
    "node": "4.x || 5.x || 6.x",
    "npm": "2.x || 3.x"
  },

I looked through Electron tickets and didn’t find this issue. There is a similar issue of not stopping at a debugger statement, but I don’t know if it’s related (https://github.com/electron/electron/issues/4842).

This seems like a fairly important bug to deal with because it’s so hard to develop without using a debugger. It’s also possible this is just something local to my repo and machine - but like I said I did a fresh clone of this repo and debugger works in an older version.

I would love to know if somebody can first reproduce this error. Thanks

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 20 (17 by maintainers)

Most upvoted comments

I don’t know if it is the same issue, but when I tried to use the debugger my js files looked like:

capture d ecran 2016-10-02 a 15 55 27

I temporarily fixed it by replacing devtool: 'cheap-module-eval-source-map' by devtool: 'eval-source-map' in webpack.config.development.js

I guess it reduces the performances, but the debugger is usable.

I still have the error in the terminal.

Maybe this is interresting https://github.com/webpack/webpack/issues/2145