styled-jsx: _JSXStyle is not defined

my .babelrc file

"plugins": [
    [
      "styled-jsx/babel"
    ],
    "inline-dotenv",
    ["module-resolver", {
      "root": ["./src"]
    }],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ]
  ],

my js

<style jsx>{`
 span {
   color: red;
  }
`}</style>

then i got error ~ Please give me solution for this problem.

ReferenceError: _JSXStyle is not defined

Environment (include versions)

OS: mac windows
Browser: chrome
styled-jsx (version): styled-jsx 3.2.1 nextjs 8.0.1

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 15 (1 by maintainers)

Commits related to this issue

Downgrade styled-jsx to prevent example runtime errors - Some bad interplay between styled-jsx & babel, - Errors appear. Similar to this: https://github.com/vercel/styled-jsx/issues/560 - Not crit... — committed to lupko/gooddata-ui-sdk by lupko 3 years ago

Most upvoted comments

I also ran into this while trying to include styled-jsx-plugin-sass. Instead of directly adding plugins to the babel configuration you need to update the next/babel preset:

Found in docs here

"presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]

+23

BradEP on May 16, 2019

@BradEP You’re right!

next/babel preset contains styled-jsx, so do not add duplicates to existing plugins and use the default preset.

{
  "presets": [["next/babel", {
    "preset-env": {},
    "styled-jsx": {
      "plugins": ["styled-jsx-plugin-postcss"]
    }
  }]],
  // "plugins": [["styled-jsx/babel", {
  //   "plugins": ["styled-jsx-plugin-postcss"]
  // }]]
}

gtolarc on Jul 9, 2019

Any suggestions on how to fix this for large projects that start using next-js and styled-jsx along time ago? I can’t afford to manually paste import _JSXStyle from "styled-jsx/style" in every file that uses styled-jsx

ArtyomResh on May 31, 2019

I’m still also trying to get this to work and #545 is not the issue I think (I’m not using a different version of styled-jsx now at all in my dependencies). I was getting the same _JSXStyle is not defined and while attempting to debug I tried this which actually caused it to work;

MainLayout.jsx

//Not sure why but, it only works when I do this
import _JSXStyle from "styled-jsx/style";

class MainLayout extends React.Component {
    componentDidMount() {
           console.log(_JSXStyle); //Only works below when I'm console logging it??
    }
    render() {
          return (
             <div>
                    <p>Yooo</p> 
                     {
                         //Paragraph is black as expected unless I take the console log out in componentDidMount.
                     }
                    <style jsx>
                           {`p {background-color:black; }`}
                     </style>
             </div>
           );
    }
}

tbarkley on Apr 22, 2019