Adding the plugin breaks compilation.

[vsviridov]

A fresh generic project with Vite, Effector and Solid, followed the instructions for configuring plugin for this environment from the README (under the Bundlers section).

Application fails in runtime with a syntax error.

Fragment of the emitted code w/o plugin:

import { App } from "/src/App.tsx";
attachDevtoolsOverlay({
    defaultOpen: true,
    noPadding: true
});
const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
    throw new Error("Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?");
}


//
render(()=>_$createComponent(App, {}), root);
//



if (import.meta.hot) {
    _$$decline("vite", import.meta.hot);
    import.meta.hot.accept();
}

and now with the plugin enabled

import { App } from "/src/App.tsx";
attachDevtoolsOverlay({
    defaultOpen: true,
    noPadding: true
});
const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
    throw new Error("Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got mispelled?");
}


//
render(<>()=>{}, root);
//



if (import.meta.hot) {
    _$$decline("vite", import.meta.hot);
    import.meta.hot.accept();
}

()=>_$createComponent(App, {}) gets transformed into <>()=>{} in the render call, and the app fails with a SyntaxError

Vite config

import { resolve } from "node:path";
import devtools from "solid-devtools/vite";
import swc from "unplugin-swc";
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

export default defineConfig({
  plugins: [
    solidPlugin(),
    swc.vite({
      jsc: {
        // experimental: { plugins: [["@effector/swc-plugin", {}]] },
      },
    }),
    devtools({ autoname: true }),
  ],
  server: {
    port: 3000,
    proxy: {
        '/api': {
            target: 'http://localhost:4200',
        }
    }
  },
  build: {
    target: "esnext",
    outDir: "public",
  },
  resolve: {
    alias: [{ find: "@", replacement: resolve(__dirname, "src") }],
  },
});

Dependencies

❯ pnpm ls
Legend: production dependency, optional only, dev only

[email protected] /opt/wix-platform/frontend

dependencies:
@farfetched/core 0.7.2
@feature-sliced/eslint-config 0.1.0-beta.6
atomic-router-solid 0.8.0
history 5.3.0
@farfetched/runtypes 0.7.2
@solid-devtools/overlay 0.6.0
eslint-plugin-boundaries 3.1.0
runtypes 6.6.0
@farfetched/solid 0.7.2
atomic-router 0.8.0
eslint-plugin-import 2.27.5
unplugin-swc 1.3.2

devDependencies:
@effector/swc-plugin 0.0.9
@swc/core 1.3.39
effector 22.5.2
eslint-plugin-solid 0.11.0
typescript 5.0.0-beta
@hope-ui/solid 0.6.7
@types/node 18.15.0
effector-solid 0.22.7
solid-devtools 0.26.0
vite 4.1.4
@rollup/plugin-babel 6.0.3
@typescript-eslint/eslint-plugin 5.54.
eslint 8.36.0
solid-js 1.6.13
vite-plugin-solid 2.6.1
@stitches/core 1.2.8
@typescript-eslint/parser 5.54.1
eslint-plugin-effector 0.10.3
solid-transition-group 0.0.13

[sergeysova]

@vsviridov Can you reproduce the case on stackblitz?
We have a template in the Frontend section

[vsviridov]

Can you give me a link for the stackblitz to clone from? Tried setting it up myself I have trouble with stackblitz not being able to find swc native bindings...

[sergeysova]

https://stackblitz.com/

https://github.com/effector/vite-react-template

[vsviridov]

Oh, i thought you have a specific swc template. It looks like it currently doesn't work with stackblitz due to native bindings not being able to be loaded.

…

On Mon, Mar 13, 2023, 10:55 Sova ***@***.***> wrote: https://stackblitz.com/ [image: image] <https://user-images.githubusercontent.com/5620073/224787114-75da659e-9cce-47c4-97d8-e9d773d9c294.png> https://github.com/effector/vite-react-template — Reply to this email directly, view it on GitHub <https://github.com/effector/swc-plugin/issues/31#issuecomment-1466631750>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABWD5AWALWUCPYUJ457HPTW35NPFANCNFSM6AAAAAAVXVMLWU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[sergeysova]

@vsviridov You can clone repository by clicking "Use this template"

https://github.com/effector/vite-react-template

[vsviridov]

But this repository is not configured for SWC. I'll try to find time to extract it into a gist.

[sergeysova]

You can clone it and modify for your wishes.

[vsviridov]

Replicated in glitch.com, SWC actually runs there.

Code
Preview

[vsviridov]

Maybe it's due to the fact that unplugin-swc has an outdated dependency on [email protected], which expects vite@^2.3.0, but I'm currently on ^4.1.1.

[timofei-iatsenko]

This is a bug in the swc-core, Rkyv library used by it sometimes fall into incorrect desirialization of data. That was recently fixed by swc team (they updated rkyv and enabled strict mode).

Since the swc plugins is not backward compatible, effector swc plugin should be build with latest swc-core and host project also should use latest version of both

[timofei-iatsenko]

Found the related issue: swc-project/swc#7209