if you are getting this error it means that your `css` tagged template literals were not transpiled.

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: [{
                loader: require('styled-jsx/webpack').loader,
                options: {
                  type: 'scoped'
                }
              }],
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              // sideEffects: true,
            },

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "styled-jsx/babel",
        {
           "optimizeForSpeed": true 
        }
      ]
    ]
  }

.main-wrap {
    background-color: skyblue;

    
}

p {
    font-size: 16px;
    color: red;
    font-weight: bold;
}

 import React, { useState } from 'react'

 import { Button } from 'antd';

 import styles from  './index.css'

 const Card = ({onClick}) => {
     const [state, setstate] = useState(0)
     return (
     <div className='main-wrap'>
         <p>
         this is  a card {state}
         </p>
         <Button type='primary' onClick={() => setstate(state + 1)}> add </Button>

         <Button type='' onClick={() => onClick(state)}> 取 </Button>
         <style jsx>{styles}</style>
    </div>
     )
 }
 
 export default Card;