Invariant Violation: addComponentAsRefTo while building

Invariant Violation: addComponentAsRefTo while building searchkit

v0.10.1

Case is that if I build with: searchkit/src/core/react/SearchkitProvider.tsx

export class SearchkitProvider extends React.Component<SearchkitProps,any> {
	render(){
		return (
			<div>asdasd</div>
		);
	}
}

using by

return (
        <div>
        <SearchkitProvider searchkit={searchkit}>
            <div>
              ssss
            </div>
          </SearchkitProvider>          
          </div>
      );

I get proper response, but If I change source to

export class SearchkitProvider extends React.Component<SearchkitProps,any> {
	render(){
		return (
			<div><input ref="asdasd" /></div>
		);
	}
}

i get error Uncaught Error: addComponentAsRefTo(…): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component’s render method, or you have multiple copies of React loaded

[joemcelroy]

OK i got a starter project based off create-react-app and using beta-4. This doesn’t have the multiple ref issue. https://github.com/searchkit/searchkit-starter-app

[joepio]

I had a similar error.

This often means that multiple React instances were loaded.

We managed to solve this by explicitly importing one single version of react:

// In webpack.config.js

  resolve: {
    alias: {
      react: path.resolve('node_modules/react'),
    },
  },

EDIT1: adjusted path, inostia is right.

EDIT2: However, importing React like this caused errors when building in testing environment. Module not found: ../../../node_modules/react.js in /home/runner/aod_demo/app/components/Dropdown

EDIT3: I managed to fix Module not found in our testing environment by adding this environment variable: NODE_PATH : $(pwd)/node_modules/