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)
I don’t know if it is the same issue, but when I tried to use the debugger my js files looked like:
I temporarily fixed it by replacing
devtool: 'cheap-module-eval-source-map'bydevtool: 'eval-source-map'inwebpack.config.development.jsI 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