📦Publish a module that uses TSS

How to express you dependencies requirements

Soon, it won't be mandatory to explicitly provide an emotion cache for TSS to play well with MUI.

Then, it wont be necessary to give specific SSR instructions.

Follow the advancement.

Update 6 jul 2022: It's moving forward!

Your module uses MUI

package.json

"name": "YOUR_MODULE",
"dependencies": {
    "tss-react": "^3.5.2"
},
"peerDependencies": {
    "react": "^16.8.0 || ^17.0.2",
    "@mui/material": "^5.0.1",
    "@emotion/react": "^11.4.1",
},
"devDependencies": {
    "@mui/material": "^5.0.1",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.8.1"
}

Your users install your module like that:

yarn add YOUR_MODULE @mui/material @emotion/react @emotion/styled

You also need to tell your user to explicitly provide an emotion cache to MUI:

import { render } from "react-dom";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

export const muiCache = createCache({
    "key": "mui",
    "prepend": true
});

//NOTE: Don't use <StyledEngineProvider injectFirst/>
render(
    <CacheProvider value={muiCache}>
        {/* ...your app...*/}
    </CacheProvider>,
    document.getElementById("root")
);

Your users also need to follow TSS's instructions to enable SSR (at least for now...).

Your module don't use MUI

package.json

"name": "YOUR_MODULE",
"dependencies": {
    "tss-react": "^3.5.2"
},
"peerDependencies": {
    "react": "^16.8.0 || ^17.0.2",
    "@emotion/react": "^11.4.1",
},
"devDependencies": {
    "@emotion/react": "^11.4.1"
}

Your users install your module like that:

yarn add YOUR_MODULE @emotion/react

Your users also need to follow TSS's instructions to enable SSR.