Gatsby: 🗺 v2 sourcemaps not working (totally NOT styled-components related)

[shelldandy]

Steps to reproduce

Start a new Gatsby project on v2

Expected result

Sourcemaps show original file names/code to debug (at least in development)

Actual result

Sourcemaps shown already compiled code 🤔

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
    Shell: 2.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 58.0
    Safari: 11.1.1
  npmPackages:
    gatsby: ^2.0.0-beta.21 => 2.0.0-beta.21

[giraffesyo]

I have styled components working here, but I'm not using the gatsby plugin. I'm wondering, do you also have the package styled-components added? It's a peer dependency now.

v2.0.1
styled-components is moved to a peer dependency. Installing the package alongside gatsby-plugin-styled-components is now required. Use npm install --save styled-components

[shelldandy]

Yes it's added, i mean styled-components work, sourcemaps dont

Edit: Not 💅 related, purely Gatsby v2 related, 😄

[shelldandy]

Since the styled-components plugin doesn't change any webpack config i think this is an issue with gatsby v2 purely I fixed it as follows:

gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, actions }) => {
    if (stage === 'develop') {
        actions.setWebpackConfig({
            devtool: 'cheap-module-source-map'
        });
    }
};

That way the sourcemaps are properly loaded:

I went with cheap-module-source-map since that's what react-scripts is doing

[shelldandy]

So now I think this could become a bug hunt for v2 towards why aren't sourcemaps properly loading to begin with???

🤔

[shelldandy]

But major props to the fact that as users we can tweak and fix those inner configs ourselves!

Top reason I choose Gatsby!

[shelldandy]

Any thoughts @giraffesyo 😮 ?

[giraffesyo]

@shelldandy Nope sorry, I haven't used sourcemaps yet. I misunderstood the original question to be about styled-components :(

[shelldandy]

I thought initially that was related but later on discovered its not.

I've updated the title and original description to be more fit @giraffesyo

[KyleAMathews]

Do sourcemaps not work for any parts of Gatsby v2? Or is this a styled-components specific issue?

[shelldandy]

Any parts of Gatsby v2, you can open it up on Chrome Developer tool and for example this non-styled-components non-react just vanillaJS code looks like that:

When it should look like this:

(It looks like that after I apply the fix on gatsby-node.js

What I can see is that Gatbsy by default sets the devtool for development as "eval" based on:

https://github.com/gatsbyjs/gatsby/blob/a9bc9b8d745e6a2a087ec1557ff60989847ad2ea/packages/gatsby/src/utils/webpack.config.js#L253-L266

However for some reason eval shows up in the devtools as post compiled code which isn't really that helpful debugging vs cheap-module-source-map which as you can see renders full sourcecode on the console and breakpoints also work really well.

So it might be just a plugin order situation on the final webpack config happening behind the scenes (?)

That's all the insights I got so far @giraffesyo @KyleAMathews

[wking-io]

This was a problem back in v1 and @KyleAMathews fixed it here: https://github.com/gatsbyjs/gatsby/pull/812/commits/f5191a0b7159ea8152340eb9c83809ad6cc5db40

However, it looks like the same issue is back on v2: https://github.com/gatsbyjs/gatsby/blob/ad142af473fc8dc8555a5cf23a0dfca42fcbbe90/packages/gatsby/src/utils/webpack.config.js#L256