CSS modules break production build and upgrading gatsby packages wont work

[enmanuelduran]

Description

I recently made a migration to CSS modules on my site, everything was working locally with gatsby develop but after running gatsby build and gatsby serve and checking the site to deploy to production it turns out styles are breaking.

After trying multiple things and reading issues I came across this PR from @KyleAMathews that could potentially help to solve the css modules issues by removing code splitting which would work in my case because my site is small and simple.

I tried to update my packages to see if it would help but local environment won't work after upgrading, basically gatsby develop throws errors saying that I should npm install modules that are local to the blog and are implemented by me (not npm packages). I read an issue about using @next version on packages to potentially solve updating issues, but did not work.

Steps to reproduce

• CSS modules issue:

• Upgrade to css modules approach

• gatsby build && gatsby serve

• Site behaves totally different from gatsby develop

• Upgrading issue

• Upgrade gatsby and gatsby plugins to use @next version (fails as well if you use the latest versions directly)

• try to run gatsby develop

the following errors happen:

Expected result

• Styles should be consistent between gatsby develop and gatsby build && gatsby serve
• Upgrading packages to new versions should not break gatsby for development

Actual result

• CSS is broken on the site (homepage)
• Not possible to start gatsby after upgrading

Environment

• Environment where packages are outdated but css is broken due to modules:

System:
    OS: Linux 4.18 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 2.7.15+ - /home/enmanuel/.pyenv/shims/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.4
  npmPackages:
    gatsby: next => 2.0.0-rc.14
    gatsby-cli: ^2.6.2 => 2.6.2
    gatsby-plugin-catch-links: next => 2.0.2-rc.1
    gatsby-plugin-feed: ^2.1.0 => 2.1.0
    gatsby-plugin-google-analytics: next => 2.0.0-rc.2
    gatsby-plugin-google-tagmanager: ^2.0.9 => 2.0.9
    gatsby-plugin-mailchimp: https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2 => 3.3.0
    gatsby-plugin-manifest: next => 2.0.2-rc.1
    gatsby-plugin-offline: next => 2.0.0-rc.5
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1
    gatsby-plugin-sass: next => 2.0.0-rc.2
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-autolink-headers: ^2.0.6 => 2.0.6
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-prismjs: ^2.0.5 => 2.0.5
    gatsby-remark-reading-time: ^1.0.1 => 1.0.1
    gatsby-source-filesystem: next => 2.0.1-rc.2
    gatsby-transformer-remark: next => 2.1.1-rc.1
  npmGlobalPackages:
    gatsby-cli: 2.6.2

• Environment where packages were upgraded to see if it helps but gatsby wont work:

System:
    OS: Linux 4.18 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Languages:
    Python: 2.7.15+ - /home/enmanuel/.pyenv/shims/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.4
  npmPackages:
    gatsby: next => 2.11.6
    gatsby-cli: next => 2.7.7
    gatsby-plugin-catch-links: next => 2.1.0
    gatsby-plugin-feed: next => 2.3.1
    gatsby-plugin-google-analytics: next => 2.1.1
    gatsby-plugin-google-tagmanager: next => 2.1.0
    gatsby-plugin-mailchimp: next => 5.1.0
    gatsby-plugin-manifest: next => 2.2.0
    gatsby-plugin-offline: next => 2.2.0
    gatsby-plugin-react-helmet: next => 3.1.0
    gatsby-plugin-sass: next => 2.1.0
    gatsby-plugin-sharp: next => 2.2.1
    gatsby-remark-autolink-headers: next => 2.1.0
    gatsby-remark-images: next => 3.1.2
    gatsby-remark-prismjs: next => 3.3.0
    gatsby-remark-reading-time: next => 1.0.1
    gatsby-source-filesystem: next => 2.1.1
    gatsby-transformer-remark: next => 2.5.0
  npmGlobalPackages:
    gatsby-cli: 2.6.2

Things I have tried:

• Remove node_modules, .cache, yarn.lock, package-lock.json
• Used npm and used yarn
• Used direct latest versions instead of @next on packages
• Used next versions in packages
• Changed the order of some imports on each module to see if it would help with the css problems.

Note: my site is open source, this the PR that introduces the modular css migration and the code of the site is online on https://github.com/enmanuelduran/enmascript

Is there anything else I can do to help? how can I be useful or give you a hand?

[enmanuelduran]

First Update:

After spending some more time digging a little deeper into the errors I have managed to make my local environment work with the latest packages versions by removing aliases (absolute paths) from my modules imports. After making multiple tests Kyle's code splitting solution seems to have fixed my CSS problems.

I am not a fan of having to stop using aliases, but since that is not critical I will take this issue as solved.

If you are going through the same issue, the commit that solves the issue in my site is enmanuelduran/enmascript@d9113dc