development mode page empty after migration to v3

[codepunkt]

Description

After upgrading to v3, in development mode #__gatsby element is empty.
No error messages. Production mode seems to work, but that doesn't help a lot.

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
  npmPackages:
    gatsby: ^3.0.2 => 3.0.2
    gatsby-image: ^3.0.0 => 3.0.0
    gatsby-plugin-catch-links: ^3.0.0 => 3.0.0
    gatsby-plugin-feed: ^3.0.0 => 3.0.0
    gatsby-plugin-linaria: ^2.2.0 => 2.2.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-remove-generator: ^1.0.8 => 1.0.8
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-remark-acronyms: ^1.1.2 => 1.1.2
    gatsby-remark-autolink-headers: ^3.0.0 => 3.0.0
    gatsby-remark-copy-linked-files: ^3.0.0 => 3.0.0
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images: ^4.0.0 => 4.0.0
    gatsby-remark-opengraph: 2.0.1 => 2.0.1
    gatsby-remark-table-of-contents: ^1.0.0 => 1.0.0
    gatsby-remark-vscode: ^3.2.0 => 3.2.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-transformer-remark: ^3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0

[codepunkt]

Okay, this seems to be related to my usage of linaria and gatsby-plugin-linaria.

In its gatsby-node.js, gatsby-plugin-linaria removes the webpack alias for @reach/router, which leads to gatsby build processes not working and throwing a few errors (see #29964).

If I patch gatsby-plugin-linaria, deleting the line that removes the webpack alias for @reach/router, both development and production builds run without errors, but the problem mentioned in this issue occurs: Development pages in browser are blank, #__gatsby HTML element has no children.

This is only a problem in development mode, and only when the pages use linaria. If I remove all linaria usage from a page, it works again.

TLDR: Using gatsby v3 with linaria and gatsby-plugin-linaria doesn't work. Even though it's a third party plugin, I'm hoping for the gatsby team to help me out here as linaria is the most performant CSS in JS library that can be used with gatsby and I'm heavily relying on it.

[hendra-go]

This is more likely because gatsby 3 now use Webpack 5, so it will need some adjustment.

And because you mention that this bug related to gatsby-plugin-linaria which is a third party plugin, i think you should also discuss this bug in its repo.

and it looks like there is a temporary workaround:
cometkim/gatsby-plugin-linaria#115 (comment)

[LekoArts]

The webpack aliasing should be fixed in [email protected], [email protected], [email protected] (via #29964 (comment)). Please try out these new versions with linaria.

[fshowalter]

It still breaks if you import anything from @reach/router in your components, i.e. import { useLocation } from "@reach/router"; in an SEO component to set the og:url property. A work-around is to import from @gatsbyjs/reach-router instead but then typescript will complain that it can't find any type definitions.