CODEWITHSUNDEEP
reactjsecmascript-6babeljsstyled-jsx
Eric Poretsky
Eric Poretsky

Reputation: 151

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

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

Upvotes: 15

Views: 12630

Answers (7)

Murat Can
Murat Can

Reputation: 3

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

Upvotes: 0

Erhan Yaşar
Erhan Yaşar

Reputation: 864

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

enter image description here

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.

enter image description here

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.

Upvotes: 0

Ali Kuria
Ali Kuria

Reputation: 11

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

Upvotes: 0

Parth
Parth

Reputation: 51

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>

Upvotes: 1

Gleb Varenov
Gleb Varenov

Reputation: 2835

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",
  1. 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')
);
  1. Create in root directory file .babelrc (it is only used when you run jest test)
{
    "plugins": ["styled-jsx/babel"]
}
  1. 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.

Upvotes: 8

Gnopor
Gnopor

Reputation: 829

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>

Upvotes: 9

Juan Silup&#250; Maza
Juan Silup&#250; Maza

Reputation: 961

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>

Upvotes: -2

Related Questions