styled-jsx warning in the browser | Blitz.js | Page 1

faint berry Oct 5, 2022, 6:42 AM

#

Hey there,

I've migrated our app to v2 and now I am getting warnings in the console, whenever styled-jsx syntax <style jsx> is being used in a component (e.g. Form.tsx) . I've created a new vanilla Blitz-v2 project and I do get the same warning there. Do you have any ideas to fix this? (Next and React deps are up-to-date)

Warning:

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

And

Warning: Text content did not match. Server: "
            .form &gt; * + * {
              margin-top: 1rem;
            }
          " Client: "
            .form > * + * {
              margin-top: 1rem;
            }
          "

Edit: It looks like the babel preset is not working as it should?

proud aurora Oct 5, 2022, 3:03 PM

#

This was a problem in the earlier version 2 of blitz but I guess if you use v2 beta 4 this should not be a problem.

faint berry Oct 5, 2022, 4:53 PM

#

Yeah, I saw that issue, but my dependencies are up-to-date and same thing happens when I create a fresh app with blitz new.

Blitz version: 2.0.0-beta.4 (global)
Blitz version: 2.0.0-beta.4 (local)
macOS Monterey | darwin-x64 | Node: v16.17.1


 Package manager: npm

  System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 17.41 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.4 => 2.0.0-beta.4 
    @blitzjs/next: 2.0.0-beta.4 => 2.0.0-beta.4 
    @blitzjs/rpc: 2.0.0-beta.4 => 2.0.0-beta.4 
    @prisma/client: 4.4.0 => 4.4.0 
    blitz: 2.0.0-beta.4 => 2.0.0-beta.4 
    next: 12.3.1 => 12.3.1 
    prisma: 4.4.0 => 4.4.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ~4.5 => 4.5.5

knotty canyon Oct 8, 2022, 12:36 PM

#

@solar sail should we still be having this issue?

solar sail Oct 10, 2022, 4:44 AM

#

I belive it has something to do with swc. More here: https://github.com/blitz-js/blitz/issues/3637#issuecomment-1209354952

GitHub

Toolkit: Authenticate and RedirectTo not working as expected · Issu...

What is the problem? Using the latest toolkit .60. Home.authenticate = { redirectTo: Routes.LoginPage() } Doesn't seem to do anything. Have confirmed nothing in the application Tab in dev t...

faint berry Oct 10, 2022, 6:47 AM

#

I'll look into it, thanks for the hint!

faint berry Oct 10, 2022, 11:47 AM

#

Weird that it worked for @gcavanune after updating to 18.2.0, because for me it does not work even on a fresh Blitz installation. I will try to create a fresh next application and test it there....

Result: no issues when using <style jsx> or <style global> in a fresh next app. It installed [email protected] but [email protected]... Updated to react 18.2.0 -> still works. Same TS version same tsconfig, same node and npm version, same next and same react version. Only differences are the Blitz wrappers. Does blitz interfer with SWC somehow?

solar sail Oct 11, 2022, 7:18 AM

#

Does blitz interfer with SWC somehow?
It shouldn't, but maybe there's a bug somewhere

#styled-jsx warning in the browser