[gatsby] gatsby develop produces minified source code

[vcarl]

Description

The develop mode is producing minified source code, which means I can't add breakpoints

Steps to reproduce

gatsby new test-site
cd test-site
yarn start

Expected result

Code viewed in developer tools should allow breakpoints to be set on most lines.

Actual result

Only a small percentage of lines are selectable.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 13.0.2
  npmPackages:
    gatsby: ^2.15.28 => 2.15.28 
    gatsby-background-image: ^0.8.15 => 0.8.15 
    gatsby-image: ^2.2.23 => 2.2.23 
    gatsby-plugin-eslint: ^2.0.5 => 2.0.5 
    gatsby-plugin-mdx: ^1.0.46 => 1.0.46 
    gatsby-plugin-react-helmet: ^3.1.10 => 3.1.10 
    gatsby-plugin-react-svg: ^2.1.1 => 2.1.1 
    gatsby-plugin-sharp: ^2.2.27 => 2.2.27 
    gatsby-plugin-sitemap: ^2.1.0 => 2.1.0 
    gatsby-plugin-styled-components: ^3.1.8 => 3.1.8 
    gatsby-remark-prismjs: ^3.3.16 => 3.3.16 
    gatsby-remark-smartypants: ^2.1.11 => 2.1.11 
    gatsby-source-contentful: ^2.1.44 => 2.1.44 
    gatsby-source-filesystem: ^2.0.32 => 2.0.32 
    gatsby-source-git: ^1.0.2 => 1.0.2 
    gatsby-source-rss-feed: ^1.1.1 => 1.1.1 
    gatsby-transformer-remark: ^2.6.26 => 2.6.26 
    gatsby-transformer-sharp: ^2.2.19 => 2.2.19 

[vcarl]

2.13.x is the last good minor version. Seeing if I can narrow it down to a specific change.

[vcarl]

2.13.30 is the first bad version, 2.13.29 is the last version that produces un-minified source code with gatsby develop.

Repro with 2 copies of npx gatsby new <name>, with gatsby version pinned to the last good and first bad, is here https://github.com/vcarl/gatsby-minified-source-bug-repro

Screenshots of what I mean:


Note how many more lines are selectable in the second.

[minervabot]

This bumped babel-preset-gatsby from 0.2.6 to 0.2.7. There seem to be significant changes, could this be associated? Does gatsby use this package internally, or is it only for custom .babelrc?

https://github.com/gatsbyjs/gatsby/compare/babel-preset-gatsby@0.2.6...babel-preset-gatsby@0.2.7

This new code introduces options.stage, which seems interesting:

gatsby/packages/babel-preset-gatsby/src/index.js

Lines 32 to 33 in 118eb30

	// TODO(v3): Remove process.env.GATSBY_BUILD_STAGE, needs to be passed as an option
	const stage = options.stage || process.env.GATSBY_BUILD_STAGE || `test`

[pieh]

Gatsby does use babel-preset-gatsby.

Just to verify before I get to check this tomorrow - is code minified/uglified (so variable names are renamed to 1 letter variables) or compacted (new lines are removed)?

I see there is compact option being set to true which does the latter: "All optional newlines and whitespace will be omitted when generating code in compact mode." and this would be my guess - as this was unconditionally set in for user code in #15875

[pieh]

Quick verification could also help - going to node_modules/gatsby/dist/utils/webpack-utils.js and searching for compact: true and setting it to false, and then deleting node_modules/.cache (that's babel/webpack cache), rerunning gatsby develop and seeing if that fixes the problem could help us narrow it down.

For proper fix we would need to conditionally set this only for production builds

[minervabot]

The code does not appear to actually be minified, some of my longer variable names remain, but just are on one line.

In gatsby 2.17.6 changing to compact: false in the following block of code resolves the no breakpoints issue for me.

node_modules/gatsby/dist/utils/webpack-utils.js

  {
    let js = (_ref = {}) => {
      let {
        modulesThatUseGatsby = []
      } = _ref,
          options = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["modulesThatUseGatsby"]);
      return {
        test: /\.(js|mjs|jsx)$/,
        include: modulePath => {
          // when it's not coming from node_modules we treat it as a source file.
          if (!vendorRegex.test(modulePath)) {
            return true;
          } // If the module uses Gatsby as a dependency
          // we want to treat it as src so we can extract queries


          return modulesThatUseGatsby.some(module => modulePath.includes(module.path));
        },
        type: `javascript/auto`,
        use: [loaders.js(Object.assign({}, options, {
          configFile: true,
          compact: true
        }))]
      };
    };

    rules.js = js;
  }

[vcarl]

Yep, fixes for me as well!

[LekoArts]

We'd appreciate a PR fixing that! :)

[minervabot]

The workaround discussed above might affect the production builds as well.

[Toolo]

I have just opened a PR with @pieh 's suggestion to set the compact value conditionally: #19240

[arualana]

Quick verification could also help - going to node_modules/gatsby/dist/utils/webpack-utils.js and searching for compact: true and setting it to false, and then deleting node_modules/.cache (that's babel/webpack cache), rerunning gatsby develop and seeing if that fixes the problem could help us narrow it down.

For proper fix we would need to conditionally set this only for production builds

@pieh where is exactly the cache I need to delete? I don't see any .cache right under node_modules

I need the opposite case, to minify the development build

[pieh]

@arualana After #25192 (which translates to gatsby@2.23.8 and newer) the caches are stored in <project_directory>/.cache/webpack. The compact setting should remain in node_modules/gatsby/dist/utils/webpack-utils.js file.