Gatsby: Webpack aliases causes issues on production build

[ajayns]

Description

Steps to reproduce

1. Setup gatsby-node.js with Webpack aliases:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        components: `${__dirname}/src/components`,
        common: `${__dirname}/src/components/common`,
        sections: `${__dirname}/src/components/sections`,
        constants: `${__dirname}/src/constants`,
        static: `${__dirname}/static`,
      },
    },
  });
};

1. Import using an alias, for instance, import { SCREEN } from 'constants'; and use it in the code. In my case specifically I'm using it with styled-components.

2. Run production build with gatsby develop

Expected result

Imports should work as expected

Actual result

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

   8 |   padding: 0 16px;
   9 |
> 10 |   @media (min-width: ${SCREEN.xs}) {
     |                               ^
  11 |     max-width: 540px;
  12 |   }
  13 |


  WebpackError: TypeError: Cannot read property 'xs' of undefined

Environment

  System:
    OS: macOS 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.5.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0.2
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.76 => 2.0.76 
    gatsby-image: ^2.0.20 => 2.0.25 
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12 
    gatsby-plugin-offline: ^2.0.16 => 2.0.20 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5 
    gatsby-plugin-sharp: ^2.0.14 => 2.0.16 
    gatsby-source-filesystem: ^2.0.8 => 2.0.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[sidharthachatterjee]

Hey @ajayns

Could you please link to a minimal reproduction repo for this?

entry, output, target, and resolveLoaders are ignored in setWebpackConfig documented in https://www.gatsbyjs.org/docs/actions/#setWebpackConfig

resolve should work though as far as I know

[ajayns]

https://www.dropbox.com/s/8je98v3suoi9tl6/bug.zip?dl=0
There you go. gatsby develop works perfectly while gatsby build fails with the mentioned error.

[gurpreet-hanjra]

Gatsby has a plugin for it - https://www.gatsbyjs.org/packages/gatsby-plugin-alias-imports I gave it a try and worked with your setup.

[gurpreet-hanjra]

or import it like import { COLOR } from 'constants/index.js'

[ajayns]

Oh I was unaware of this plugin, will give it a try. From what I tried I realized it was an issue only occurring for styled-components because webpack doesn't recognize imports there. So in my project removing the alias imports used for just styled-components worked.

[gurpreet-hanjra]

Great! Just let know if you see any issues further!

[sidharthachatterjee]

Closing this for the moment because it looks like your issue was resolved by @gurpreet-hanjra 🙂 and the _broken_ imports are specific to styled-components

Please feel free to reopen if I've missed something. Thanks!

[ajayns]

Thank you guys for the quick resolution