🗺 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:

gatsby/packages/gatsby/src/utils/webpack.config.js

Lines 253 to 266 in a9bc9b8

	function getDevtool() {
	switch (stage) {
	case `develop`:
	return `eval`
	// use a normal `source-map` for the html phases since
	// it gives better line and column numbers
	case `develop-html`:
	case `build-html`:
	case `build-javascript`:
	return `source-map`
	default:
	return false
	}
	}

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: f5191a0

However, it looks like the same issue is back on v2:

gatsby/packages/gatsby/src/utils/webpack.config.js

Line 256 in ad142af

return `eval`