Ninguern Posts - Answer Overflow

Ninguern

•Created by Ninguern on 12/7/2023 in #support

Error while installing dependencies on template

I've just ran npm create vite@latest my-app -- --template solid-ts to start a new template and got this error after trying to run npm install: Node version: v20.10.0 npm version: 10.2.3

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/vitefu
npm ERR!     vitefu@"^0.2.4" from [email protected]
npm ERR!     node_modules/vite-plugin-solid
npm ERR!       dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!   dev vite@"^5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/vite-plugin-solid
npm ERR!   dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/vite-plugin-solid
npm ERR!     dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/vitefu
npm ERR!     vitefu@"^0.2.4" from [email protected]
npm ERR!     node_modules/vite-plugin-solid
npm ERR!       dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!   dev vite@"^5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/vite-plugin-solid
npm ERR!   dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/vite-plugin-solid
npm ERR!     dev vite-plugin-solid@"^2.7.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

3 replies

SSolidJS

•Created by Ninguern on 12/7/2022 in #support

How to properly type the `mergeProps` with Typescript?

I'm using the mergeProps function to enter some default props for my component, but this is causing a Typescript error because some properties that are using string literals are being replaced with just type string.

interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  color?: ColorNames;
}

function ButtonBase(props: ButtonBaseProps) {
  const p = mergeProps({ variant: "filled", type: "button" }, props);

  return (
    <button
      class={join(
        "flex items-center rounded-full py-2 outline-none",
        getButtonStyles(p.variant, p.color),
        p.children ? "px-4" : "px-2"
      )}
      {...p}
    />
  );
}

interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  color?: ColorNames;
}

function ButtonBase(props: ButtonBaseProps) {
  const p = mergeProps({ variant: "filled", type: "button" }, props);

  return (
    <button
      class={join(
        "flex items-center rounded-full py-2 outline-none",
        getButtonStyles(p.variant, p.color),
        p.children ? "px-4" : "px-2"
      )}
      {...p}
    />
  );
}

<button is trowing an error because p.type is now typed as a string.

Type 'string' is not assignable to type '"button" | "submit" | "reset" | undefined'.

getButtonStyles is trowing an error because p.variant is now a string instead of ButtonVariant.

Argument of type 'string' is not assignable to parameter of type 'ButtonVariant'.

Is there a way where I can type this to solve this issue?

3 replies

Gaming

Programming