Cannot set property "tooltip" of undefined

[phun-ky]

I'm getting this error when doing this:

return (
  <span ref={this.textRef} id={`text-${children}-${context || 'NO_CONTEXT'}`}>
    {this.getText(children)}
    {isMissing && (
      <Tooltip content="This is the tooltip content">
        <span style={{ color: '#f04', fontSize: 34 }}>◉</span>
      </Tooltip>
    )}
  </span>
);

Don't know if it's related to: https://github.com/gilbarbara/react-tooltips/issues/12

[gilbarbara]

I can't reproduce using the example you posted. https://codesandbox.io/s/rm18jm5xq

[phun-ky]

I'm using webpack 3 and babel with react 15* and preact-compat. and the error is thrown from this line: https://github.com/gilbarbara/react-tooltips/blob/master/src/index.js#L252

Or in the built version: node_modules/react-tooltips/es/index.js#279

[gilbarbara]

@phun-ky still, I can't reproduce. It can be preact-compat. Try to use the debugger to get what arriving at setRef.

[gilbarbara]

I've tested in React 15.x so it works with the latest 15.6.4

[phun-ky]

I think it's the built version that is the culprit here, since it's not beeing processed by webpack (we exclude node_modules). We're not using react-tooltips now because of this issue, but if I get the time, I will try to investigate it further

[gilbarbara]

hey @phun-ky I exclude node_modules from the build process with webpack too, so it's not that. The es version even uses a function to create the component so it doesn't need extra processing and I'm using the same build scheme for all my modules so if this was the problem I would hard about before.

It looks like it's missing some sort of binding as tooltip is a property of the react class, so the error just says it this is undefined. I'll take a look at this again tonight but I have tested with create-react-app and my own boilerplates in both React 15 and 16.

[gilbarbara]

If you still are having problems, feel free to re-open

[bplittle]

I'm getting this as well, using create-react-app and just the simple example in the Readme

<Tooltip content="This is the tooltip content">
    <span>click me</span>
</Tooltip>

, {
    key: 'setRef',
    value: function setRef(ref) {
      this.tooltip = ref;
    }
  }, 

[gilbarbara]

hey @bplittle

I still can't reproduce it. I've just created a new CRA app, installed this packages and it worked with everything I've tried.

Do you use any other packages? Have you ejected? If you could provide more information I'd be great to be able to reproduce.

[bplittle]

Here's my package.json . Nothing too weird, I don't think! I haven't ejected. I've only attempted using it via npm run start

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-append-sw": "^2.1.0",
    "font-awesome": "^4.7.0",
    "j-toker": "0.0.10-beta3",
    "jquery": "^3.2.1",
    "js-cookie": "^2.1.4",
    "moment": "^2.18.1",
    "node-sass-chokidar": "0.0.3",
    "npm-run-all": "^4.1.1",
    "object-dig": "^0.1.1",
    "query-string": "^5.0.0",
    "rc-time-picker": "^2.4.1",
    "react": "^15.6.1",
    "react-add-to-calendar": "^0.1.4",
    "react-datepicker": "^0.55.0",
    "react-datetime": "^2.11.1",
    "react-dom": "^15.6.1",
    "react-dropzone": "^4.2.3",
    "react-modal": "^2.3.2",
    "react-notification-system": "^0.2.15",
    "react-notifications": "^1.4.3",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.13",
    "react-select": "^1.0.0-rc.10",
    "react-table": "^6.5.3",
    "react-tooltips": "^0.2.1"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js && cra-append-sw --mode dev ./custom-sw.js",
    "build": "npm run build-css && react-scripts build && cra-append-sw --skip-compile ./custom-sw.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[gilbarbara]

Found the problem! Apparently, react 15.x needs setRef to be bound while react 16 was ok with it. Also, I've found another bug with unstable_renderSubtreeIntoContainer rendering with react 15.x.

Can you please try 0.2.2 and let me know if it works for you?