tsDecorators not support @inject('appStore') @observer from mobx

vaynevayne commented 1 week ago

  react({
      tsDecorators: true,
    }),

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "checkJs": false,
      // Set true if you see parsing errors in your browser
      "useDefineForClassFields":true,
    "experimentalDecorators": true, // 开启装饰器使用
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2020"
    ],
    "strictNullChecks":true,
    "module": "ES2020",
    "moduleResolution": "Bundler",
    "noFallthroughCasesInSwitch": true,
    "noEmit": true,
    "noImplicitAny": true,
    "noUnusedLocals": false,
    "paths": {
      "@/*": ["src/*"], // ts 文件使用别名（注释也可用阿，没找到解释）
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2022",
  },
  "exclude": [
    "dist",
    "node_modules",
    "public"
  ],
  "include": [
    "./src",
    "**.ts",
    // "**.tsx",
    // "src/**/*.js",
    // "src/**/*.tsx",
  ]
}

// index.jsx
@inject('appStore')
@observer
class Index extends React.Component {
...

ArnaudBarre commented 1 week ago

tsDecorators are only available in TS(X) files, to limit the usage of unspec decorators in JS files. Given that esbuild shipped spec compliant decorators which is available in Vite 5.3, this should I think fix your issue if you depend on the new stantard (which might not be the case given "experimentalDecorators": true, in your TS config)

vaynevayne commented 1 week ago

i use mobx:5.15.4 "mobx-react": "6.1.8" with experimentalDecorators:true Thank you, I heard that there are several ts specifications. Does swc only support the latest ones? I don't know what kind of converter mobx needs, and does swc have it? In addition, I have enabled conversion in tsconfig, but it has no effect. I'll change it to a.tsx file and try again

ArnaudBarre commented 5 days ago

I've look into it and the support from SWC is not quite there (it can be added by using https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion), but it not as stable in SWC as in esbuild. I've updated the description of https://github.com/vitejs/vite-plugin-react-swc/issues/86 to reflect this and I'm closing this as duplicate.

For now you can either patch to opt-in to unstable 2022-03 or use the legacy one (both as declared supported by mobx) using tsDecorators option (which requires using TS/TSX source code)

vitejs / vite-plugin-react-swc

tsDecorators not support @inject('appStore') @observer from mobx #217