react-redux used by decorators

[wangcongyi]

Describe the bug

import React from 'react'
import { connect } from 'react-redux'

@connect(
  state => {
   return xxxx
  }
)
class App extends React.Component {}

export default App

if I used react-redux/connect decorators syntax.
or

but if I don't use decorators syntax.

import React from 'react'
import { connect } from 'react-redux'

class App extends React.Component {}

export default connect()(App)

it's worked

Input code

No response

Config

"jsc": {
    "target":"es5",
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": true,
      "privateMethod": true,
      "functionBind": true,
      "classPrivateProperty": true,
      "exportDefaultFrom": true,
      "exportNamespaceFrom": true,
      "decorators": true,
      "decoratorsBeforeExport": true,
      "importMeta": true,
      "transform": {
        "legacyDecorator": true,
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false,
          "refresh": true
        }
      }
    }
  }

Playground link

No response

Expected behavior

fix decorators syntax

Actual behavior

No response

Version

"@swc/cli": "^0.1.57" "@swc/core": "^1.2.182", "swc-loader": "^0.2.0", "react-redux": "^7.2.2",

Additional context

No response

[kdy1]

Can you provide more info? Did it work previously? Or, does it work with tsc?

[wangcongyi]

@kdy1 We can use decorators syntax with react-redux, like the below code

import React from 'react'
import { connect } from 'react-redux'

@connect(
  state =>{xxxx},
  dispatch => {xxxx}
)
class App extends React.Component {
  render() {
   <div>xxxx</div>
  }
}

export default App

swc-loader didn't work though at .swcrc set up decorators config.

when I don't use decorators syntax.

import React from 'react'
import { connect } from 'react-redux'

class App extends React.Component {
  render() {
   <div>xxxx</div>
  }
}

export default connect(fn,fn)(App)

swc-loader worked.

it didn't work previously. the code was written by js not ts, so I didn't test tsc yet

[kdy1]

Oh I think I found the cause.

[kdy1]

It's actually https://github.com/swc-project/swc-loader/issues/50

[wangcongyi]

fixed the issue? I update the latest version, try rebuilding, and still error.

[kdy1]

It's not released yet

[wangcongyi]

@kdy1 I update v1.2.187, unfortunately, it still didn't work. How can I provide you with more information?

[kdy1]

Can you provide a repro?

[kdy1]

Can you try the new verison once it's published?

v1.2.189: https://github.com/swc-project/swc/actions/runs/2363309064

decorator config issue: https://github.com/swc-project/swc/issues/4734 (fixed with v1.2.189)

[wangcongyi]

@kdy1 https://github.com/wangcongyi/swc-test

you can see index.jsx, and see code comment.

[wangcongyi]

@kdy1

[Austaras]

Seems like this has already been fixed.

[kdy1]

Thanks!

[wangcongyi]

@Austaras I still get an error when I run my own project, @swc/cli": "^0.1.57, @swc/core": "^1.3.11, "swc-loader": "^0.2.3",

{
  "test": ".jsx?$",
  "jsc": {
    "target":"es5",
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": true,
      "privateMethod": true,
      "functionBind": true,
      "classPrivateProperty": true,
      "exportDefaultFrom": true,
      "exportNamespaceFrom": true,
      "decorators": true,
      "decoratorsBeforeExport": true,
      "importMeta": true,
      "transform": {
        "legacyDecorator": true,
        "react": {
          "pragma": "React.createElement",
          "pragmaFrag": "React.Fragment",
          "throwIfNamespace": true,
          "development": false,
          "useBuiltins": false,
          "refresh": true
        }
      }
    }
  }
}

[Austaras]

You're passing wrong config, it should be

"jsc": {
    "target":"es5",
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": true,
      "privateMethod": true,
      "functionBind": true,
      "classPrivateProperty": true,
      "exportDefaultFrom": true,
      "exportNamespaceFrom": true,
      "decorators": true,
      "decoratorsBeforeExport": true,
      "importMeta": true
    },
    "transform": {
      "legacyDecorator": true,
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": false,
        "refresh": true
      }
    }
  }

[wangcongyi]

oh yes!! thank you so much @Austaras

[swc-bot]

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.