Issue when using Tuya Slider Component

[Mywatt Dev]

• Tuya MiniApp Tools version information: 0.5.15

• The versions of @ray-js/ray: 1.4.45, @ray-js/panel-sdk: 1.10.0

• Mobile device information: Andriod

• Related code:

Code: Select all

import React from "react";
import Slider from "@ray-js/components-ty-slider";

const TempSet = () => {
 const handleChange = (...args) => console.log(args);

 return (
  <Slider
   min={1}
   max={100}
   isShowTicks={false}
   maxTrackHeight="20rpx"
   maxTrackRadius="14rpx"
   minTrackHeight="20rpx"
   minTrackColor="linear-gradient(to left, #87abf2 11.6%, #4b7ee2)"
   maxTrackColor="#f4faff"
   thumbHeight="56rpx"
   thumbWidth="77rpx"
   thumbRadius="48rpx"
   thumbBoxShadowStyle="14rpx 14rpx 30rpx rgba(158, 184, 210, 0.45)"
   thumbColor="linear-gradient(225deg, #FDFEFF 13%, #D5E3F3 96%)"
   onChange={handleChange}
  />
 );
};

• Log information:

  

• Problem description (reproduction steps):

  • Install the package @ray-js/components-ty-slider@1.10.7.
  • Create a component using the code from above and start the project.

• expected outcome:
  Circle Slider to appear on the Page

• actual results:
  The App doesn't start and has error logs

[Muzzzhi]

Code: Select all

import React from 'react';
import Slider from '@ray-js/components-ty-slider';

export default function Home() {
  return (
    <Slider
      style={{ marginTop: 20 }}
      step={25}
      isShowTicks
      maxTrackHeight="8px"
      maxTrackRadius="8px"
      minTrackHeight="8px"
      minTrackColor="linear-gradient(to right, #158CFB, orange)"
      maxTrackTickHeight="4px"
      maxTrackTickWidth="4px"
      maxTrackTickRadius="2px"
      minTrackTickHeight="4px"
      minTrackTickWidth="4px"
      minTrackTickRadius="2px"
    />
  );
}

package.json

Code: Select all

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "@ray-js/cli": "latest",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "core-js": "^3.19.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "dependencies": {
    "@ray-js/components-ty-slider": "^0.2.40",
    "@ray-js/panel-sdk": "^1.10.0",
    "@ray-js/ray": "^1.4.45"
  }
}

The version check is normal. It is recommended to delete the lock file and reinstall dependencies. "@ray-js/components-ty-slider" should not exist in version 1.10.7. You can use version 0.2.40 instead.

[Mywatt Dev]

I have installed the recommended version and I still see the error same error.

[Muzzzhi]

I have installed the recommended version and I still see the error same error.
WhatsApp Image 2024-04-04 at 11.35.25.jpeg

I tried using your dependency but found no problem.

It seems that a lock is being placed on an incompatible version. Try deleting the lock file and re-installing the yarn dependency. If there are still problems, post git repository or you can send out the lock file.

[Mywatt Dev]

I have attached the package-lock.json.

[Muzzzhi]

I have attached the package-lock.json.

Oh, look at the lock file because of the sub-dependency problem of @ray-js/panel-sdk, you can first use 'npm install --legacy-peer-deps' or' yarn 'to install the dependency, we will update @ray-js/panel-sdk.

[Muzzzhi]

I have attached the package-lock.json.

Oh, look at the lock file because of the sub-dependency problem of @ray-js/panel-sdk, you can first use 'npm install --legacy-peer-deps' or' yarn 'to install the dependency, we will update @ray-js/panel-sdk.

We upgraded @ray-js/panel-sdk, using version 1.10.2 to confirm.