Next.js: Error console "Warning: Unknown prop `jsx` on <style> tag. Remove this prop from the element."

Created on 22 Dec 2016 · 28Comments · Source: vercel/next.js

When I call a component that uses <style jsx> I get this written to the console (server & client)

Warning: Unknown prop `jsx` on <style> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in style (created by Unknown)
    in nav (created by Unknown)
    in Unknown (created by Unknown)
    in div (created by Unknown)
    in Unknown (created by App)
    in App

The strange thing is that the problem wasn't happened on a previous run. What I did was try out next@beta then noticed that <style jsx> wasn't working there at all. I then downgrade to stable and this problem started.

Source

babakness

Most helpful comment

Still present on 2.1.1

XavierGeerinck on 13 Apr 2017

👍6

All 28 comments

Re-opening this as https://github.com/zeit/styled-jsx/issues/51

rauchg on 22 Dec 2016

This shouldn't be happening actually, that means the transformation is not being run at all

rauchg on 22 Dec 2016

Well the styles on [email protected] do get applied (i.e., background-color: red works) and I do get this error (not sure if this is something different than transformation). On next@beta I don't recall seeing the error and the style didn't apply at all (i.e., background-color: red doesn't work) .

babakness on 22 Dec 2016

@rauchg @babakness maybe I'm wrong but I think [email protected] ships with glamor and not styled-jsx. The styles are being applied because react is rendering the style tag into the html, that inject the styles (global) into the document.

impronunciable on 22 Dec 2016

@impronunciable Oh, so why doesn't it work when using next@beta?

babakness on 22 Dec 2016

@babakness it's working for me https://pea-qsjykozetl.now.sh/ (the code is at https://pea-qsjykozetl.now.sh/_src).

Try removing the node_modules folder and installing again to see if the issue is an outdated dependency.

impronunciable on 22 Dec 2016

That's a beautiful example @impronunciable. Thank you <3

rauchg on 22 Dec 2016

I still get this error.
Using master branch and the example code.

I don't get the error using
"next": "^2.0.0-beta.1"

rcolepeterson on 25 Dec 2016

👍1

Even I am seeing this warning, I have installed next (v1.2.3) from npm though.

devdua on 25 Dec 2016

👍1

This seems to occur when I have two components in the same file (each with <style jsx>). Only the ~~1st~~ innermost style block gets transformed. Known limitation?

skidding on 30 Dec 2016

No, can you provide an example please?

rauchg on 30 Dec 2016

Dug a bit and it seems the problem happens when you have a tree of 3 components where only the root and leaf components have a <style jsx> tag, but not the middle one.

E.g. This works fine:

function C() {
  return (
    <div className="c">
      C
      <style jsx>{`
        .c {
          color: blue;
        }
      `}</style>
    </div>
  );
}

function B() {
  return (
    <div className="b">
      B
      <C/>
      <style jsx>{`
        .b {
          color: green;
        }
      `}</style>
    </div>
  );
}

export default function A() {
  return (
    <div className="a">
      A
      <B/>
      <style jsx>{`
        .a {
          color: red;
        }
      `}</style>
    </div>
  );
}

But the <style> tag from component A no longer gets transformed (along with "Unknown prop jsx on

);

package versions:
"styled-jsx": "^1.0.10",

kallada1978 on 19 Sep 2017

Was having the same issue trying to get some Next.js boilerplate set up, what fixed it for me was installing styled-jsx (npm i styled-jsx) and adding "styled-jsx/babel" to my babel plugins.

https://www.npmjs.com/package/styled-jsx

mattyfresh on 21 Sep 2017

👍1

Order matters when using in tandem with transform-react-jsx. Declare styled-jsx/babel first:

"plugins": [ "styled-jsx/babel", "transform-object-rest-spread", "transform-react-jsx" ]

ssamakar on 27 Mar 2018

Was this page helpful?

0 / 5 - 0 ratings

Next.js: Error console "Warning: Unknown prop `jsx` on <style> tag. Remove this prop from the element."

Most helpful comment

All 28 comments

Related issues