You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
Whether it's an official demo or one's own project, using useLayer directly will prompt Cannon destroy property 'subscribe' of 'e' as it is undefined
import { Layers, useLayer } from '@craftjs/layers';
export cosnt Sidebar = ()=>{
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
// useLayer()
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
const { expanded } = useLayer((layer) => ({
expanded: layer.expanded,
}));
}
To Reproduce
`import { useEditor } from '@craftjs/core';
import { Layers, useLayer } from '@craftjs/layers';
import React, { useState } from 'react';
import styled from 'styled-components';
import { SidebarItem } from './SidebarItem';
import CustomizeIcon from '../../../../public/icons/customize.svg';
import LayerIcon from '../../../../public/icons/layers.svg';
import { Toolbar } from '../../Toolbar';
I originally intended to use useLayer to retrieve layers and customize the unfolding of all layers. Is there any other way to automatically expand all layers when using useLayer with an error message
Screenshots
Your environment
Software
Version(s)
craft.js
"@craftjs/core": "0.2.5",
"@craftjs/layers": "0.2.3",
"@craftjs/utils": "0.2.2",
React
react: 18.2.0
TypeScript
4.9.5
Browser
chrome 版本 127.0.6533.120(正式版本) (64 位)
npm/Yarn
yarn
Operating System
windows 11
The text was updated successfully, but these errors were encountered:
Describe the bug
Whether it's an official demo or one's own project, using useLayer directly will prompt Cannon destroy property 'subscribe' of 'e' as it is undefined
import { Layers, useLayer } from '@craftjs/layers';
export cosnt Sidebar = ()=>{
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
// useLayer()
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
const { expanded } = useLayer((layer) => ({
expanded: layer.expanded,
}));
}
To Reproduce
`import { useEditor } from '@craftjs/core';
import { Layers, useLayer } from '@craftjs/layers';
import React, { useState } from 'react';
import styled from 'styled-components';
import { SidebarItem } from './SidebarItem';
import CustomizeIcon from '../../../../public/icons/customize.svg';
import LayerIcon from '../../../../public/icons/layers.svg';
import { Toolbar } from '../../Toolbar';
export const SidebarDiv = styled.div<{ enabled: boolean }>
width: 280px; opacity: ${(props) => (props.enabled ? 1 : 0)}; background: #fff; margin-right: ${(props) => (props.enabled ? 0 : -280)}px;
;const CarbonAdsContainer = styled.div`
width: 100%;
margin-top: auto;
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
sans-serif;
}
#carbonads {
display: flex;
width: 100%;
background-color: transparent;
z-index: 100;
}
#carbonads a {
color: inherit;
text-decoration: none;
}
#carbonads a:hover {
color: inherit;
}
#carbonads span {
position: relative;
display: block;
overflow: hidden;
}
#carbonads .carbon-wrap {
display: flex;
}
#carbonads .carbon-img {
display: flex;
align-items: center;
margin: 0;
line-height: 1;
max-width: 30%;
}
#carbonads .carbon-img img {
display: block;
max-width: 100% !important;
}
#carbonads .carbon-text {
font-size: 12px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.5;
text-align: right;
color: #333333;
font-weight: 400;
flex: 1;
}
#carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 9px;
line-height: 1;
position: absolute;
bottom: 0;
right: 0;
color: #8f8f8f;
}
`;
const Carbonads = () => {
const domRef = React.useRef(null);
React.useEffect(() => {
const { current: dom } = domRef;
}, []);
return ;
};
export const Sidebar = () => {
const [layersVisible, setLayerVisible] = useState(true);
const [toolbarVisible, setToolbarVisible] = useState(true);
const { enabled } = useEditor((state) => ({
enabled: state.options.enabled,
}));
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
// useLayer()
// Prompt: Cannot destroy property 'subscribe' of 'e' as it is undefined
const { expanded } = useLayer((layer) => ({
expanded: layer.expanded,
}));
return (
<SidebarItem
icon={CustomizeIcon}
title="Customize"
height={!layersVisible ? 'full' : '55%'}
visible={toolbarVisible}
onChange={(val) => setToolbarVisible(val)}
>
<SidebarItem
icon={LayerIcon}
title="Layers"
height={!toolbarVisible ? 'full' : '45%'}
visible={layersVisible}
onChange={(val) => setLayerVisible(val)}
>
);
};
`
Expected behavior
I originally intended to use useLayer to retrieve layers and customize the unfolding of all layers. Is there any other way to automatically expand all layers when using useLayer with an error message
Screenshots
Your environment
The text was updated successfully, but these errors were encountered: