Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Segmentation fault in a fresh React project if using plugins #190

Open
hizkifw opened this issue Jan 24, 2024 · 15 comments
Open

Segmentation fault in a fresh React project if using plugins #190

hizkifw opened this issue Jan 24, 2024 · 15 comments

Comments

@hizkifw
Copy link

hizkifw commented Jan 24, 2024

When I try to create a new Vite project using yarn create vite and selecting React with Typescript + SWC, I can perform yarn build just fine, however when I yarn add -D @swc/plugin-emotion and update my Vite config, the build fails with a segmentation fault.

I also get the same result with @swc/plugin-noop and @swc/plugin-styled-components.

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react({
    plugins: [['@swc/plugin-emotion', {}]]
  })],
})

package.json

{
  "name": "testing1234",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@swc/plugin-emotion": "^2.5.115",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

Running yarn build gets stuck at this step:

-> % yarn build
yarn run v1.22.21
$ tsc && vite build
vite v5.0.12 building for production...
transforming (1) index.html

After some time, it crashes with SIGSEGV

-> % yarn build
yarn run v1.22.21
$ tsc && vite build
vite v5.0.12 building for production...
error Command failed with signal "SIGSEGV".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm running Arch Linux, node v20.9.0.

@hizkifw hizkifw changed the title Segmentation fault in a fresh project if using @swc/plugin-emotion Segmentation fault in a fresh project if using any plugin Jan 24, 2024
@hizkifw hizkifw changed the title Segmentation fault in a fresh project if using any plugin Segmentation fault in a fresh React project if using plugins Jan 24, 2024
@ArnaudBarre
Copy link
Member

This is probably a regression on SWC. Can you check by using a fixed version of SWC 1.3.104?

@hizkifw
Copy link
Author

hizkifw commented Jan 24, 2024

I've tried upgrading to 1.3.104, 1.3.105, and the latest nightly, and still seeing the same behavior.

yarn add -D @swc/[email protected]

@ikim23
Copy link

ikim23 commented Jan 24, 2024

I have experienced the same issue with the @swc/plugin-styled-components.
Going down to the @swc/[email protected] fixed it for me.

@hizkifw
Copy link
Author

hizkifw commented Jan 25, 2024

Looks like downgrading to @swc/[email protected] fixed it for me as well.

@Codex-
Copy link

Codex- commented Jan 26, 2024

@swc/plugin-emotion latest is build with the newest swc_core crate. As a result it requires @swc/core@1.3.106

See https://swc.rs/docs/plugin/selecting-swc-core#swc_core

@Codex-
Copy link

Codex- commented Jan 29, 2024

Looks like the package for the vite swc plugin has been bumped: https://github.com/vitejs/vite-plugin-react-swc/blob/main/package.json#L17 (needs another bump already)

I wonder if it would make sense to have @swc/core as a peer dep instead so it's easier to keep up with the upstream breaking changes

@ArnaudBarre
Copy link
Member

ArnaudBarre commented Jan 29, 2024

Package manager allows to specify an indirect dependency (resolve or something like that).
What I should do is add this plugin to th SWC ecosystem so we have less regressions

Note: While peer dep will be cleaner in theory, the idea of this plugin and the babel one is too keep them close enough so that switching from one to the other is just adding -swc and updating the import the bite config. This is even more important for React meta framework building on top, where they want there users choose between one or the other

@Codex-
Copy link

Codex- commented Jan 29, 2024

That's reasonable

Consumers of this plugin could also choose to override the @swc/core version too I suppose if they need bleeding edge

@DiFuks
Copy link

DiFuks commented Feb 2, 2024

I encountered a similar problem related to upgrading @swc/core to version 1.3.106. I am developing an external library and cannot force all consumers to specify resolutions in package.json :( It would be nice if @vitejs/plugin-react-swc allowed passing the required version of the swc instance in parameters. As it is done, for example, here.

@ArnaudBarre
Copy link
Member

ArnaudBarre commented Feb 2, 2024

@DiFuks I don't understand your use case, how does your library require to run SWC for consumers?

@DiFuks
Copy link

DiFuks commented Feb 7, 2024

@ArnaudBarre

I'm developing a library-bundler based on Vite, which is used for building frontends within our company. It has the following dependencies:

		"@swc/plugin-styled-components": "1.5.116",
		"@vitejs/plugin-react-swc": "3.5.0",

We use fixed versions specifically because we want to strictly control the package versions to avoid breaking changes. However, since @vitejs/plugin-react-swc uses @swc/core as a dependency with an unfixed version, there can be a situation where @swc/core upgrades its version while the @swc/plugin-styled-components plugin remains outdated. We've solved this issue by specifying the version like this:

-		"@swc/plugin-styled-components": "1.5.116",
+		"@swc/plugin-styled-components": "^1.5.116",
		"@vitejs/plugin-react-swc": "3.5.0",

But, we still want the ability to control the version of @swc/core by passing its instance into the @vitejs/plugin-react-swc plugin.

@ArnaudBarre
Copy link
Member

ArnaudBarre commented Feb 7, 2024

Yeah but in that case you will download two version of SWC. I suppose your template enforce a package manager, and in that case I think using https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides or equivalent is a better solution

@DiFuks
Copy link

DiFuks commented Feb 7, 2024

I don't see anything wrong with loading 2 versions of @swc/core - one just won't be used. Library users install it with a simple command yarn add @my-org/frontend-scripts. In this case, they will have to manually add overrides/resolutions to each project (and there are hundreds of them). Even if they do this once, when running yarn up @my-org/frontend-scripts (where, for example, the swc plugin has been updated), they will have to change the version in overrides/resolutions to the one that is currently supported by @my-org/frontend-scripts. That is, I can't control the version at the library level

@ArnaudBarre
Copy link
Member

Ok I see. I personally don't advice to use Vite as a library builder. It's in freeze mode. If you still want to build in that direction you can open a feature request with a summary of the need and I can bring this up to a team meeting

@DiFuks
Copy link

DiFuks commented Feb 7, 2024

Perhaps you misunderstood me. We don't use Vite for library builds. It's used as part of our internal library for building Vite-based applications. But alright. I got you - I'll bring up a feature request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants