reactjs - "Only a ReactOwner can have refs" despite running a single react copy and no broken refs -

i'm getting old

invariant.js:44 uncaught error: addcomponentasrefto(...): reactowner can have refs. might adding ref component not created inside component's render method, or have multiple copies of react loaded

the refs not problem (they in render method, , issue persists after they're removed). don't have multiple copies of react - there not single additional copy in node_modules, npm ls react returns single instance, have no react plugins installed. i'm using webpack.

adding aliases in webpack config didn't help, reinstalling dependencies didn't help, removing react , linking outside npm/webpack didn't help.

here's webpack config:

module.exports = {     watch: true,     entry: "./components/freshinvestigationform/freshinvestigationform.tsx",     output: {         filename: "bundle.js",         path: __dirname + "/dist"     },     devtool: "source-map",         resolve: {         extensions: [".ts", ".tsx", ".js", ".json", "css"]     },         module: {         rules: [             {                 test: /\.ts|\.tsx$/,                 use: ["babel-loader","awesome-typescript-loader"]             },             {                 test: /\.css?$/,                 use: ["css-loader"]             },             {                 test: /\.(eot|svg|ttf|woff|woff2)$/,                 use: 'file-loader?name=public/fonts/[name].[ext]'             },             {                 test: /\.(jpe?g|png|gif|svg)$/i,                 use: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]',                     'image-webpack-loader?bypassondebug&optimizationlevel=7&interlaced=false']             },             {                 enforce: "pre",                 test: /\.js$|\.jsx$/,                 use: ["babel-loader", "source-map-loader"]             }         ]     } }; 

and dependencies

 "dependencies": {     "@types/react": "15.0.30",     "@types/react-dom": "^15.5.1",     "awesome-typescript-loader": "^3.2.1",     "prop-types": "^15.5.10",     "react": "^15.6.1",     "react-dom": "^15.6.1",     "source-map": "^0.5.6",     "style-loader": "^0.18.2",     "typescript": "^2.4.2"   },   "devdependencies": {     "babel-core": "^6.25.0",     "babel-loader": "^6.4.1",     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",     "babel-plugin-transform-object-assign": "^6.22.0",     "babel-plugin-transform-runtime": "^6.23.0",     "babel-polyfill": "^6.23.0",     "babel-preset-env": "^1.6.0",     "babel-preset-es2015": "^6.24.1",     "babel-preset-react": "^6.24.1",     "babel-runtime": "^6.23.0",     "css-loader": "^0.28.4",     "file-loader": "^0.11.2",     "image-webpack-loader": "^3.3.1",     "source-map-loader": "^0.2.1",     "typescript-simple-loader": "^0.3.8",     "webpack": "^3.3.0"   } 

also, horrible error, pretty solved did in different way.

edit:

i've managed narrow problem down somewhat, there several components trigger error can't identify problem. of them called in same place this:

listtorender.foreach((item: field, index: number) => {             const subgroup: object = item.hasownproperty("subgroup") ? item.subgroup : null;             const isdropdown = this.state.dropdowns[item.value] !== undefined;             const issearchdropdown = this.state.searchdropdowns.indexof(item.value) > -1;             const ismultiyear = this.state.multiyear.indexof(item.value) > -1;             const ismultipleselection = this.state.multipleselectiondropdowns.indexof(item.value) > -1;              if (issearchdropdown) {                 listelems.push(<searchselectformelem /> } else {and on other possibilities} return(<ul>{listtorender}</ul>) 

this shortest 1 of offending components. don't misled having ref, removing changes nothing

import * react "react"; var $: = $;  export interface iprops {     givenid: string;     specialtype: string;     inputvalue?: string;     updatemodel: function; }  export default class searchselectformelem extends react.component<iprops, { selectnode: }> {     private searchselect: htmlselectelement;     showdropdown() {         $(this.searchselect).select2("open");     }     componentdidmount() {         $(this.searchselect).select2({ selec2 options });     }     render() {         let fieldlabel: string = this.props.givenid;         fieldlabel = fieldlabel.replace(/([a-z])/g, ' $1').trim();          return (             <li classname="form-list-elem has-special-input dropdown">                 <label htmlfor={this.props.givenid} classname="form-label">                     {fieldlabel}                 </label>                 <div classname="special-wrapper">                     <select ref={(node) => {this.searchselect = node}} classname="form-input main-form-input select2picker search-dropdown" id={this.props.givenid}>                         <option>{this.props.inputvalue}</option>                     </select>                     <span classname="special-control dropdown" onclick={this.showdropdown.bind(this)}></span>                 </div>             </li>         );     } } 

as i've written before, error horrible , error message unhelpful.

the actual reason jquery (the project being migrated react relies on jquery plugins). despite working properly, react allow called through import. once started calling this

import * $ 'jquery' 

the app started working again.