Sourcemaps not working in Chrome, but working in Firefox

sage9

#1

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 - this isn’t helpful for me to be able to find the location of that CSS.

Is this intended behaviour?


#2

Nope, the sourcemaps take care of this and tell the browser where to find the rules:


#3

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

blobby

I was just reading this topic
Developing with Yarn & Webpack, issues with error reporting and css and thought it might be related


#4

Is everything else working as expected aside from the sourcemaps?


#5

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.


#6

Sorry, more meant is everything working as expected with the stylesheets i.e. are they compiling correctly and the changes are happening?


#7

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


#8

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. I am using MAMP pro and Chrome. OMG - it works in Firefox.

sourcemaps


#9

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…


#10

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


#11

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.


#12

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 in chrome links instead of _stylesheet.scss in firefox.


#13

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?


#14

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.


#15

That didn’t fix it unfortunately. Weird that it is working fine in Firefox.


#16

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.jsfile doesn’t have the paths hardcoded like yours - it is set relatively. Maybe we have slightly different versions…


#17

That is what I did, but I’m doing it again to double check.


#18

I did that again. Still got the issue.


#19

Helps if I enable them in Chrome developer tools settings :slight_smile: :persevere::stuck_out_tongue_closed_eyes:

chrome-settings


#20

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!