1 year ago

#333642

test-img

mcmcphillips

Building custom component library for MUI-5, What should be dependencies vs peer dependencies?

I'm currently building a react component library to be delivered as an npm module. I want the library to have the capacity to style components, run storybook to display the components, and have multiple applications consume the components through imports.

I'm a little confused as to what I should be listing as peer dependencies vs dependencies. The library bundles component assets to a dist directory that can be referenced in consuming applications. The consuming applications live in a single-spa environment.

My current package.json:

"dependencies": {
    "@reach/portal": "^0.16.2",
    "@reach/tooltip": "^0.16.2",
    "@storybook/builder-webpack5": "^6.4.19",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/user-event": "^13.5.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "cookie": "^0.4.1",
    "d3-selection": "^1.4.2",
    "d3-shape": "^1.3.7",
    "jwt-decode": "^3.1.2",
    "preact": "^10.6.4",
    "prop-types": "^15.8.1",
    "react-modal": "^3.14.4",
    "retry": "^0.13.1",
    "what-input": "^5.2.10",
    "xss": "^1.0.10"
  },
  "peerDependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.5.0",
    "@mui/material": "5.0.2",
    "@mui/styles": "^5.5.0",
    "@mui/system": "^5.5.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
overrides: {
    "webpack": "^5.70.0"
}

At minimum I know React should be a peer dependency to avoid node_modules reference errors and hooks warnings, but further than that I'm unsure. What here is right, and what needs to be changed and why?

reactjs

npm

webpack

material-ui

single-spa

0 Answers

Your Answer

Accepted video resources