The vite property decorator is invalid #13874

spencer17x · 2023-07-17T06:11:56Z

Describe the bug

When the property decorator is involved in the project, the dev and production modes are different from the webpack effect, and the expected effect is the same as the webpack effect.

Reproduction

https://github.com/Spencer17x/arca/tree/main/packages/awesome-babylonjs/babylonjs-mtoon-material

Steps to reproduce

git clone https://github.com/Spencer17x/arca.git
cd arca/packages/awesome-babylonjs/babylonjs-mtoon-material
run pnpm install
run pnpm run dev
git clone https://github.com/Spencer17x/babylon-mtoon-material.git
git fetch origin 6.x:6.x
run pnpm install
run pnpm run debug

This is the effect of vite：

This is the effect of webpack：

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 89.33 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    pnpm: 7.14.0 - ~/Library/pnpm/pnpm
    Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 114.0.5735.106
    Safari: 16.5.2

Used Package Manager

pnpm

Logs

vite:config bundled config file loaded in 136.95ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist/example',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:optimized-deps',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react', 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/vite.config.ts',
  vite:config   configFileDependencies: [
  vite:config     '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/vite.config.ts'
  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/public',
  vite:config   cacheDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material' => {
  vite:config       dir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:optimized-deps',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:client-inject',
  vite:config       'vite:import-analysis'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +4ms
  vite:esbuild 21.70ms tsconfck init /Users/17a/Desktop/project/arca +0ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  VITE v4.3.9  ready in 251 ms

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

spencer17x · 2023-07-17T06:16:30Z

This problem is due to the attribute decorator of https://github.com/Spencer17x/arca/blob/main/packages/awesome-babylonjs/babylonjs-mtoon-material/src/lib/mtoon-material.ts

Shyam-Chen · 2023-07-17T09:12:27Z

@vitejs/plugin-react-swc

spencer17x · 2023-07-17T09:21:46Z

@vitejs/plugin-react-swc

I tried. It didn't work

spencer17x · 2023-07-17T09:22:42Z

vite:config bundled config file loaded in 97.36ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist/example',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:optimized-deps',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react', 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/vite.config.ts',
  vite:config   configFileDependencies: [
  vite:config     '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/vite.config.ts'
  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   root: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/public',
  vite:config   cacheDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   css: undefined,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(1) {
  vite:config     'fnpd_/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material' => {
  vite:config       dir: '/Users/17a/Desktop/project/arca/packages/awesome-babylonjs/babylonjs-mtoon-material',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:optimized-deps',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:client-inject',
  vite:config       'vite:import-analysis'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +4ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms
  vite:esbuild 22.14ms tsconfck init /Users/17a/Desktop/project/arca +0ms

  VITE v4.4.4  ready in 198 ms

I updated vite to v4.4.4

Shyam-Chen · 2023-07-17T09:24:43Z

vitejs/vite-plugin-react-swc#86

spencer17x · 2023-07-17T09:27:37Z

evanw/esbuild#104

Does not appear to support property decorators？

Shyam-Chen · 2023-07-17T09:28:23Z

evanw/esbuild#104

Does not appear to support property decorators？

vitejs/vite-plugin-react-swc#60 (comment)

spencer17x · 2023-07-17T09:31:23Z

I've tried, it doesn't work, and my problem is that the attribute decorator is in the ts file, not react

XinChou16 · 2023-07-18T12:07:31Z

try vite4.4.4+, it enable decorator compile default

spencer17x · 2023-07-18T12:59:08Z

try vite4.4.4+, it enable decorator compile default

Now it's vite 4.4.4+, but it still doesn't work

spencer17x · 2023-07-21T07:34:48Z

Now, I have opened a new branch of the code in question：
https://github.com/spencer17x/arca/tree/vrm-vite/packages/awesome-babylonjs/babylonjs-mtoon-material

sapphi-red · 2023-07-25T08:55:36Z

If I set "useDefineForClassFields": false in tsconfig.json, it works the same with Webpack one.
https://github.com/spencer17x/arca/blob/c576e06ae192a0cfe1a59bfc7978ac86be2feff8/packages/awesome-babylonjs/babylonjs-mtoon-material/tsconfig.json#L4C6-L4C29
The webpack one uses false for that field (the default is false when target is not ES2022+).
https://github.com/spencer17x/arca/blob/75488d95d9d8e7cb6c177b4e6043a91b262f42db/packages/awesome-babylonjs/babylonjs-mtoon-material/tsconfig.json

If I set true, I got the same result with Vite one.

Closing as this is not a bug in Vite.

spencer17x added the pending triage label Jul 17, 2023

spencer17x mentioned this issue Jul 17, 2023

fix(esbuild): enable experimentalDecorators by default #13805

Merged

9 tasks

sapphi-red closed this as completed Jul 25, 2023

sapphi-red added invalid This doesn't seem right and removed pending triage labels Jul 25, 2023

github-actions bot locked and limited conversation to collaborators Aug 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The vite property decorator is invalid #13874

The vite property decorator is invalid #13874

spencer17x commented Jul 17, 2023 •

edited by bluwy

Loading

spencer17x commented Jul 17, 2023

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

spencer17x commented Jul 17, 2023 •

edited by bluwy

Loading

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

XinChou16 commented Jul 18, 2023

spencer17x commented Jul 18, 2023

spencer17x commented Jul 21, 2023

sapphi-red commented Jul 25, 2023

The vite property decorator is invalid #13874

The vite property decorator is invalid #13874

Comments

spencer17x commented Jul 17, 2023 • edited by bluwy Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

spencer17x commented Jul 17, 2023

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

spencer17x commented Jul 17, 2023 • edited by bluwy Loading

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

Shyam-Chen commented Jul 17, 2023

spencer17x commented Jul 17, 2023

XinChou16 commented Jul 18, 2023

spencer17x commented Jul 18, 2023

spencer17x commented Jul 21, 2023

sapphi-red commented Jul 25, 2023

spencer17x commented Jul 17, 2023 •

edited by bluwy

Loading

spencer17x commented Jul 17, 2023 •

edited by bluwy

Loading