[Box] Module `clsx` not found

Box component needs clsx dependency. Should it be added in dependencies, maybe peerDependencies?

...
wait  - compiling...
error - .yarn/$$virtual/@material-ui-system-virtual-87c3025a04/0/cache/@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip/node_modules/@material-ui/system/esm/createBox.js:5:0
Module not found: Can't resolve 'clsx
...
Error: @material-ui/system tried to access clsx, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: clsx (via "clsx")
Required by: @material-ui/system@virtual:30ab9048f969104ada655bcc8fee9c9f430a5b43de38acf4e773b65ddb40976541c624ea29e1e5cae1e1ff628bb18dba8452f4c28094f8def3f40560aefc1b2b#npm:5.0.0-alpha.35 (via C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\)

Require stack:
- C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\createBox.js
- C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\Box\Box.js
- C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\Box\index.js
- C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\index.js
- C:\workspace\.yarn\$$virtual\@material-ui-core-virtual-30ab9048f9\0\cache\@material-ui-core-npm-5.0.0-alpha.35-cc0c13201a-87c1afb862.zip\node_modules\@material-ui\core\node\styles\createV4Spacing.js
- C:\workspace\.yarn\$$virtual\@material-ui-core-virtual-30ab9048f9\0\cache\@material-ui-core-npm-5.0.0-alpha.35-cc0c13201a-87c1afb862.zip\node_modules\@material-ui\core\node\styles\adaptV4Theme.js
- C:\workspace\.yarn\$$virtual\@material-ui-core-virtual-30ab9048f9\0\cache\@material-ui-core-npm-5.0.0-alpha.35-cc0c13201a-87c1afb862.zip\node_modules\@material-ui\core\node\styles\index.js
- C:\workspace\.yarn\$$virtual\@material-ui-core-virtual-30ab9048f9\0\cache\@material-ui-core-npm-5.0.0-alpha.35-cc0c13201a-87c1afb862.zip\node_modules\@material-ui\core\node\index.js
- C:\workspace\.next\server\pages\_app.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\next-server\server\require.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\next-server\server\load-components.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\next-server\server\api-utils.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\next-server\server\next-server.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\server\next.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\server\lib\start-server.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\cli\next-dev.js
- C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\bin\next
    at internalTools_makeError (C:\workspace\.pnp.js:17457:34)
    at resolveToUnqualified (C:\workspace\.pnp.js:18422:23)
    at resolveRequest (C:\workspace\.pnp.js:18514:29)
    at Object.resolveRequest (C:\workspace\.pnp.js:18592:26)
    at Function.external_module_.Module._resolveFilename (C:\workspace\.pnp.js:17690:34)
    at Function.mod._resolveFilename (C:\workspace\.yarn\$$virtual\next-virtual-b4070ca312\0\cache\next-npm-10.2.3-e1de0387ed-e32ff7cc79.zip\node_modules\next\dist\build\webpack\require-hook.js:4:1855)
    at Function.external_module_.Module._load (C:\workspace\.pnp.js:17555:48)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\workspace\.yarn\$$virtual\@material-ui-system-virtual-87c3025a04\0\cache\@material-ui-system-npm-5.0.0-alpha.35-62da67f34a-34e0ef5783.zip\node_modules\@material-ui\system\createBox.js:20:36)    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.external_module_.Module._load (C:\workspace\.pnp.js:17586:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
...

Additional Information

versions

@material-ui/core: 5.0.0-alpha.35

yarn: 2.4.1

webpack: 5.37.0

next: 10.2.3

OS

Windows

[eps1lon]

Thanks for the report.

clsx should be declared as a dependency since it’s required in createBox. The dependency was added in https://github.com/mui-org/material-ui/pull/26379 but not declared.

[oliviertassinari]

if you have some success stories with this approach then I’m all-ears.

@eps1lon My general experience so far with “good first issue” is that it’s counterproductive to onboard new maintainers. The kind of people you want to be maintainers start directly from harder issues. However, I have seen it work for new contributors, but people that require more direction, meaning a higher opportunity cost to guide them.

I personally really like this idea to have a granular level of difficulty. If it’s too easy, you don’t learn anything, nor you build the confidence required to take on harder problems. If it’s too hard, you move to something else. So I think that the core of our discussion here, is: where do we put the different levels of complexity?

I have updated the content in Notion to leave room for interpretation, so it doesn’t have to be a git diff, but any mean to avoid confusion in the mind of the new contributors:

Increasing the cost of entry with harder issues will link to fewer contributors, but maybe more quality ones. My main worry would be that we start at a too high entry point, where “good to take” issues can already serve this purpose.

What do you think?