I got _JSXStyle is not defined with 3.4.0

[zhenglong0034]

👋 friend. Welcome to styled-jsx and thanks for contributing!

⚠️ IMPORTANT ⚠️

If you need help or have a question about styled-jsx please ask it on Spectrum https://spectrum.chat/styled-jsx or join our Slack community at https://zeit.chat and ask it in the #next channel.

Before you open a new issue please take a look at our Frequent Asked Questions and open issues.

Remember, often time asking in chat or looking at the FAQ/issues can be faster than waiting for us to reply to a new issue*.

If you are here to report a bug or request a feature please remove this introductory section and fill out the information below!

---

Do you want to request a feature or report a bug?

What is the current behavior?

when I use <style jsx> in MyComponent I got _JSXStyle is not defined

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

1. webpack 4.42.0
2. mac

What is the expected behavior?

Environment (include versions)

• OS:
• Browser:
• styled-jsx (version): 3.4.0

Did this work in previous versions?

yes

[Timer]

Does this happen in 3.3.3? We need a minimal reproducing test case, please!

[A113n1003]

Does this happen in 3.3.3? We need a minimal reproducing test case, please!

no， only happens when using addDefault from @babel/helper-module-imports
since change import importDeclaration

[Timer]

cc @jaydenseric

[rafinskipg]

I am facing the same issue too , we are forcing styled/jsx to version 3.3.0 because 3.4.0 will break the styles

[dkulp23]

If this helps narrow down the bug hunt, I also just ran into this attempting to go from 3.3.2 => 3.4.1. I tried reverting to 3.3.3 but the issue was actually present in that release (for me) as well. MacOS and Node 14 LTS. Using parcel v1.12.4 to bundle with a pretty barebones babel config. Issue was present in Chrome/Firefox/Safari (all latest).

    "env": {
      "test": {
        "presets": [
          [
            "@babel/preset-env",
            {
              "corejs": 2,
              "shippedProposals": true,
              "useBuiltIns": "usage"
            }
          ]
        ]
      }
    },
    "plugins": [
      "styled-jsx/babel"
    ],
    "presets": [
      "@babel/preset-react"
    ]

[schoooool]

Having the same issue in a CRA project using mobx-react. As soon as I wrap a component in observer() I get an error saying _JSXStyle is not defined. Works fine before the component is wrapped.

[SweetSweetME]

I got error _JSXStyle is not defined when my components use destructuring; import _JSXStyle2 from "styled-jsx/style"; but it should be import _JSXStyle from "styled-jsx/style";

[jaydenseric]

Nothing is actionable without a minimum reproduction, ideally a Babel REPL link. Here is one to get started with:

https://babeljs.io/en/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AocpAD0ljgBMlMUBXAGy1YDsNgJucAGIQIACgCUcAN7k4cIjFZRBYufLgAeBsABuAPnUatAZxgBPdkjgArE9X3SABkeOM9M127hoI7aABcCkgMFN7yAL5ecE4RmgD0ZpZIhsYJOgbqEhQRFEA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=true&targets=&version=7.12.12&externalPlugins=babel-plugin-styled-jsx-repl%400.1.0

[SweetSweetME]

This is an example:
https://github.com/SweetSweetME/styled-jsx-test

[jacobmischka]

It might be worth noting that when I encountered the issue, not all files were incorrect. A few compiled files correctly read import _JSXStyle from "styled-jsx/style";, but many read import _JSXStyle2 from "styled-jsx/style"; as mentioned above.

I tried to deduce what the differences between those files were that might be the case. It occurred to me in this project/commit when running yarn build:components, one can inspect the resulting dist/components files to see that some exhibit the behavior described above. I realize this reproduction isn't very minimal, but it might be helpful nonetheless.

[Southclaws]

I'm running into this too. I just set up a fresh new project and noticed _JSXStyle imports are not present in the output JS bundle.

I removed object deconstruction from one of the components and it worked.

Here's the generated component code with object deconstruction in the function signature:

var Item = function Item(_ref) {
  var img = _ref.img;
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("li", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dl", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dt", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("img", {
    src: img,
    className: "jsx-3704275120"
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dd", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("a", {
    href: "#",
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", {
    className: "jsx-3704275120"
  }, "Find out more")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_JSXStyle, {
    id: "3704275120"
  }, "li.jsx-3704275120{padding:0;}img.jsx-3704275120{width:100%;}dd.jsx-3704275120{margin:1em;text-align:center;width:100%;}span.jsx-3704275120{border-radius:0.5em;background-color:skyblue;padding:0.5em 3em 0.5em 3em;}\n"));
};

And here's the result without:

var Item = function Item(props) {
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("li", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dl", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dt", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("img", {
    src: props.img,
    className: "jsx-3704275120"
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("dd", {
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("a", {
    href: "#",
    className: "jsx-3704275120"
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", {
    className: "jsx-3704275120"
  }, "Find out more")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__.default, {
    id: "3704275120"
  }, "li.jsx-3704275120{padding:0;}img.jsx-3704275120{width:100%;}dd.jsx-3704275120{margin:1em;text-align:center;width:100%;}span.jsx-3704275120{border-radius:0.5em;background-color:skyblue;padding:0.5em 3em 0.5em 3em;}\n"));
};

Notice how _JSXStyle should be styled_jsx_style__WEBPACK_IMPORTED_MODULE_0__.default but for some reason object deconstruction in the function signature causes this bizarre behaviour.

[jacobmischka]

Interesting, though I'm experiencing it with class-based components without any deconstruction.

[twavv]

Yep, can confirm this regression seems to have been introduced between v3.3.2 and v3.3.3.

That corresponds to this commit: eb65f35 (PR #684, fixing issue #680).

Maybe this bit?

diff --git a/src/_utils.js b/src/_utils.js
index fafc0c2..007f1dc 100644
--- a/src/_utils.js
+++ b/src/_utils.js
@@ -1,4 +1,5 @@
 import path from 'path'
+import { addDefault } from '@babel/helper-module-imports';
 import * as t from '@babel/types'
 import _hashString from 'string-hash'
 import { SourceMapGenerator } from 'source-map'
@@ -621,14 +622,12 @@ export const booleanOption = opts => {
 }
 
 export const createReactComponentImportDeclaration = state => {
-  const styleModule =
+  addDefault(
+    state.file.path,
     typeof state.opts.styleModule === 'string'
       ? state.opts.styleModule
-      : 'styled-jsx/style'
-
-  return t.importDeclaration(
-    [t.importDefaultSpecifier(t.identifier(STYLE_COMPONENT))],
-    t.stringLiteral(styleModule)
+      : 'styled-jsx/style',
+    { nameHint: STYLE_COMPONENT}
   )
 }

[Timer]

We'll have to revert #684 if a contributor isn't able to figure out how to fix this otherwise! Does anyone want to take an attempt at fixing this?

[Icyrockton]

Hi, when using mobx-react-light observer function will cause this problem
Uncaught ReferenceError: _JSXStyle is not defined

[Icyrockton]

solve this problem when using mobx by extracting components
before

export class UiState {
    num = 10

    constructor() {
        makeAutoObservable(this)
    }
}
export const useUiState=new UiState()

type HahaProps = {
    uiState: UiState
}

export const Foo = observer((props:HahaProps)=>{
    const state = props.uiState;
    return (
        <>
            <h1>
                {state.num}
            </h1>
            <style jsx>
                {`
                  h1 {
                    color: red;
                  }`}
            </style>
        </>
    )
})

after

const FooComponent = (props: HahaProps) => {
    const state = props.uiState;
    return (
        <>
            <h1>
                {state.num}
            </h1>
            <style jsx>
                {`
                  h1 {
                    color: red;
                  }`}
            </style>
        </>
    )
}
export const Foo = observer(FooComponent)

[unix]

@Timer
I noticed that versions prior to 3.3.3 are not compatible with React 17+, although the current issue can be avoided.
Can we temporarily release a tag version of dev / alpha / beta to roll back the issue so that some users can use styled-jsx properly first?

This does not affect current users, it is just for those who want to avoid this issue, perhaps you have other solutions and would like to hear your ideas.

[moatorres]

Hey guys, I ran into a similar issue and just found a workaround for my use case. Hopefully it can shed a light on yours?

TL;DR

import _JSXStyle from 'styled-jsx/style';
 
if (typeof global !== 'undefined') {
  Object.assign(global, { _JSXStyle })
}

More context

I was actually trying to import a component from a local package (yarn workspaces + lerna setup) that had <style jsx> blocks and styled-jsx@3.4.4 as external dependency.

Next app (website) package.json

{
  "name": "@clients/test",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@lib/react-ui": "^1.0.0",
    "next": "^10.0.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

import React, { Fragment } from 'react'
import Head from 'next/Head'

const App = ({ Component, pageProps }) => {

  return (
    <Fragment>
        <Component {...pageProps} />
        {/* added the lines below just for the sake of it */}
        <style global jsx>{`
          body::-webkit-scrollbar {
            width: 0;
          }
        `}</style>
    </Fragment>
  )
}

export default App

Next app (component lib) package.json

{
  "name": "@lib/react-ui",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "esm/index.js",
  "files": [
    "/dist",
    "/esm"
  ],
  "devDependencies": {
    "@babel/cli": "^7.13.0",
    "@babel/core": "^7.13.8",
  },
  "dependencies": {
    "styled-jsx": "^3.4.4"
  }
}

import React, { Fragment } from 'react'

const ExampleComponent = () => {

  return (
    <Fragment>
      <span className="avatar" {...props}>
          {text}
        </span>
        <style jsx>{`
          .avatar {
            display: inline-block;
            position: relative;
        `}</style>
    </Fragment>
  )
}

export default ExampleComponent

Adding the snippet below inside the component library app index.js file did the trick. The _JSXStyle is now being correctly imported/compiled by webpack.

import _JSXStyle from 'styled-jsx/style';
 
if (typeof global !== 'undefined') {
  Object.assign(global, { _JSXStyle })
}

Adding the above directly inside the Next app (website) and installing styled-jsx@3.4.4 as a dependency did also fix the problem whilst troubleshooting.

Inspired on this article

[morrisallison]

We'll have to revert #684 if a contributor isn't able to figure out how to fix this otherwise! Does anyone want to take an attempt at fixing this?

@Timer Please see #716

[github-actions]

🎉 This issue has been resolved in version 3.4.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀