# Sourcemaps not working in Chrome, but working in Firefox **URL:** https://discourse.roots.io/t/sourcemaps-not-working-in-chrome-but-working-in-firefox/10856 **Category:** sage **Tags:** sage9 **Created:** 2017-11-08T16:01:34Z **Posts:** 20 ## Post 1 by @yeahsmaggy — 2017-11-08T16:01:34Z After running yarn run start, I inspect some css I want to change. Next to the CSS rule in the console is shown a url e.g. blob:[http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f](http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f) - this isn’t helpful for me to be able to find the location of that CSS. Is this intended behaviour? --- ## Post 2 by @nathobson — 2017-11-08T17:18:34Z Nope, the sourcemaps take care of this and tell the browser where to find the rules: ![54](https://discourse.roots.io/uploads/default/original/2X/a/a9724df7f9bc3dfe04677a0f28f3b9687584322f.jpg) --- ## Post 3 by @yeahsmaggy — 2017-11-08T17:26:14Z Yes am I missing something here as what you have in your screenshot is more like what I would expect to see - e.g. links to the location of the styles in the scss files. Any idea what might be the reason that for example where you have /Users/nat/root… home.scss I have the something like blob:[http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f](http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f) ![blobby](https://discourse.roots.io/uploads/default/original/2X/b/bf97a44a8c00635cd301f15fedca517ab58c5f45.jpeg) I was just reading this topic [Developing with Yarn & Webpack, issues with error reporting and css - #10 by MWDelaney](https://discourse.roots.io/t/developing-with-yarn-webpack-issues-with-error-reporting-and-css/10828/10) and thought it might be related --- ## Post 4 by @nathobson — 2017-11-08T17:36:26Z Is everything else working as expected aside from the sourcemaps? --- ## Post 5 by @yeahsmaggy — 2017-11-08T17:40:59Z I believe so far everything else is working as expected however, I’ve only just started exploring this version of sage in the current project I’m working on, so I’m pretty sure I will encounter further things on part of this learning curve. --- ## Post 6 by @nathobson — 2017-11-08T17:41:53Z Sorry, more meant is everything working as expected with the stylesheets i.e. are they compiling correctly and the changes are happening? --- ## Post 7 by @yeahsmaggy — 2017-11-08T17:43:46Z Yes if I change something in a sass file then it rebuilds and shows in the browser. Where is the config for the sourcemaps - perhaps that is part of the problem? I saw ``` enabled: { sourceMaps: !isProduction, optimize: isProduction, cacheBusting: isProduction, watcher: !!argv.watch, ``` }, in config.js , perhaps I’m somehow in production mode? config object is ``` { open: true, copy: 'images/**/*', proxyUrl: 'http://localhost:3000', cacheBusting: '[name]_[hash:8]', paths: { root: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf', assets: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf/resources/assets', dist: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf/dist' }, enabled: { sourceMaps: true, optimize: false, cacheBusting: false, watcher: true }, watch: [ 'app/**/*.php', 'config/**/*.php', 'resources/views/**/*.php', 'resources/**/*.php', 'resources/templates/**/*.twig' ], entry: { main: ['./scripts/main.js', './styles/main.scss'], customizer: ['./scripts/customizer.js'] }, publicPath: '/app/themes/asdf', devUrl: 'l.asdf.dev' } ``` I tried re-running npm install to check errors and there is one warning: ``` (node:9480) Warning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit ``` this could be related to many things though by the look of it [https://stackoverflow.com/questions/9768444/possible-eventemitter-memory-leak-detected](https://stackoverflow.com/questions/9768444/possible-eventemitter-memory-leak-detected) --- ## Post 8 by @yeahsmaggy — 2017-11-08T20:57:43Z I Just created an entirely fresh install of bedrock with sage and I still get the same problem. E.g. after doing yarn run start and inspect my css sourcemap appears to be broken - links are e.g. blob:[http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f](http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f). I am using MAMP pro and Chrome. OMG - it works in Firefox. ![sourcemaps](https://discourse.roots.io/uploads/default/original/2X/7/7d12ef9ca91b0fa1df83b5c35504665862d8f82c.jpeg) --- ## Post 9 by @Stephen — 2017-11-09T10:03:09Z > [@yeahsmaggy](#): > > I tried re-running npm install to check errors and there is one warning Is there a reason you’re using NPM instead of Yarn? The Sage 9 docs suggest you use Yarn and there’s a `yarn.lock` file included in the repository that NPM wouldn’t look at so maybe that explains these weird issues you’re having. If I remember correctly, one of the advantages of Yarn is that you are guaranteed to get the exact same versions of packages while that’s not the case with NPM… --- ## Post 10 by @yeahsmaggy — 2017-11-09T10:06:00Z Oh, I might have done that by force of habit as I only just moved from an older sage using gulp bower npm to the master branch of sage with yarn. Having run npm install, is that likely to have broken anything? I have otherwise followed the docs [https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md](https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md) --- ## Post 11 by @Stephen — 2017-11-09T10:11:22Z > [@yeahsmaggy](#): > > Having run npm install, is that likely to have broken anything? It might have installed some slightly different package versions and that could explain why things aren’t working as expected… I’d suggest that you delete your `node_modules` directory and run `yarn` - hopefully that will solve it. --- ## Post 12 by @yeahsmaggy — 2017-11-09T10:16:22Z I have just tried that: - deleted node\_modules - ran yarn - ran yarn build - ran yarn run start still same problem unfortunately. blob:[http://localhost-somehash](http://localhost-somehash) in chrome links instead of \_stylesheet.scss in firefox. --- ## Post 13 by @Stephen — 2017-11-09T10:22:55Z That’s strange, I hoped it would be enough but maybe there’s something else still cached. I don’t know if it has any impact but you could try deleting the `.cache-loader` folder and also the full `dist` folder (although it should be recreated each time you run a build). Then run `yarn build` again. You could also try a completely fresh project and only use yarn this time. By the way, which version of Chrome do you have? Is it up to date? --- ## Post 14 by @yeahsmaggy — 2017-11-09T10:25:12Z I will try deleting .cache-loader and the dist folder and run yarn build again. version of chrome - Version 62.0.3202.89 (Official Build) (64-bit) auto updates are on. I did try a fresh project last night but perhaps I also ran npm install without thinking about it, although I’m pretty sure I didn’t. I will doublecheck. --- ## Post 15 by @yeahsmaggy — 2017-11-09T10:29:12Z That didn’t fix it unfortunately. Weird that it is working fine in Firefox. --- ## Post 16 by @Stephen — 2017-11-09T10:37:53Z It seems to be a problem somewhere in the build process. It worked straight away for me (I’m using Laravel Valet instead of MAMP for my server but I don’t think that should make a huge difference). Are you sure you have the very latest version of Sage from Github? How are you installing the theme? I used Composer and ran the installer: `composer create-project roots/sage myThemeName dev-master` Is that what you did too? I ask because my `config.js`file doesn’t have the paths hardcoded like yours - it is set relatively. Maybe we have slightly different versions… --- ## Post 17 by @yeahsmaggy — 2017-11-09T11:21:47Z > [@Stephen](#): > > composer create-project roots/sage myThemeName dev-master That is what I did, but I’m doing it again to double check. --- ## Post 18 by @yeahsmaggy — 2017-11-09T11:30:14Z I did that again. Still got the issue. --- ## Post 19 by @yeahsmaggy — 2017-11-09T11:39:08Z Helps if I enable them in Chrome developer tools settings :slight_smile: :persevere::stuck_out_tongue_closed_eyes: ![chrome-settings](https://discourse.roots.io/uploads/default/original/2X/9/963f42f63280d9b5fcaf3f13babcfdc48025eca1.jpeg) --- ## Post 20 by @Stephen — 2017-11-09T12:03:08Z Nice find! I didn’t even know that was an option in Chrome… I guess it’s on by default because I don’t remember ever setting it!