Skip to main content
ArcBlock Community

Help Needed: Minified React Error #130 in ArcBlock Studio

Twelve
Support
pages-kitqaresolved

Hi everyone,

I'm encountering Minified React Error #130 while working in ArcBlock Studio. It happens when using a component with a Material-UI Select dropdown from @blocklet/pages-kit/builtin/mui/material. The error suggests React is trying to render something invalid, but I can’t pinpoint the issue.

Could anyone clarify:

  1. What React version and Material-UI components are supported in ArcBlock Studio?
  2. Are there any known limitations or issues with @blocklet/pages-kit components, particularly interactive ones like Select or MenuItem****?
  3. How can I get more detailed debugging information beyond the minified React errors?

Any guidance or tips would be greatly appreciated!

3 replies

Brain Titan21 months ago(edited)
  1. React version 18.3.1
  2. Yes, if components are not built-in packages they must be loaded asynchronously and imported via CDN. Context management and styled components also have certain restrictions. Refer to the link below for more details on how Pages Kit handles React: https://www.arcblock.io/content/docs/web3-kit/en/pages-kit-custom-component
  3. Not sure, you need to assess the logic of the code, and then you’d get an idea where the potential error comes from. What are you building? Have you checked if all the prop Types in the GUI are matching the React code in the console (i.e the props passed to your component must match the expected types).

Your default props might be undefined? Use fallback values to handle this issue

👍1
xiaoliang21 months ago

Here's a link to see what Material-UI components are included in the builtin.

I tried to use Select component in a custom component and it is working fine, can you share the code? You can send it to me separately in the chat to help locate the issue.

Code:

javascriptCopy
import React from "@blocklet/pages-kit/builtin/react";
import {
  Box,
  Select,
  MenuItem,
} from "@blocklet/pages-kit/builtin/mui/material";

export default function ({ data }) {
  return (
    <Box
      sx={{
        padding: 2,
      }}
    >
      <Box sx={{ width: "200px" }}>
        <Select
          defaultValue=""
          onChange={(event) => {
            console.log("Selected value:", event.target.value);
          }}
          sx={{ width: "100%" }}
        >
          {data?.map((item) => (
            <MenuItem key={item.value} value={item.value}>
              {item.text}
            </MenuItem>
          ))}
        </Select>
      </Box>
    </Box>
  );
}

Properties：

image.png

Demo:

image.png

Twelve21 months ago

Thank you for this response . I figured out the drop down issue.

Reply