pmndrs / leva

🌋 React-first components GUI

Home Page:https://leva.pmnd.rs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build error: This type parameter might need an `extends Partial<S>` constraint.

GabLeRoux opened this issue · comments

Hi there,
Using leva at version ^0.9.35 in react vite typescript application, I get the following error:

> tsc && vite build

node_modules/leva/node_modules/zustand/middleware/persist.d.ts:98:57 - error TS2344: Type 'Ps' does not satisfy the constraint 'Partial<S>'.

98         setOptions: (options: Partial<PersistOptions<S, Ps>>) => void;
                                                           ~~

  node_modules/leva/node_modules/zustand/middleware/persist.d.ts:96:41
    96 interface StorePersist<S extends State, Ps> {
                                               ~~
    This type parameter might need an `extends Partial<S>` constraint.


Found 1 error in node_modules/leva/node_modules/zustand/middleware/persist.d.ts:98

Workaround (dirty)

I've made the following workaround in my project's package.json (which is really dirty and I don't recommend doing this):

--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.2",
   "scripts": {
     "dev": "vite",
+    "prebuild": "node prebuild/prebuild.js",
     "build": "tsc && vite build",
     "test": "vitest",
     "test:coverage": "vitest --coverage",

prebuild/prebuild.sj:

// workaround to replace a line in leva's zustand dependency to prevent 
// 'This type parameter might need an `extends Partial<S>` constraint' error.
// see https://github.com/pmndrs/leva/issues/461
const fs = require('fs');

const filePath = 'node_modules/leva/node_modules/zustand/middleware/persist.d.ts';

fs.readFile(filePath, 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }

    let result = data;

    const regexSetOptions = /setOptions: \(options: Partial<PersistOptions<S, Ps>>\) => void;/g;
    result = result.replace(regexSetOptions, 'setOptions: (options: Partial<PersistOptions<S>>) => void;');

    fs.writeFile(filePath, result, 'utf8', function (err) {
        if (err) return console.log(err);
    });
});

Additional details

node --version
# v18.16.0

npm --version
# 9.5.1

Path to a better solution

I think updating zustand dependency in here might fix the problem:
https://github.com/pmndrs/leva/blob/main/packages/leva/package.json#L35

I see that the persist.d.ts changed a lot between these two versions:

-    "zustand": "^3.6.9"
+    "zustand": "^4.3.3"

I haven't contributed to leva yet, but let me know if there's anything I can do to help.

Before I add leva dependency, my project already had zustand at version ^4.3.3 and didn't have this typescript error.

I've created the following repository to reproduce this error:
https://github.com/GabLeRoux/vite-typescript-leva-issue-461

All I did is create a blank vite react typescript project, install leva, add a component using it and try to build the project.