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

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>

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.

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>

Answer 4

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

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.

Answer 6

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>