Jest tests failing/hanging when styled-components plugin is enabled

[nickskotny]

With the styled-components plugin enabled and using @swc-jest, I'm seeing my tests hang in our CI pipeline. The failures seem inconsistent, sometimes with no output, sometimes they will just hang until the pipeline times out. WIthout the plugin enabled, tests pass as expected.

I updated all of our snapshots which seem to appropriately add the displayName.

These are the only types of output I was able to get from any of the runs while running jest with the --coverage flag in CI.

Test suite failed to run
    failed to handle: range end index 12150176 out of range for slice of length 532448

    Stack backtrace:
       0: <unknown>
       1: <unknown>
       2: _ZN6v8impl12_GLOBAL__N_123FunctionCallbackWrapper6InvokeERKN2v820FunctionCallbackInfoINS2_5ValueEEE
       3: _ZN2v88internal12_GLOBAL__N_119HandleApiCallHelperILb0EEENS0_11MaybeHandleINS0_6ObjectEEEPNS0_7IsolateENS0_6HandleINS0_10HeapObjectEEESA_NS8_INS0_20FunctionTemplateInfoEEENS8_IS4_EENS0_16BuiltinArgumentsE
       4: _ZN2v88internal21Builtin_HandleApiCallEiPmPNS0_7IsolateE
      at Compiler.transformSync (../../../node_modules/@swc/core/index.js:137:25)
      at transformSync (../../../node_modules/@swc/core/index.js:217:21)
      at Object.process (../../../node_modules/@swc/jest/index.js:55:45)
      at ScriptTransformer.transformSource (../../../node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (../../../node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (../../../node_modules/@jest/transform/build/ScriptTransformer.js:822:19)

thread '<unnamed>' panicked at 'range end index 12150176 out of range for slice of length 7811040', library/core/src/slice/index.rs:72:5
stack backtrace:

.swcrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "jsx": true,
      "tsx": true,
      "dynamicImport": false,
      "privateMethod": false,
      "functionBind": false,
      "exportDefaultFrom": false,
      "exportNamespaceFrom": false,
      "decorators": false,
      "decoratorsBeforeExport": false,
      "topLevelAwait": false,
      "importMeta": false
    },
    "experimental": {
      "plugins": [["@swc/plugin-styled-components", { "displayName": true }]]
    },
    "transform": null,
    "target": "es2015",
    "loose": false,
    "externalHelpers": false,
    "keepClassNames": false
  }
}

swc/dependency versions:

  "@swc/cli": "0.1.57",
  "@swc/core": "1.2.172",
  "@swc/jest": "0.2.20",
  "@swc/plugin-styled-components": "0.7.0",

Any thoughts on how/why this behavior could be tied to the styled-components plugin?

[kdy1]

cc @kwonoj

[kwonoj]

Do we have small repro? Need to dig if plugin itself have issues or host have problems.

[nickskotny]

So far I've only been running into this in our CI environment when the plugin is enabled, not locally. So unfortunately don't have a quick way to reproduce this. Is there any other info I could provide that would be helpful?

[kwonoj]

So this is not 100% reproducible as well as we don't have local repro?

Unfortunately that'll make investigation exceptionally difficult.

[kwonoj]

Can we confirm if this is same? #42 (comment)

[SimonGodefroid]

I have a similar case with this error, I'm using swc + craco + styled-components plugin. The tests run fine on whichever test does not render a component (e.g. unit tests on helpers) but as soon as it reaches a test that renders a component containing some styled-components. Now I can't tell whether it's the template literals that cause the issue or the import.

    TypeError: _macro.css is not a function

      1 | import styled, { css } from 'styled-components/macro';
      2 |
    > 3 | const activeLink = css`

[kdy1]

Closing as not actionable as there's not enough information to reproduce