i have been working with your library until on my new project it is returning this bug which is about dependency and i can not figure out why

npm resolution error report

2022-03-06T06:03:50.293Z

While resolving: [email protected]
Found: [email protected]
node_modules/react
react@"^17.0.2" from the root project
peer react@"^17.0.2" from @bb-tech/[email protected]
node_modules/@bb-tech/ra-treemenu
@bb-tech/ra-treemenu@"*" from the root project

Could not resolve dependency:
peer react@"^16.3.0" from @material-ui/[email protected]
node_modules/@material-ui/core
peer @material-ui/core@"~1.4.0" from @bb-tech/[email protected]
node_modules/@bb-tech/ra-treemenu
@bb-tech/ra-treemenu@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "17.0.2",
"whileInstalling": {
"name": "evolve-panel",
"version": "0.1.0",
"path": "C:\Users\user\Desktop\admin-panel"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "C:\Users\user\Desktop\admin-panel"
}
},
{
"type": "peer",
"name": "react",
"spec": "^17.0.2",
"from": {
"name": "@bb-tech/ra-treemenu",
"version": "1.0.7",
"whileInstalling": {
"name": "evolve-panel",
"version": "0.1.0",
"path": "C:\Users\user\Desktop\admin-panel"
},
"location": "node_modules/@bb-tech/ra-treemenu",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "@bb-tech/ra-treemenu",
"spec": "",
"from": {
"location": "C:\Users\user\Desktop\admin-panel"
}
}
]
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^17.0.2",
"from": {
"location": "C:\Users\user\Desktop\admin-panel"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "^16.3.0",
"error": "INVALID",
"from": {
"name": "@material-ui/core",
"version": "1.4.3",
"whileInstalling": {
"name": "evolve-panel",
"version": "0.1.0",
"path": "C:\Users\user\Desktop\admin-panel"
},
"location": "node_modules/@material-ui/core",
"isWorkspace": false,
"dependents": [
{
"type": "peer",
"name": "@material-ui/core",
"spec": "~1.4.0",
"from": {
"name": "@bb-tech/ra-treemenu",
"version": "1.0.7",
"whileInstalling": {
"name": "evolve-panel",
"version": "0.1.0",
"path": "C:\Users\user\Desktop\admin-panel"
},
"location": "node_modules/@bb-tech/ra-treemenu",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "@bb-tech/ra-treemenu",
"spec": "",
"from": {
"location": "C:\Users\user\Desktop\admin-panel"
}
}
]
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}

Describe the bug
translation is not working for resources when passed in the standard ra format - resources.${resource_name}.name

To Reproduce
Steps to reproduce the behavior:

• Created a new parent group:
• <Resource icon={BackupIcon} name="upload_service" options={{ "isMenuParent": true }} />
• Added a dictionary : {resources: {upload_service: {name: 'Upload Service'}}
• menu title is coming as 'Upload_service' Expected : 'Upload Service'

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

As you can see in

But when it is collapsed, it does:

This is inconsistent.

Describe the bug
Default resource routed in RA applications using ra-treemenu is the parent resource which is a dummy. This is happening only when the first resource actually contains a parent i.e. is not orphan.

To Reproduce
Steps to reproduce the behavior:

1. Run RA application server.
2. Open http://localhost:3000 in the browser.
3. You'll see a blank page. On checking the url, the bug could be noticed and explained.

Screenshots

Environment (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 86.0.4240.111 (Official Build) (x86_64)

Describe the bug
I noticed I am getting console errors with the new update. If I do not use translations on my labels, I will receive this error for every resource that I use.

eg. I am using an User resource like this:
<Resource icon={UsersIcon} options={{ label: 'Users', menuParent: "usersParent" }} name='users' list={UserList} show={UserShow} edit={UserEdit} create={UserCreate} />,
and because I am not using translations since my label is hardcoded I am getting the "Warning, Mission translation for key: "Users" error.

To Reproduce
Use a resource without a translated label.

Screenshots

Environment (please complete the following information):

• Windows 10
• Chrome
• Version 86.0.4240.111

I hope I was as clear as possible. If you have any additional questions, please ask away.

Because menu tree is built based on mapped resources the current implmentation will not allow the following features:

• Add two or more menu entries for same resource
  For example, it's a common use case to have two menus that references the same resource but will redirect to a filtered list like this:

<MenuItemLink
        to={`/products`}
        primaryText={translate(`resources.products.name`, {
            smart_count: 2,
        })}
        leftIcon={<products.icon />}
 />
<MenuItemLink
      to="/products?filter=category==1"
          primaryText="smartphones"
          leftIcon={<products.icon />}
      />

• Add a custom menu (non-resource based). For example, a preferences menu.
• Specific ordering based on some criteria (this is not necessary a problem because we can re-arrange resources mapping to solve this)

Hello, is this package compatible with the latest version of React Admin?
I'm using v4.3.4 and i obtain some error when installing and trying to use this package:

1. Material UI Icons are required?
2. ERROR in ./node_modules/@bb-tech/ra-treemenu/dist/index.modern.js 1522:30-42
   export 'getResources' (imported as 'getResources') was not found in 'react-admin'

Thanks

Describe the bug

No label will be displayed for 'normal' <Resource> components, if it's not set explicitly.
E.g.: See official example:
<Resource name="posts" list={PostList} icon={PostIcon} /> (Docs)
Should have a label 'Posts'.

To Reproduce
Steps to reproduce the behavior:

1. Go to this CodeSandbox, what I forked from an Offical CodeSandbox
2. Toggle the menu, if it's not visible, and see, there are no labels by the Resources in the Menu.

Screenshots

Environment (please complete the following information):

• OS: Windows (i know, it's a shame, but the company don't let me working on Linux/Mac :P)
• Firefox + Chrome
• Node: v14.16.1
• NPM: 6.14.12
• react: "^17.0.2"
• react-admin: "^3.15.1"
• react-dom: "^17.0.2"
• @bb-tech/ra-treemenu: "^1.0.4"

Describe the bug
Crash on render.

To Reproduce
Appears to reproduce from react-admin 3.9.6 to latest (currently 3.11.x - any of them).

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 88

Additional context

Two errors, both identical:

×
←→1 of 2 errors on the page
TypeError: Cannot read property 'breakpoints' of null
(anonymous function)
<ROOT>/node_modules/@bb-tech/ra-treemenu/dist/index.modern.js:257
  254 |          * 
  255 |          * thrown by RA at the time of rendering.
  256 |          */
> 257 |         theme.breakpoints.down('xs')
      | ^  258 |     );
  259 | });
  260 | 
View compiled
useMediaQuery
<ROOT>/node_modules/@material-ui/core/esm/useMediaQuery/useMediaQuery.js:19
  16 |   }
  17 | }
  18 | 
> 19 | var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
     | ^  20 | query = query.replace(/^@media( ?)/m, ''); // Wait for jsdom to support the match media feature.
  21 | // All the browsers Material-UI support have this built-in.
  22 | // This defensive check is here for simplicity.
View compiled
Menu
<ROOT>/node_modules/@bb-tech/ra-treemenu/dist/index.modern.js:245
  242 |     });
  243 | };
  244 | 
> 245 | var isXSmall = useMediaQuery(function (theme) {
      | ^  246 |     return (
  247 |         /**
  248 |          * This function is not directly used anywhere
View compiled
renderWithHooks
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:14803
  14800 |   }
  14801 | }
  14802 | 
> 14803 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  14804 | 
  14805 | if (workInProgress.expirationTime === renderExpirationTime) {
  14806 |   // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:17482
  17479 | 
  17480 |   setIsRendering(true);
  17481 |   ReactCurrentOwner$1.current = workInProgress;
> 17482 |   value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
        | ^  17483 |   setIsRendering(false);
  17484 | } // React DevTools reads this flag.
  17485 | 
View compiled
beginWork
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:18596
  18593 | switch (workInProgress.tag) {
  18594 |   case IndeterminateComponent:
  18595 |     {
> 18596 |       return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderExpirationTime);
        | ^  18597 |     }
  18598 | 
  18599 |   case LazyComponent:
View compiled
HTMLUnknownElement.callCallback
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:188
  185 |     window.event = windowEvent;
  186 |   }
  187 | 
> 188 |   func.apply(context, funcArgs);
      | ^  189 |   didError = false;
  190 | } // Create a global error event handler. We use this to capture the value
  191 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:237
  234 | // errors, it will trigger our global error handler.
  235 | 
  236 | evt.initEvent(evtType, false, false);
> 237 | fakeNode.dispatchEvent(evt);
      | ^  238 | 
  239 | if (windowEventDescriptor) {
  240 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:292
  289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  290 |   hasError = false;
  291 |   caughtError = null;
> 292 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
  293 | }
  294 | /**
  295 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:23203
  23200 | } // Run beginWork again.
  23201 | 
  23202 | 
> 23203 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, expirationTime);
        | ^  23204 | 
  23205 | if (hasCaughtError()) {
  23206 |   var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:22154
  22151 | 
  22152 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
  22153 |   startProfilerTimer(unitOfWork);
> 22154 |   next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
        | ^  22155 |   stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
  22156 | } else {
  22157 |   next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
View compiled
workLoopSync
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:22130
  22127 | function workLoopSync() {
  22128 |   // Already timed out, so perform work without checking if we need to yield.
  22129 |   while (workInProgress !== null) {
> 22130 |     workInProgress = performUnitOfWork(workInProgress);
  22131 |   }
  22132 | }
  22133 | /** @noinline */
View compiled
performSyncWorkOnRoot
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:21756
  21753 | 
  21754 | do {
  21755 |   try {
> 21756 |     workLoopSync();
        | ^  21757 |     break;
  21758 |   } catch (thrownValue) {
  21759 |     handleError(root, thrownValue);
View compiled
(anonymous function)
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:11089
  11086 |     var callback = queue[i];
  11087 | 
  11088 |     do {
> 11089 |       callback = callback(_isSync);
        | ^  11090 |     } while (callback !== null);
  11091 |   }
  11092 | });
View compiled
unstable_runWithPriority
<ROOT>/node_modules/scheduler/cjs/scheduler.development.js:653
  650 | currentPriorityLevel = priorityLevel;
  651 | 
  652 | try {
> 653 |   return eventHandler();
      | ^  654 | } finally {
  655 |   currentPriorityLevel = previousPriorityLevel;
  656 | }
View compiled
runWithPriority$1
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:11039
  11036 | 
  11037 | function runWithPriority$1(reactPriorityLevel, fn) {
  11038 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 11039 |   return Scheduler_runWithPriority(priorityLevel, fn);
  11040 | }
  11041 | function scheduleCallback(reactPriorityLevel, callback, options) {
  11042 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
View compiled
flushSyncCallbackQueueImpl
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:11084
  11081 | try {
  11082 |   var _isSync = true;
  11083 |   var queue = syncQueue;
> 11084 |   runWithPriority$1(ImmediatePriority, function () {
        | ^  11085 |     for (; i < queue.length; i++) {
  11086 |       var callback = queue[i];
  11087 | 
View compiled
flushSyncCallbackQueue
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:11072
  11069 |     Scheduler_cancelCallback(node);
  11070 |   }
  11071 | 
> 11072 |   flushSyncCallbackQueueImpl();
  11073 | }
  11074 | 
  11075 | function flushSyncCallbackQueueImpl() {
View compiled
scheduleUpdateOnFiber
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:21199
  21196 |       // scheduleCallbackForFiber to preserve the ability to schedule a callback
  21197 |       // without immediately flushing it. We only do this for user-initiated
  21198 |       // updates, to preserve historical behavior of legacy mode.
> 21199 |       flushSyncCallbackQueue();
        | ^  21200 |     }
  21201 |   }
  21202 | } else {
View compiled
dispatchAction
<ROOT>/node_modules/react-dom/cjs/react-dom.development.js:15660
  15657 |       }
  15658 |     }
  15659 | 
> 15660 |     scheduleWork(fiber, expirationTime);
  15661 |   }
  15662 | }
  15663 | 
View compiled
(anonymous function)
<ROOT>/packages/client/src/App.jsx:125
  122 |  };
  123 | 
  124 |  React.useEffect(() => {
> 125 |    buildGraphQLProvider({
      | ^  126 |      clientOptions: { uri: "http://localhost:3001/graphql" },
  127 |      buildQuery: myBuildQuery
  128 |    }).then((provider) => setDataProvider(() => provider));
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Is your feature request related to a problem? Please describe.
I have the "important" routes first and then I have the less "important" stuff that I want to group together at the bottom. The way the code is implemented now all orphans are rendered last and this seems to be an unnecesary restriction.
Example of what i want to be possible:
https://imgur.com/a/uzudeL4

Describe the solution you'd like
The solution (that I already implemented) would not really change the code in significant ways, instead of going over the parents and then orphans it just goes over them all and renders them like this:

resources.forEach(r => { if(isParent(r)){ resRenderGroup.push(mapParent(r)) } if(isOrpahn(r)) { resRenderGroup.push(mapIndependent(r)) } });
Giving users the option to chose the placement seems the best option without having any downsides that I can spot now.

If you are interested into the idea I could try and clean&prepare a PR.

Cheers.

Describe the bug
There's a missing key prop on the parent resource.

Screenshots

Environment (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 85.0

Additional context
In the index.modern.js, line 381. The child element does not have a key specified.

Describe the bug
You get a runtime error that recompose/compose cannot be resolved.

To Reproduce
Steps to reproduce the behavior:

1. Install minimal setup: CRA and RA, then install this module
2. npm start

Environment (please complete the following information):

• OS: MacOS
• Browser N/A - error is in webpack
• Version 1.0.0

Is your feature request related to a problem? Please describe.
Dashboard label is always 'Dashboard'. Need a way to customize it, for example - 'My Dashboard'

Describe the solution you'd like
A new prop that takes the Dashboard label and defaults to 'Dashboard'. So, backward compatible.

Describe the bug
I would like to define additional resources apart from those that I want to list as menu items. Currently, all the resources are rendered as menu items. I want to render menu items based on the 'list' property similar to react-admin and define additional resources as well.

The menu items are displayed like the below screenshot.

Solution
The solution that I implemented is add an additional condition while rendering the orphan entries to check the hasList value of the resource.

resources.filter(r => r.options && !r.options.hasOwnProperty('menuParent') && !r.options.hasOwnProperty('isMenuParent') && r.hasList)

Describe the bug
Can't import package in React which used typescript

Is your feature request related to a problem? Please describe.
Looks like the margin::top for the sidebar menu could be increased a bit to avoid the top-bar shadowing the first item in the submenu.

Additional context
Attaching screenshot of the current look: