Tencent / Hippy

Hippy is designed to easily build cross-platform dynamic apps. 👏
https://hippyjs.org
Apache License 2.0
7.96k stars 942 forks source link

hippy-vue-next 中的 patchProp 类型错误导致 Demo 编译失败 #3979

Open ziggear opened 1 month ago

ziggear commented 1 month ago

Describe the bug 进入 driver/js 目录,执行npm run init后提示patchProp类型不匹配,编译失败:

build js packages error Error: packages/hippy-vue-next/src/index.ts:301:5 - error TS2322: Type '(el: any, key: string, prevValue: any, nextValue: any, namespace: ElementNamespace, prevChildren: VNode<HippyNode, HippyElement, { [key: string]: any; }>[] | undefined, parentComponent: ComponentInternalInstance | null) => void' is not assignable to type '(el: any, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null | undefined) => void'.

301     patchProp,
        ~~~~~~~~~

  packages/hippy-vue-next/node_modules/@vue/runtime-core/dist/runtime-core.d.ts:282:5
    282     patchProp(el: HostElement, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null): void;
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The expected type comes from property 'patchProp' which is declared here on type 'RendererOptions<HippyNode, any>'

    at error (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:198:30)
    at throwPluginError (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:21718:12)
    at Object.error (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:22672:20)
    at RollupContext.error (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:3051:26)
    at /Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29233:26
    at Array.forEach (<anonymous>)
    at printDiagnostics (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29209:17)
    at typecheckFile (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29560:9)
    at /Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29756:17
    at Array.forEach (<anonymous>)
    at Object.buildEnd (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:29750:36)
    at /Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:22879:40
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async PluginDriver.hookParallel (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:22807:9)
    at async /Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:23779:9
    at async catchUnfinishedHookActions (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:23247:20)
    at async rollupInternal (/Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/rollup/dist/shared/rollup.js:23765:5)
    at async buildEntry (/Users/ziggzhang/Workspace/Hippy/driver/js/scripts/build.js:85:18) {
  code: 'PLUGIN_ERROR',
  plugin: 'rpt2',
  hook: 'buildEnd'
}

To Reproduce 复现环境: MacOS 14.4.1 node v16.20.2 npm 8.19.4 source code: main, commit 5e6823a0ba08c471f7e0f20476132d90428cf5cc

复现步骤:

  1. git clone https://github.com/Tencent/Hippy.git
  2. cd Hippy && npm install
  3. cd driver/js && npm run init
  4. 遇到ttypescript报错:
    
    /Users/ziggzhang/Workspace/Hippy/driver/js/node_modules/ttypescript/lib/loadTypescript.js:13
        function __() { this.constructor = d; }
                                         ^

TypeError: Cannot set property constructor of [object Object] which has only a getter

5. 根据[这个建议](https://stackoverflow.com/questions/76951014/yarn-run-build-dist-typeerror-cannot-set-property-constructor-of-object-obje) 将 driver/js/package.json 中的 ttypescript 依赖版本改为 `1.5.15` 试图解决错误
6. 继续 npm run init 报错:

build js packages error Error: packages/hippy-vue-next/src/index.ts:301:5 - error TS2322: Type '(el: any, key: string, prevValue: any, nextValue: any, namespace: ElementNamespace, prevChildren: VNode<HippyNode, HippyElement, { [key: string]: any; }>[] | undefined, parentComponent: ComponentInternalInstance | null) => void' is not assignable to type '(el: any, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null | undefined) => void'.


**Expected behavior**
预期编译成功,正常运行Demo
gguoyu commented 4 weeks ago

首先感谢反馈问题。 这个问题是因为 vuejs 这边近期的一个改动,修改了 patchProp 的API 参数类型和个数,因此我们需要进行兼容处理,这是他们的改动 https://github.com/vuejs/core/pull/11159

这里如果你想要先运行demo,可以重新 clone 项目,然后将 packages/hippy-vue-next/package.json 中 devDependencies 的 两个 vue 的依赖由 ^3.2.46 修改为 3.4.21,examples中hippy-vue-next-demo中 ^3.2.46 的依赖都改为 3.4.21

然后应该就可以把demo先运行起来了