3

I have created a number of React components which wrap Material-UI components and are packaged as an NPM module.

The module works fine when installed via the remote package: npm install *name-of-package*, or via local install: npm install ../*name-of-package*.

For module development, however, I would like to use npm link so that I can use webpack --watch / webpack-dev-server etc in the module and site directories.

To do so, I am running npm link to create a symlink in the module directory, and then npm link *name-of-package* in the site directory. Webpack starts as expected, however I keep encountering errors in the browser related to MUI's withStyles function:

Uncaught TypeError: Cannot read property '@global' of undefined referring to the var rules = style[propKey]; line of the function handleNestedGlobalContainerRule(rule).

And other such as: The above error occurred in the <WithStyles(Typography)> component

From what I can tell from similar posts this is complaining about the absence of theme object (the site has a MuiThemeProvider with a theme object declared).

Can anyone suggest why this might be working with npm install and not npm link? I cannot seem to figure this one out.

Ryan Achten
  • 495
  • 4
  • 21
  • 1
    The problem definitely comes from withStyles. As mentioned here as I thought, there's an issue in the styles object. The reason apparently is that one of your values inside the styles object is null or undefined. [See this issue on github](https://github.com/mui-org/material-ui/issues/8652#issuecomment-404220396). Why is it not appearing with npm install? I can't tell with the info I have here. You may be using a different branch / version in npm link and npm install. – aquiseb Oct 16 '18 at 22:39

1 Answers1

0

After checking out various commits and reading @AstenMies' reference, I have seemed to have resolved this issue. Or at least I'm no longer able to replicate the problem.

I'm not entirely sure which exact change solved the issue, but I'll list what I did in case someone else finds themselves in this situation:

  • As @AstenMies' link points to, property in my theme object was undefined (although this on its own didn't solve my issue)
  • Make sure the React and React-DOM versions of your module and site are the same
  • Don't mix your yarn add and npm install commmands - mixing package managers can lead to inconsistencies
  • When in doubt, delete your node_modules folder and install again. Your can also npm cache clean here to avoid any cached nasties
Ryan Achten
  • 495
  • 4
  • 21