This plugin modifies Gatsby’s webpack configuration to support Linaria.
Install the plugin and Linaria:
yarn add gatsby-plugin-linaria linaria@beta
The version of linaria has to be at least 1.4.0-beta.3 because of this known issue.
Next, add the plugin to
plugins: [ 'gatsby-plugin-linaria', ]
Finally, make sure to add
.linaria-cache to your
If you’re using gatsby-plugin-typescript, make sure to include it before gatsby-plugin-linaria:
plugins: [ 'gatsby-plugin-typescript', 'gatsby-plugin-linaria', ]
Happy styling! :art:
This will be fixed in next release (v3.0)
This error is caused by:
- a discrepancy between Linaria’s and Gatsby’s version of core-js
- stable versions of Linaria being built with an incorrect Babel configuration
A workaround is to update Linaria to at least
1.4.0-beta.3 and install the latest version of core-js (v3):
yarn add linaria@^1.4.0-beta.3 yarn add core-js
Read #50 for more context.
At the time of this writing, Gatsby comes with eslint-loader built-in, which seems to be unable to detect the modified Babel configuration. So far the fastest way to fix this is to add both ESLint and Babel configuration file to your project. Configure ESLint to extend eslint-config-react-app (this is the one that Gatsby uses) and configure Babel according to Gatsby’s instructions how to add a custom Babel configuration, and add linaria/babel as well.
Read #15 for more context.