Warning: Received `true` for a non-boolean attribute `jsx`. Zeit Styled Jsx

Question

I am trying to use styled-jsx with some code. However, no matter what I do, I seem to get an error

index.js:1437 Warning: Received `true` for a non-boolean attribute `jsx`.

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
    in style (at App.js:12)
    in div (at App.js:9)
    in Test (created by Route)
    in Route (at App.js:29)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:27)
    in App (at src/index.js:7)

I have tried reinstalling node_modules, made sure my configuration is all good, and tested different versions.

My package.json,

{
  "name": "preview",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "contentful": "^7.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "socket.io-client": "^2.2.0",
    "styled-jsx": "^3.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "babel": {
    "presets": [
      "@babel/preset-stage-2"
    ],
    "plugins": [
      "styled-jsx/babel"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:5000/"
}

My sample React code that still throws the error.

const Test = () => {
    return (
        <div>
        <p>test
        </p>
        <style jsx>{
            `
            p {
                color: red;
            }
            `
        }
        </style>
        </div>)
}

class App extends Component {

  render () {
    return (
      <Router>

        <Route path='/test' component={Test}/>

      </Router>

    )
  }

}

export default App;

I expect to not have any error messages based on the documentation

Fray

What is the jsx on <style jsx> supposed to do? That is what it is complaining about. – Deadfall

It's a Babel Plugin that allows me to use zeit/styled-jsx github.com/zeit/styled-jsx – Fray

based on the error message, have you tried <style jsx="true">? but based on the documentation you shouldn't need to do that. How did you import the library in App.js? – Thundery

Setting it to true removes the error message but makes it work not as expected. I don't import it, I just include it my package.json as plugin which is how I imagine it would work. Is there some reason React wouldn't load my babel plugin? – Fray

Perhaps the Babel plugin isn't running then? – Deadfall

That's my theory but I'm not sure how to debug that part. I've tried making .babelrc and everything but it doesn't seem to be runninng. – Fray

@EricPoretsky I just got the same error and shared below how it's fixed in my case. Maybe you can check as well even it should be a bit late for you to use but it might be helpful for future readers. – Blackhead

According to the styled jsx readme.md, this is fixed with the babel plugin styled-jsx/babel-test. However, it didn't work for me. github.com/vercel/styled-jsx#rendering-in-tests – Gritty

Answer 1

Answer to this issue is in the warning. Just convert your style's jsx attribute type from boolean to string:

from: <style jsx> {your style here} </style>

to: <style jsx="true"> {your style here} </style>

Conjugation

good man, please take your pluspoint – Charr

this gives me a lint error Type 'string' is not assignable to type 'boolean | undefined' – Lance

Do you use styled-jsx with CRA or NextJs? I forgot to mention in my answer that I didn't test it with TS. But it works fine with NextJs + Ts – Conjugation

@Conjugation I'm using Next 12 + TS (plus some other stuff. basically [email protected]) – Lance

@JohnVandivier I had this error when I was using CRA without TS. Now I'm using Next 12 + TS and I don't even have this issue anymore. Maybe you should try to ask a new question for your specific case. – Conjugation

If I do that, I lose all the CSS syntax highlighting colors. I'm using Visual Studio if that matters. – Olympic

I had this error when I was using CRA without TS. Now I'm using Next 12 + TS and I don't even have this issue anymore. Maybe you should try to ask a new question for your specific case. – Conjugation

Answer 2

OK. Since I myself spent a few hours before solving this, I hope I can help you guys who also have this problem.

To use styled-jsx with create-react-app, you need:

1. yarn add react-app-rewired customize-cra

2. Replace in package.json:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

with

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

3. Create (in root directory, next to package.json) file config-overrides.js

const { override, addBabelPlugin, addBabelPreset } = require('customize-cra');
module.exports = override(
    addBabelPlugin('styled-jsx/babel')
);

4. Create in root directory file .babelrc (it is only used when you run jest test)

{
    "plugins": ["styled-jsx/babel"]
}

5. In your index.js (or where it is you mount React into DOM), before calling ReactDOM.render(...), insert the following bit of code, taken from styled-jsx issue #560

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

It is unfortunate, but this complex configuration is a bit fickle without it.

You need steps 4 and 5 only if you use yarn build or yarn test with create-react-app.

Newt

This is taken form here where one can found equivalent for npm codedaily.io/tutorials/… – Oppilate

if you are using nextjs, by creating a .babelrc you opt out from the rust compiler -_-' – Modiolus

Answer 3

Building on @gnopor 's answer.

I wrote a custom Style component for React and Typescript.

interface Props {
    children: string;
    global ?: "true" | "false";
}

function Style({ children, global = "false" } : Props) {
  return (
    <style {...{ jsx : "true", global : global}}>
        {children}
    </style>
  )
}

export default Style

Then you can use it anywhere just like you would use the style tag with styled-jsx.

import Style from "../components/Style";

.
.
.

<Style>
  {`
    color: #000000
  `}
</Style>

Rawden

Answer 4

Just do this <style jsx="true">*your code here*</style>

Thorax

Answer 5

Even it's relatively an old question, issue still exists today and I ran into it as per screenshot;

Even it suggests to solve it via changing the line <style jsx> within declared Test component above with <style jsx="true">, then it's inevitable to get an error (at least warning from linter) as opposed to type safety checks incase strictly applied.

In order to easily solve this issue with JSX basics, it's spossible to replace the expression with <style jsx={undefined}> within provided code block as updating like below;

const Test = () => {
    return (
        <div>
        <p>test
        </p>
        <style jsx={undefined}>{`
            p {
                color: red;
            }
        `}
        </style>
        </div>)
}

Note: It might expected to solve it via jsx={true} but, in that case it still throws the same error aforementioned error above. So that this way it's neither throwing error nor lose Styled JSX's features.

Colter

But jsx={"true"} as string should solve it. – Leatherback

Yes and also jsx={undefined} does. So, it's another alternative answer resolving it @GAEfan. – Blackhead

Answer 6

I took the same error and and fixed it by giving type to teaxtare or giving initial state here how was it enter image description here

and here all is well..: enter image description here

Kristoferkristoffer

Answer 7

Use styled-components. Nested style is not supported. Look https://github.com/zeit/styled-jsx/pull/260 avoid this:

<div>
  <span>
      <style jsx>{...}</style>
  </span>
</div>

Discordancy

Could you implement the code you link to in your question and use the link only for reference? This is the best behavior to do. – Wrac