I'm using the default source mapping built into Brunch. I see the files fine, but I cannot hit breakpoints within the source mapped files. Using the Javascript access to the debugger via debugger;
works, which leads me to believe it's something wrong with the Brunch side of things.
Here is my brunch-config.js:
module.exports = {
files: {
javascripts: {
joinTo: {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
entryPoints: {
'source/scripts/app.jsx': 'js/app.js'
},
order: {
before: /^(?!source)/
}
},
stylesheets: {joinTo: 'css/core.css'},
},
paths: {
watched: ['source']
},
modules: {
autoRequire: {
'js/app.js': ['source/scripts/app']
}
},
plugins: {
babel: {presets: ['latest', 'react']},
assetsmanager: {
copyTo: {
'assets': ['source/resources/*']
}
},
static: {
processors: [
require('html-brunch-static')({
processors: [
require('pug-brunch-static')({
fileMatch: 'source/views/home.pug',
fileTransform: (filename) => {
filename = filename.replace(/\.pug$/, '.html');
filename = filename.replace('views/', '');
return filename;
}
})
]
})
]
}
},
server: {
run: true,
port: 9005
}
};
I have tried setting the sourceMaps
property of config to 'old'
and 'absoluteUrl'
and 'inline'
(see Brunch config documentation) but still I do not hit breakpoints.
I run the command brunch watch --server
and I am using Chrome. Same behavior in Chrome Canary. I hit the breakpoints in Firefox, no problem there.
It's interesting to note that the sourced map files have a base 64 string seemingly for their definition, something like:
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpb...
The mapping appears to be working, but why can't I hit breakpoints in Chrome devtools?
MVCE available. Follow these instructions:
npm install
brunch build
(make sure it is installed globally with npm install brunch -g
)For additional information, here's my package.json:
{
"version": "0.0.1",
"devDependencies": {
"assetsmanager-brunch": "^1.8.1",
"babel-brunch": "^6.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-rewire": "^1.0.0-rc-5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.11.6",
"browser-sync-brunch": "^0.0.9",
"brunch": "^2.10.9",
"brunch-static": "^1.2.1",
"chai": "^3.5.0",
"es6-promise": "^3.2.1",
"eslint-plugin-react": "^5.1.1",
"expect": "^1.20.2",
"html-brunch-static": "^1.3.2",
"jquery": "~2.1.4",
"jquery-mousewheel": "^3.1.13",
"mocha": "^3.0.0",
"nib": "^1.1.0",
"nock": "^8.0.0",
"oboe": "~2.1.2",
"paper": "0.9.25",
"path": "^0.12.7",
"pug": "^2.0.0-beta10",
"pug-brunch-static": "^2.0.1",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-mock-store": "^1.1.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"reselect": "^2.5.3",
"spectrum-colorpicker": "~1.8.0",
"stylus-brunch": "^2.10.0",
"uglify-js-brunch": "^2.10.0",
"unibabel": "~2.1.0",
"when": "~3.4.5"
},
"dependencies": {
"jwt-decode": "^2.1.0",
"lodash": "^4.17.4",
"postal": "^2.0.5",
"rc-tree": "^1.3.9"
},
"scripts": {
"test": "mocha --compilers js:babel-register"
}
}
Issue created on brunch's Github.
UPDATE
Solved by fixing my brunch config as specified in the @JohannesFilter's answer to this question.
This was a byproduct of a valid but conflicting Brunch configuration. See the answer to this question from @JohannesFilter.
In essence, it seems that files.joinTo
and files.entryPoints
are mutually exclusive in that files.entryPoints
will override the output of files.joinTo
if they overlap. The solution is to choose one or the other, or make sure that they do not overlap on the files they are dealing with. For example, both of these are working configurations:
entryPoints: {
'source/scripts/app.jsx': {
'js/vendor.js': /^(?!source\/)/,
'js/app.js': /^source\//
},
}
or
joinTo: {
'js/lib.js': /^(?!source\/)/
},
entryPoints: {
'source/scripts/app.jsx': {
'js/app.js': /^source\//
},
}