Dependency conflict between tss-react and styled-components

cgil commented 1 year ago

Describe the bug

Dependencies from mui-tiptap are conflicting with other dependencies. Specifically there's a conflict when utilizing styled-components with MUI V5, and tss-react from mui-tiptap.

Error: ModuleNotFoundError: Module not found: Error: Can't resolve '@mui/material/styles'

To Reproduce

Build the project with CRA using MUI, styled-components, webpack, mui-tip
Copy contents from demo
Run craco start

Expected behavior

Compatability between tss-react and projects utilizing styled-components

Screenshots

ModuleNotFoundError: Module not found: Error: Can't resolve '@mui/material/styles' in '/Users/me/dev/clients/node_modules/tss-react/esm'
    at /Users/me/dev/clients/node_modules/webpack/lib/Compilation.js:2014:28
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:791:13
    at eval (eval at create (/Users/me/dev/clients/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:265:22
    at eval (eval at create (/Users/me/dev/clients/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:427:22
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:111:11
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:663:25
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:848:8
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:968:5
    at /Users/me/dev/clients/node_modules/neo-async/async.js:6883:13
    at /Users/me/dev/clients/node_modules/webpack/lib/NormalModuleFactory.js:951:45
    at finishWithoutResolve (/Users/me/dev/clients/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
    at /Users/me/dev/clients/node_modules/enhanced-resolve/lib/Resolver.js:386:15
    at /Users/me/dev/clients/node_modules/enhanced-resolve/lib/Resolver.js:435:5
    at eval (eval at create (/Users/me/dev/clients/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve '@mui/material/styles' in '/Users/me/dev/clients/node_modules/tss-react/esm'
  Parsed request is a module
  using description file: /Users/me/dev/clients/node_modules/tss-react/package.json (relative path: ./esm)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/me/dev/clients/node_modules/tss-react/esm/node_modules doesn't exist or is not a directory
      /Users/me/dev/clients/node_modules/tss-react/node_modules doesn't exist or is not a directory
      /Users/me/dev/clients/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/me/dev/clients/node_modules
        /Users/me/dev/clients/node_modules/@mui/material doesn't exist
      looking for modules in /Users/me/dev/node_modules
        /Users/me/dev/node_modules/@mui/material doesn't exist
      looking for modules in /Users/me/node_modules
        /Users/me/node_modules/@mui/material doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/me/dev/clients/node_modules/react-scripts/node_modules
        /Users/me/dev/clients/node_modules/react-scripts/node_modules/@mui/material doesn't exist

System (please complete the following information):

mui-tiptap version: 1.1.0
tiptap version: 2.0.3
Browser: Chrome
Node version: v18.12.1
OS: Mac

Additional context

Add any other context about the problem here.

sjdemartini commented 1 year ago

Thanks for the report. I've never tried to use styled-components with material-ui before (or with tss-react). Would you be able to share more about how you're configuring your project and what packages you have installed?

Are you following these steps https://mui.com/system/getting-started/installation/#with-styled-components and then changing your MUI engine to use styled-components with Webpack overrides described here https://mui.com/material-ui/guides/styled-engine/? Could you perhaps be able to put together a CodeSandbox demonstrating the issue with a relevant setup?

Perhaps tss-react+emotion are not compatible with MUI being configured to use styled-components. That wouldn't surprise me, but I'd want to check with the tss-react maintainer to get his thoughts. (I hadn't considered this aspect of choosing tss-react.) If so, that would be a bummer. Changing all styling in mui-tiptap to remove tss-react would be a major effort/change, so I wouldn't be able to work on a resolution anytime soon unfortunately.

sjdemartini commented 1 year ago

Hm, I've tested following MUI's installation instructions above and cannot reproduce the error. I am able to configure MUI to use styled components, based on their example here https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts, using a local Vite project for convenience. Are you sure you've installed all peer dependencies of MUI's packages and mui-tiptap? Perhaps there's some quirk in your webpack setup.

e.g. here are the slider components from that MUI styled-components demo above, alongside mui-tiptap without issue:

cgil commented 1 year ago

That's odd! I found this link from MUI explaining the mismatch between tss-react and styled-components: https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react

sjdemartini commented 1 year ago

Here's a full CodeSandbox working with styled-components and mui-tiptap, as far as I can tell: https://codesandbox.io/p/sandbox/mui-tiptap-alongside-styled-components-3t8tps

cgil commented 1 year ago

@sjdemartini thanks for the example! It took a while to figure this one out, but the issue was actually with yarn workspaces.

It seems this package depends on tss-react@4.8.3 which appears to have some issue not being hoisted to the root package. Adding the dependency locally cleaned up the mismatch package issue.

As a side note with yarn 1.22.15, and a fresh install I see this (unrelated to the above) issue.

Thanks for the help and love the wrapper!

sjdemartini commented 1 year ago

Awesome, glad you were able to get it working after all. I'm not sure what would cause the hoisting problem in yarn workspaces with tss-react, but nice that you found a workaround and are able to still use mui-tiptap.

For that warning:

The engine "pnpm" appears to be invalid.

Yeah, I'd seen that before. It's an issue with yarn v1 which is fixed in newer versions of yarn (so they aren't patching in yarn classic): https://github.com/yarnpkg/yarn/issues/7560#issuecomment-753609744

I'll close this issue out for now, but if you have suggestions for how to repro the tss-react hoisting problem, I can see about checking with the tss-react maintainer to investigate resolving that.

sjdemartini / mui-tiptap