Error: Using the "styled" tag in runtime is not supported about gatsby-plugin-linaria HOT 3 CLOSED

I found it. I'm just using the wrong syntax: https://github.com/callstack/linaria/blob/master/docs/BASICS.md
It needs to be a regular css inside backticks.
After adding the module.exports and fixing the syntax it now compiles and works.
I'm closing this issue, as I think my problem was in gatsby-config.js.
Thanks for help!

from gatsby-plugin-linaria.

You're missing module.exports in your gatsby-config.js. However, now I'm getting errors like this:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

SyntaxError

(5:6) Missed semicolon

  3 | import { styled } from 'linaria/react'
  4 | 
> 5 | const MottoTextStyle = styled.div`
    |      ^
  6 |   fontSize: "xx-large",
  7 |   fontFamily: ["Bai Jamjuree", "sans-serif"],


File: .linaria-cache/src/components/motto.linaria.css

failed Re-building development bundle - 0.070s

For some reason Linaria compiles the styles with commas instead of semicolons:

.ContainerStyle_clz65eb{position:"absolute", top:"50%", left:"50%", marginRight:"-50%", transform:"translate(-50%, -50%)";}

I'll try to figure out why that is happening, let me know if you have any ideas.

from gatsby-plugin-linaria.

Oh, right! 😄 I was staring at those CSS blocks trying to figure it out. I recommend linting them with stylelint, it might help in the future.

from gatsby-plugin-linaria.