Element ref was specified as a string (enhancedSwitch) but no owner was set.

[FinnWinchester]

I am developing a custom NPM package that uses Material UI 0.20.0 and React/ReactDOM 16.3.2 and using that NPM package in one of my projects using the same React/ReactDOM versions but not using Material UI (for it's included in that package).

I am getting this error:

Uncaught Error: Element ref was specified as a string (enhancedSwitch) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded

The Material UI component I am using is the checkbox. I actually have a custom component that renders that Material UI Checkbox and I am using that custom component (from that custom NPM package) in my project.

Any tips? Thanks!

[oliviertassinari]

We encourage people starting with Material-UI to go with v1-beta. The master branch is in a low maintenance mode. We don't plan any work on it. However, we still do our best to review and merge pull requests that fix bugs on this branch.

[oliviertassinari]

@FinnWinchester Make sure non of the proposed reason are correct. They are in 99% of the cases.

[FinnWinchester]

@oliviertassinari I am not using refs so 1. and 2. are not the reason. The 3. I am 99% sure it's not because npm ls react only returns 1 result for both my package and my project. I will try v1-beta. Thanks!

[oliviertassinari]

@FinnWinchester What's the package name? I can have a look at it.

[FinnWinchester]

It is a private one I'm afraid. However I've tried to install material-ui@next but my webpack run seems to fail because of some JSS. Do I need to install anything else?

Here's the first error - and there are a lot of errors like this one:

ERROR in ./node_modules/jss-nested/lib/index.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "[my_project_path]/node_modules/jss-nested"

[oliviertassinari]

It is a private one

I won't be able to help. https://material-ui.com/guides/migration-v0.x#where-should-i-start-in-a-migration-

Here's the first error - and there are a lot of errors like this one:

I think that it's an issue on JSS side. cc @kof. They shouldn't publish the babelrc on npm, for instance.
Material-UI has removed it two years ago to solve the same problem: #3609 (comment) and to reduce npm package size.

Alright, there is already have an issue on JSS side: cssinjs/jss#673. You can upvote it or submit a pull-request if it's important for you.

[oliviertassinari]

@FinnWinchester What bundler are you using?

[kof]

Yeah, I want to use "files" in package.json, ignoring everything is hard long term.

[FinnWinchester]

@oliviertassinari I am using Webpack ^3. It seemed like installing Babel preset es2015, Babel plugin transform-es3-property-literals, and JSS, JSS-Nested and JSS-Global saved the bacon for me.

It seems like it's a dependency issue from either material UI beta 45 or JSS itself, I don't know, but after installing all that it worked for me.

[oliviertassinari]

@kof We ended up doing the same :) #3158

[oliviertassinari]

At some point, people are going to upgrade to babel@7. This might greatly awake the problem.

[FinnWinchester]

Yeah maybe @oliviertassinari but it won't fix this JSS issue I had I'm afraid.