swc icon indicating copy to clipboard operation
swc copied to clipboard

Published 20 hours ago • verified publisher icon swc-project

plugin-emotion still does not work uniformly

Open DavideDaniel opened this issue 1 year ago • 3 comments

Describe the bug

This isn't a new issue. It's still https://github.com/swc-project/swc/issues/5453 Best guess is fix was done assuming there's a node_modules folder and anytime there isn't one the plugin doesn't work.

failed to get the node_modules path

Input code

No response

Config

No response

Playground link (or link to the minimal reproduction)

https://github.com/pietrop/cra-swc-emotion-plugin-example

SWC Info output

Operating System: Platform: darwin Arch: arm64 Machine Type: arm64 Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:54:05 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6031 CPU: (16 cores) Models: Apple M3 Max

Binaries:
    Node: 18.19.0
    npm: 10.2.3
    Yarn: 3.7.0
    pnpm: N/A

Relevant Packages:
    @swc/core: N/A
    @swc/helpers: N/A
    @swc/types: N/A
    typescript: 4.4.4

SWC Config:
    output: N/A
    .swcrc path: N/A

Next.js info:
    output: N/A

Expected behavior

plugin-emotion should work as documented

Actual behavior

No response

Version

@swc/[email protected]

Additional context

While I added the swc info output, it's not really accurate since we are using .swcrc from within scoped packages for the company I work at since there's an internal tool that needs to share configs across many repos. There are .swcrc but only 3 flavors at the moment, CJS, ES, and TS. This is all to work around the fact that to replace babel-cli I have to use swc-cli but unlike babel having babel.config.js we have to create multiple rc files (and set them json and use require.resolve on those).

Tested on: node: v14 v16 v18

yarn: 3.2.0-rc.2 3.4.0 3.7.0

DavideDaniel avatar Jan 20 '24 03:01 DavideDaniel

Ok I have more info to share as well as something I did to work around. I'll try to share as much as I can.

From what I can glean, the problems are related to how lifecycle scripts are being used in rust based projects like swc and yarn and pnpm. Because postinstall scripts allow downloading of binaries and those are being referenced plugins need to be listed in certain ways when we need to share references through other nodejs modules. This can also happen locally with different workspace setups but the gist of it is that there can't be a reliance on a reference just being @swc/plugin-emotion for example if it's not actually directly installed into that project.

To make things work properly I created a new package to house just the swc configs, added preferUnplugged: true in package.json for it to account for projects using newer versions of yarn along with a postinstall lifecycle script that creates a dynamic .swcrc per type of config that could be used.

The crux of the issue was that the plugin config needed to be generated as such:

const swcEmotionPluginPath = require.resolve('@swc/plugin-emotion');

...
experimental: {
      plugins: [
        [
          swcEmotionPluginPath,
          {
            sourceMap: true,
            autoLabel: 'dev-only',
            labelFormat: '[local]',
          },
        ],
      ],
    },
...

to look like this (example is with [email protected] and 2.5.110 of @swc/plugin-emotion)

...
"experimental": {
      "plugins": [
        [
          "<ABSOLUTE_PATH_TO_PROJECT>/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm",
          {
            "sourceMap": true,
            "autoLabel": "dev-only",
            "labelFormat": "[local]"
          }
        ]
      ]
    }
...

Also a note that I could not verify this worked in other repos using linking either because lifecycle scripts don't work in linked projects for yarn. Here's the relevant output from running with RUST_BACKTRACE=1:

thread '<unnamed>' panicked at 'called `Option::unwrap()` on a `None` value', /home/runner/work/plugins/plugins/packages/emotion/transform/src/lib.rs:449:48
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.270.23/src/plugin.rs:162:14:
failed to invoke plugin: failed to invoke plugin on 'Some("src/ProductPrice.js")'

Caused by:
    0: failed to invoke `ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm` as js transform plugin at ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm
    1: RuntimeError: unreachable

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: _napi_register_module_v1
   3: _napi_register_module_v1
   4: _napi_register_module_v1
   5: _napi_register_module_v1
   6: _napi_register_module_v1
   7: _napi_register_module_v1
   8: _napi_register_module_v1
   9: <unknown>
stack backtrace:
note: Some details are omitted, run with `RUST_BACKTRACE=full` for a verbose backtrace.
failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("src/ProductPrice.js")'

Caused by:
    0: failed to invoke `ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm` as js transform plugin at ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm
    1: RuntimeError: unreachable

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: _napi_register_module_v1
   3: _napi_register_module_v1
   4: _napi_register_module_v1
   5: _napi_register_module_v1
   6: _napi_register_module_v1
   7: _napi_register_module_v1
   8: _napi_register_module_v1
   9: <unknown>

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: <unknown>
Error: Failed to compile:
src/ProductPrice.js
    at initialCompilation (ABSOLUTE_PATH_FROM_COMPONENT_MONOREPO_PROJECT/.yarn/__virtual__/@swc-cli-virtual-e566e4042e/0/cache/@swc-cli-npm-0.1.63-962acd796f-bbb6bd1c74.zip/node_modules/@swc/cli/lib/swc/dir.js:163:19)
    at async dir (ABSOLUTE_PATH_FROM_COMPONENT_MONOREPO_PROJECT/.yarn/__virtual__/@swc-cli-virtual-e566e4042e/0/cache/@swc-cli-npm-0.1.63-962acd796f-bbb6bd1c74.zip/node_modules/@swc/cli/lib/swc/dir.js:228:5)
thread '<unnamed>' panicked at 'called `Option::unwrap()` on a `None` value', /home/runner/work/plugins/plugins/packages/emotion/transform/src/lib.rs:449:48
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc-0.270.23/src/plugin.rs:162:14:
failed to invoke plugin: failed to invoke plugin on 'Some("src/ProductPrice.js")'

Caused by:
    0: failed to invoke `ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm` as js transform plugin at ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm
    1: RuntimeError: unreachable

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: _napi_register_module_v1
   3: _napi_register_module_v1
   4: _napi_register_module_v1
   5: _napi_register_module_v1
   6: _napi_register_module_v1
   7: _napi_register_module_v1
   8: _napi_register_module_v1
   9: <unknown>
stack backtrace:
note: Some details are omitted, run with `RUST_BACKTRACE=full` for a verbose backtrace.
failed to handle: failed to invoke plugin: failed to invoke plugin on 'Some("src/ProductPrice.js")'

Caused by:
    0: failed to invoke `ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm` as js transform plugin at ABSOLUTE_PATH_TO_LINKED_PROJECT/.yarn/unplugged/@swc-plugin-emotion-npm-2.5.110-e5df0b711b/node_modules/@swc/plugin-emotion/swc_plugin_emotion.wasm
    1: RuntimeError: unreachable

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: _napi_register_module_v1
   3: _napi_register_module_v1
   4: _napi_register_module_v1
   5: _napi_register_module_v1
   6: _napi_register_module_v1
   7: _napi_register_module_v1
   8: _napi_register_module_v1
   9: <unknown>

Stack backtrace:
   0: _napi_register_module_v1
   1: _wasmer_vm_imported_memory32_atomic_notify
   2: <unknown>
Error: Failed to compile:
src/ProductPrice.js
    at initialCompilation (ABSOLUTE_PATH_FROM_COMPONENT_MONOREPO_PROJECT/.yarn/__virtual__/@swc-cli-virtual-e566e4042e/0/cache/@swc-cli-npm-0.1.63-962acd796f-bbb6bd1c74.zip/node_modules/@swc/cli/lib/swc/dir.js:163:19)
    at async dir (ABSOLUTE_PATH_FROM_COMPONENT_MONOREPO_PROJECT/.yarn/__virtual__/@swc-cli-virtual-e566e4042e/0/cache/@swc-cli-npm-0.1.63-962acd796f-bbb6bd1c74.zip/node_modules/@swc/cli/lib/swc/dir.js:228:5)

DavideDaniel avatar Jan 22 '24 21:01 DavideDaniel

You may need to update @swc/plugin-emotion. See https://github.com/swc-project/plugins/pull/254

kdy1 avatar Jan 23 '24 02:01 kdy1

Oh ... You also need to update @swc/core because of AST-breaking changes

kdy1 avatar Jan 23 '24 02:01 kdy1

Your config was wrong. See https://github.com/kdy1/repro-swc-8529

kdy1 avatar Mar 18 '24 03:03 kdy1

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

swc-bot avatar Apr 26 '24 12:04 swc-bot