GaspariLab's avatar

sourceMaps problem with Laravel Mix

Hello everyone,

I'm experiencing a strange behavior when trying to generate source maps for my css and javascript files. I'm not able to generate source maps files. In fact, they're generated ONLY when running npm run production, but the css one is empty.

We've got a project with big stylesheets made with sass, but I'm experiencing the same problem on a brand new project with laravel new.

I set up Node and Npm as described here.

This is my webpack.mix.js file:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sourceMaps();

npm run dev

Now, after running npm run dev I got a big app.js and an app.css, both without map files.

/js/app.js    3.22 MB       0  [emitted]  [big]  /js/app
/css/app.css     144 kB       0  [emitted]         /js/app

The file app.js seems to have inside a big section of code starting with this: sourceMappingURL=data:application/json;charset=utf-8;base64, ...

By removing sourceMaps();, I get this:

/js/app.js    1.19 MB       0  [emitted]  [big]  /js/app
/css/app.css     681 kB       0  [emitted]         /js/app

npm run production

With .sourceMaps();

By running npm run production i get this:

/js/app.js     291 kB       0  [emitted]  [big]  /js/app
/css/app.css     114 kB       0  [emitted]         /js/app
/js/app.js.map     299 kB       0  [emitted]         /js/app
/css/app.css.map   82 bytes       0  [emitted]         /js/app

So there is definitely something wrong with Mix or Sass either.

  1. Map files generated only with production command
  2. Bigger app.js file generated with dev containing a lot of encoded code (is this expected?)
  3. While the map file for app.js contains code, the css one is empty. Is there something wrong with Sass?

Can someone explain what's happening?

Thanks

0 likes
6 replies
GaspariLab's avatar

Well I figured out something and fixed the problem for my designer.

We are not expert in source maps so we didn't know that there are several types of source maps or "where to write them".

I figured out that there are several "levels of detail" and my designer wanted to dive deeper into the Sass file.

So I had to add this to my webpack.mix.js:

mix.webpackConfig({
    devtool: "inline-source-map"
});

That seems to work for development.

2 likes
tpraxl's avatar

@GaspariLab Notice that this causes the production build of the css to be extremely large, as it will inline the sourcemap also in the production css (independent of calling mix.sourceMaps() or not).

GaspariLab's avatar

You're right, but in fact I disabled source maps entirely when we're in production by checking "mix.config.inProduction". Thank you.

debiprasad's avatar

When you run npm run dev, Laravel Mix by default inlines source map to the compiled files. This is the reason why the files are so large.

Roni's avatar

@debiprasad, I'm not sure, I've been battling this all morning, as of laravel 5.6 with mix 2.1.11 sourcemaps are not showing up with dev or watch. but the webpack config did the trick.

1 like
str's avatar

@GaspariLab , how do you set the maps only in dev? How do you set the mix.config.inProduction? Can you please share your code?

1 like

Please or to participate in this conversation.