Uncaught ReferenceError: _JSXStyle is not defined | >v3.3.2 | CRA + react-app-rewired + customize-cra + Production Build

[eldarc]

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

Bug

What is the current behavior?

• Using the latest styled-jsx version, or any version newer than v3.3.2 will produce a fatal error in the production build (when opened in the browser): _JSXStyle is not defined.
• Dependencies: create-rect-app, react-app-rewired, customize-cra.
• During development everything works as expected without any error.

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. Create a new app with create-react-app.
2. Install react-app-rewired and customize-cra
3. Configure config-override.js:

const { override, useBabelRc } = require("customize-cra");

module.exports = override(
  useBabelRc("./.babelrc"),
);

4. Configure .babelrc (same behavior when using the addBabelPlugin feature of customize-cra):

{
  "presets": ["babel-preset-react-app"],
  "plugins": [
    [
      "styled-jsx/babel",
      {
        "plugins": [
          [
            "@styled-jsx/plugin-sass",
            {
              "sassOptions": {
                "includePaths": ["./src/styles"]
              }
            }
          ]
        ]
      }
    ]
  ]
}

Same error happens for this .babelrc config:

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

When there is no "plugins": ["styled-jsx/babel"] in .babelrc it works as expected, but then it's not possible to add plugins.

5. yarn run build (react-app-rewired build) and serve -s build - or deploy to bucket/server
6. Fatal error happens: Uncaught ReferenceError: _JSXStyle is not defined

What is the expected behavior?

styled-jsx should work in production the same as in development.

Environment (include versions)

• OS: Any
• Browser: Any
• styled-jsx (version): >3.3.2

Did this work in previous versions?

It works with v3.3.2 but not in newer versions.

Could it be an issue with this? #684

Fix for now

• Either do import _JSXStyle from "styled-jsx/style"; for each file.
• Or hard-code 3.3.2 in package.json

[hpachy]

work for me :

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

[bcomnes]

Ran into this same error. Pinning to v3.3.2 seems to fix it again. It appears the transform no longer imports styled-jsx/style.

[masx200]

work for me :

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

Thanks! This is the correct solution!

but why?

[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 📦🚀