styled-jsx throws console error

[samrocksc]

console error when styled-jsx is rendering jsx

Overview

After switching to swc and next12, jest throws the following error

Error Message:

  console.error
    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()}.
        at style
        at /Users/github/project/redacted/Component.tsx:30:16

      at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (../../node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateProperty$1 (../../node_modules/react-dom/cjs/react-dom.development.js:3521:9)
      at warnUnknownProperties (../../node_modules/react-dom/cjs/react-dom.development.js:3559:21)
      at validateProperties$2 (../../node_modules/react-dom/cjs/react-dom.development.js:3583:3)
      at validatePropertiesInDevelopment (../../node_modules/react-dom/cjs/react-dom.development.js:8765:5)
      at setInitialProperties (../../node_modules/react-dom/cjs/react-dom.development.js:9041:5)

Expected Behavior:

I'm not really sure what the jsx behavior should be here to be quite honest:

• When i simply use <style> instead of <style jsx> it doesn't affect tests any longer; however I'm not sure how that will affect the rendering in tests.

Current jest.config.ts:

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": "@swc/jest",
  },
  rootDir: "./",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  silent: true,
};

Current jest.setup.ts:

require("reflect-metadata");
/* eslint-disable @typescript-eslint/no-var-requires */
const Enzyme = require("enzyme");
const Adapter = require("@wojtekmaj/enzyme-adapter-react-17");

HTMLCanvasElement.prototype.getContext = () => {
  // return whatever getContext has to return
};

Enzyme.configure({ adapter: new Adapter() });

Perhaps I am posting the bug in the wrong forum though. The ideal goal here would probably be to not have the error message.

[kdy1]

You need to use https://www.npmjs.com/package/@swc/plugin-styled-jsx

[kdy1]

Closing as stale