unplugin / unplugin-swc Goto Github PK

Describe the bug

The support for custom .swcrc file does not support decorators.

I have created a sample repo based on this repo which can be found at https://github.com/ValentinGurkov/unplugin-swc-decorator-error.

I changed the build step to build via tsc since tsup does not support decorators.

Then I added an extra class with decorator metadata to test/fixtures/custom-swcrc/index.tsx. I used the package class-validator for an example decorator since I found this the quickest way to create an example.

import { IsDefined } from "class-validator";

class User {
  @IsDefined()
  name!: string;
}

If you run the tests, the custom swcrc will fail with:

FAIL  test/index.test.ts > custom swcrc
Error:
  × Unexpected token `@`. Expected identifier, string literal, numeric literal or [ for the computed key
   ╭─[D:\Projects\unplugin-swc-main\test\fixtures\custom-swcrc\index.tsx:2:1]
 2 │ import { IsDefined } from "class-validator";
 3 │
 4 │ class User {
 5 │   @IsDefined()
   ·   ─
 6 │   name!: string;
 7 │ }
   ╰────


Caused by:
    Syntax Error

I managed to modify the src/index.ts to get things to compile but am I no expert on this, neither I understand the reason completely.

But it has something to do with passing the empty jsc object to transform.

If you navigate to src/index.ts, comment the code from line 90 to 95:

const result = await transform(code, {
  filename: id,
  sourceMaps: true,
  ...options,
  jsc,
})

-const result = await transform(code, {
-  filename: id,
-  sourceMaps: true,
-  ...options,
-  jsc,
-})

+//const result = await transform(code, {
+//  filename: id,
+//  sourceMaps: true,
+//  ...options,
+//  jsc,
+//})

And remove the comments from the code from line 97 to line 113, so it is active:

let result
if (tsconfigFile === false) { 
  const newJsc: any = JSON.parse(readFileSync(path.r
  result = await transform(code, {
    filename: id,
    sourceMaps: true,
    ...options,
    jsc: newJsc,
  })
} else {
  result = await transform(code, {
    filename: id,
    sourceMaps: true,
    ...options,
    jsc,
  })
}

-//let result
-//if (tsconfigFile === false) { 
-//  const newJsc: any = JSON.parse(readFileSync(path.r
-//  result = await transform(code, {
-//    filename: id,
-//    sourceMaps: true,
-//    ...options,
-//    jsc: newJsc,
-//  })
-//} else {
-//  result = await transform(code, {
-//    filename: id,
-//    sourceMaps: true,
-//    ...options,
-//    jsc,
-//  })
-//}

+let result
+if (tsconfigFile === false) { 
+  const newJsc: any = JSON.parse(readFileSync(path.r
+  result = await transform(code, {
+    filename: id,
+    sourceMaps: true,
+    ...options,
+    jsc: newJsc,
+  })
+} else {
+  result = await transform(code, {
+    filename: id,
+    sourceMaps: true,
+    ...options,
+    jsc,
+  })
+}

And run the tests, all tests will pass.

The way I've adjusted things in a really dirty way so to read the .swcrc file and pass all settings this way.

I've tried not sending the jsc argument at all and on this repository the test still failed. On a very large custom repository, which I can't share, I had commented the jsc argument and everything seemed to work, so I expected this was the solution but it did not work here.

I want to share my findings here, hopefully someone with more understanding on SWC transformations can help out and we can design a solution that supports decorators when using .swcrc instead of tsconfig.json

Reproduction

https://github.com/ValentinGurkov/unplugin-swc-decorator-error

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
    Memory: 9.24 GB / 31.21 GB
  Binaries:
    Node: 20.11.0 - C:\program files\nodejs\node.EXE
    npm: 10.2.4 - C:\program files\nodejs\npm.CMD
    pnpm: 8.15.3 - C:\program files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Hello, thanks so much for creating this library! Fills a big gap within Vite/Vitest community.
I'm getting this error:

Error: Dynamic require of "path" is not supported
    at file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:29:9
    at node_modules/.pnpm/[email protected]/node_modules/picomatch/lib/picomatch.js (file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:1377:17)
    at __require2 (file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:47:50)
    at node_modules/.pnpm/[email protected]/node_modules/picomatch/index.js (file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:1522:22)
    at __require2 (file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:47:50)
    at file:///Users/stickb/Code/niwc-pac/cosmos/node_modules/.pnpm/[email protected]_g6o72fkdx62msvhc7bd7opzgc4/node_modules/unplugin-swc/dist/index.mjs:1583:32
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)

Any ideas what I'm doing wrong?

vite.config.ts

import { defineConfig } from "vite";
import swc from "unplugin-swc";

export default defineConfig({
  plugins: [swc.vite(), swc.rollup()],
});

tsconfig.json

{
  "compilerOptions": {
"target": "esnext",
    "module": "ESNext",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false,
    "noEmit": true,
  },
  "ts-node": {
    "swc": true,
    "esm": true
  },
}

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@types/node, node, pnpm, rollup, typescript)
• chore(deps): update dependency @swc/core to ^1.4.13
• chore(deps): update dependency vitest to v1
• chore(deps): lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Very cool package!

I'm running into the above error and it looks like some dev dependencies need to be moved to the dependencies.

@rollup/pluginutils

https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/src/index.ts#L2
https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/package.json#L24

path-exists

https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/src/resolve.ts#L3
https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/package.json#L30

jsonc-parser

https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/src/tsconfig.ts#L3
https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/package.json#L29

joycon

https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/src/tsconfig.ts#L4
https://github.com/egoist/unplugin-swc/blob/d4f229b6788a9beda487b155d6ecc9f187867b63/package.json#L28

Node.js version: 14.16.1

error when starting dev server:
TypeError: swc.vite is not a function
at file:///Users/shenhaoliang/Desktop/jgy/workbench/vite.config.ts.js?t=1649945077486:62:9
at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
at async loadConfigFromFile (/Users/shenhaoliang/Desktop/jgy/workbench/node_modules/vite/dist/node/chunks/dep-611778e0.js:61416:31)
at async resolveConfig (/Users/shenhaoliang/Desktop/jgy/workbench/node_modules/vite/dist/node/chunks/dep-611778e0.js:60962:28)
at async createServer (/Users/shenhaoliang/Desktop/jgy/workbench/node_modules/vite/dist/node/chunks/dep-611778e0.js:58813:20)
at async CAC. (/Users/shenhaoliang/Desktop/jgy/workbench/node_modules/vite/dist/node/cli.js:688:24)

version: unplugin-swc 1.3.0

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Issue

I want to include some packages in swc compilation process, namely bootstrap package files. The problem is that joycon package, trying to load tsconfig.json file, will filter out any path that includes node_modules string (joycon code). When I try to run rollup script, it'll result with an error:

TypeError: Cannot read properties of undefined (reading 'compilerOptions')
    at getCompilerOptions (/home/user/project/node_modules/unplugin-swc/dist/index.js:2553:15)
    at async Object.transform (/home/user/project/node_modules/unplugin-swc/dist/index.js:2566:61)
    at async ModuleLoader.addModuleSource (/home/user/project/node_modules/rollup/dist/shared/rollup.js:22138:30)

The config:

const swc = require('unplugin-swc').default;

rollup.rollup({
  plugins: [
    swc.rollup({
      exclude: /node_modules\/(?!(bootstrap)\/).*/,
    })
  ]
})

Expected result

I can imagine 2 ways of handling the issue:

1. Show an error if user tries to compile file with node_modules within the path
2. Let user compile the file without an error

Workaround

Defining tsconfig.json path as an absolute path resolves the issue:

const swc = require('unplugin-swc').default;
const path = require('path');

rollup.rollup({
  plugins: [
    swc.rollup({
      exclude: /node_modules\/(?!(bootstrap)\/).*/,
      tsconfigPath: path.resolve(__dirname, 'tsconfig.json')
    })
  ]
})

Let me know if I can help, I can contribute to the repo but I think it's best to decide on the path first.

I'm using single .swcrc file for both test with vitest and build too. For my build, I've added "exclude": ["^.+\\.test\\.ts$"] in the .swcrc file to not build test files inside my src folder and in my vitest config, I'm using exclude: [] but it doesn't overrides the .swcrc one and throws

 FAIL  src/util/sanitize.test.ts [ src/util/sanitize.test.ts ]
Error: cannot process file because it's ignored by .swcrc

I've checked the sourcecode and seems like u r handling exclude option in js part only https://github.com/egoist/unplugin-swc/blob/8688cf3c8e04a7f0c6e5b908e753be08b4f56042/src/index.ts#L20C9-L20C9 and not passing to swc. If the fix is just passing this option to swc, I can create a pr to do it

Any plans to upgrade the peerDependency to vite 4? This would be useful for Nest.js apps trying to use vite and vitest because esbuild doesn't support emitDecoratorMetadata yet.

If anyone has a workaround to make this plugin work with vite 4, please let me know 🙏 Thanks!

Clear and concise description of the problem

When env is set in SWC configuration and compilerOptions.target is set in tsconfig, SWC will produce the following error:
Error: `env` and `jsc.target` cannot be used together

Suggested solution

Do not set jsc.target to compilerOptions.target if env option is provided.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

When you set your compilerOptions.target: "ESNext" in tsconfig.ts file. This will throw an error:

6:30:56 AM [vite] Internal server error: unknown variant `ESNext`, expected one of `es3`, `es5`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020`, `es2021`, `es2022`, `esnext` at line 1 column 241
  Plugin: swc
  File: .../src/main.ts

6:30:56 AM [vite] Pre-transform error: unknown variant `ESNext`, expected one of `es3`, `es5`, `es2015`, `es2016`, `es2017`, `es2018`, `es2019`, `es2020`, `es2021`, `es2022`, `esnext` at line 1 column 241

My vite.config.ts

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import swc from 'unplugin-swc';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		swc.vite(),
		svelte({
			preprocess: sveltePreprocess({
				// Enable strict prop checking
				strictProps: false,
			}),
		}),
	],
})

I am expecting "ESNext" and "esnext" should be the same.

Reproduction

https://stackblitz.com/edit/vitejs-vite-43qo9n?file=vite.config.ts

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 7.59 GB / 31.89 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.77)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[vite:worker] Unexpected token (8:23)
file: D:/workspace/kdocs/@kso_image-viewer/src/preload/preload.worker.ts?worker&inline:8:23
SyntaxError: Unexpected token (8:23)
at Parser.pp$5.raise (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:19547:13)
at Parser.pp.unexpected (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:16872:8)
at Parser.pp.expect (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:16866:26)
at Parser.pp$4.parseParenAndDistinguishExpression (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:19008:36)
at Parser.pp$4.parseExprAtom (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18881:41)
at Parser.pp$4.parseExprSubscripts (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18714:19)
at Parser.pp$4.parseMaybeUnary (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18680:17)
at Parser.pp$4.parseExprOps (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18613:19)
at Parser.pp$4.parseMaybeConditional (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18596:19)
at Parser.pp$4.parseMaybeAssign (D:\workspace\kdocs@kso_image-viewer\node_modules\rollup\dist\shared\rollup.js:18564:19)

Clear and concise description of the problem

Hi. Master. May I know whether it is possible to support use in webpack?

Suggested solution

no

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.