plugin-styled-components crashes with 'Error while importing "env"."__get_transform_plugin_config": unknown import.'

[develra]

Trying to use the styled-component plugin to get display names on dev. here is my .swcrc

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dynamicImport": true
    },
    "experimental": {
      "plugins": [
        [
          "@swc/plugin-styled-components",
          {
            "displayName": true
          }
        ]
      ]
    }
  }
}

I have swc/core 1.2.215 and latest for @swc/plugin-styled-components.

When I try to run it, I get:

thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/project/typescript_index.ts")'

Caused by:
    0: Failed to create plugin instance
    1: Error while importing "env"."__get_transform_plugin_config": unknown import. Expected Function(FunctionType { params: [I32], results: [I32] })', crates/swc/src/plugin.rs:273:14
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'failed to invoke plugin: failed to invoke plugin on 'Some("/project/typescript_index.ts")'

[kwonoj]

Try latest @swc/core. There are some breaking changes we are making beforfe we're out of experimental stage, which causes these kind of imcompatbility time to time.

[develra]

Thanks! I get a different error with the latest swc:

thread '<unnamed>' panicked at 'invalid utf8 character detected: FromUtf8Error { bytes: [102, ..... (a very long bytestring),

[kwonoj]

That sounds like there's some char in input need to be checked.

[develra]

Any additional info/debugging I can provide? Understood this is still experimental/under development.

[kwonoj]

char in input need to be checked

We need input src can repro to dig further.

[develra]

Unfortunately on a private project, but I'll see if I can isolate a small project to repro - hopefully later today.

[develra]

The UTF8 error is actually an issue with the latest swc/core version - I'll wait for something stable for core and report back about the plugin. Thanks!

[kwonoj]

The UTF8 error is actually an issue with the latest swc/core version

Mind file an issue in swc/core with reproducible input? that'll make fix easier.

[theogravity]

I have the same issue. Unfortunately, I cannot provide my index.tsx as it's private.

• I am using it via swc-loader via webpack
• I start the app via webpack serve --config $PWD/webpack/config.js
• am not using babel-loader
• I do have deps that reference other packages via "<module_name>": "link:../packages/<package_name> in my package.json
• I have verified the plugin is definitely installed in node_modules

Versions:

    "@swc/core": "^1.2.224",
    "@swc/plugin-styled-components": "^1.2.0",
    "swc-loader": "^0.2.3",
    "webpack": "^5.72.0",

• MacOS Monterey on Intel
• Node 16.15.1

webpack rule:

      {
        test: /\.(ts|tsx|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          // `.swcrc` can be used to configure swc
          loader: 'swc-loader',
        },
      },

This is my .swcrc file:

[
  {
    "test": ".tsx?$",
    "sourceMaps": true,
    "jsc": {
      "experimental": {
        "plugins": [
          [
            "@swc/plugin-styled-components",
            {
              "displayName": true,
              "ssr": false
            }
          ]
        ]
      },
      "parser": {
        "syntax": "typescript",
        "tsx": true,
        "decorators": true
      },
      "target": "es2019",
      "transform": {
        "decoratorMetadata": true,
        "react": {
          "refresh": true
        }
      }
    }
  },
  {
    "test": ".jsx?$",
    "sourceMaps": true,
    "jsc": {
      "experimental": {
        "plugins": [
          [
            "@swc/plugin-styled-components",
            {
              "displayName": true,
              "ssr": false
            }
          ]
        ]
      },
      "parser": {
        "syntax": "ecmascript",
        "jsx": true,
        "decorators": true
      },
      "target": "es2019",
      "transform": {
        "decoratorMetadata": true,
        "react": {
          "refresh": true
        }
      }
    }
  }
]

Output:

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/swc-loader/src/index.js):
Error: failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("/Users/theo/projects/monarch/frontend/src/index.tsx")'

Caused by:
    0: failed to invoke `@swc/plugin-styled-components` as js transform plugin at node_modules/@swc/plugin-styled-components/swc_plugin_styled_components.wasm
    1: RuntimeError: unreachable
           at __rust_start_panic (<module>[4025]:0x13847c)
           at rust_panic (<module>[4017]:0x1381fc)
           at std::panicking::rust_panic_with_hook::h6f835c06e363bae7 (<module>[4016]:0x138179)
           at std::panicking::begin_panic_handler::{{closure}}::hde80e0a1ba88c211 (<module>[4000]:0x13740f)
           at std::sys_common::backtrace::__rust_end_short_backtrace::hdcc677413d02e608 (<module>[3999]:0x13734e)
           at rust_begin_unwind (<module>[4011]:0x137aa4)
           at core::panicking::panic_fmt::hfa8eb99d625b4b7c (<module>[4182]:0x14c0d4)
           at core::result::unwrap_failed::hdc7db882e306e849 (<module>[4215]:0x14d53d)
           at rkyv::impls::core::<impl rkyv::DeserializeUnsized<[U],D> for [T]>::deserialize_unsized::h601b7b9c1d99bd5b (<module>[30]:0x732b)
           at swc_common::plugin::serialized::PluginSerializedBytes::deserialize::h200826fe06144e4f (<module>[28]:0x5b4f)
           at swc_common::plugin::serialized::deserialize_from_ptr::hdbec0bb0acdac71d (<module>[27]:0x5967)
           at __transform_plugin_process_impl (<module>[361]:0x69988)
           at __transform_plugin_process_impl.command_export (<module>[4311]:0x153a0c)
    2: unreachable

Stack backtrace:
   0: _wasmer_vm_raise_trap
   1: _wasmer_vm_raise_trap
   2: _wasmer_vm_raise_trap
   3: _napi_register_module_v1
   4: <unknown>
   5: <unknown>
   6: <unknown>
   7: <unknown>
   8: <unknown>
   9: <unknown>
  10: <unknown>
  11: <unknown>
  12: <unknown>
  13: <unknown>
  14: _worker
  15: __pthread_start

Stack backtrace:
   0: _wasmer_vm_raise_trap
   1: _wasmer_vm_raise_trap
   2: _wasmer_vm_raise_trap
   3: <unknown>
   4: <unknown>
   5: <unknown>
   6: <unknown>
   7: _worker
   8: __pthread_start

[kdy1]

Can you try v1.2.2?

[theogravity]

@kdy1 Seems to be worse as I don't have any tracing info to provide now

    "@swc/core": "^1.2.226",
    "@swc/plugin-styled-components": "^1.2.2",
    "swc-loader": "^0.2.3",

theo@theo-switchboard frontend % RUST_BACKTRACE=1 yarn start yarn run v1.22.19 $ webpack serve --config $PWD/webpack/main.config.js --progress [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:3000/ [webpack-dev-server] On Your Network (IPv4): http://172.16.2.83:3000/ [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:3000/ [webpack-dev-server] Content not from webpack is served from '/Users/theo/projects/monarch/frontend/build' directory [webpack-dev-server] 404s will fallback to '/index.html' error Command failed with signal "SIGBUS". info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[kdy1]

I think it will now work

[theogravity]

it worked! thanks