I get a Can't call setState (or forceUpdate) on an unmounted component error, when i open the drop down and navigate away to a diffrent page

[nreact]

I am running into this error , warning.js:33 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. .

This happens when I have the drop down box open and I navigate away to a different page . I am just using simple DropdownTreeSelect data={this.data} and data is just sample data provided in sand box examples.

Weird thing is this issue happens only the first time , meaning if I go back to the page where drop down exists and I try to repro the issue the warning does not appear.

Is there some kind of event or set state that gets called when the drop down box is opened ? Is there some kind of clean up I need to do to recover from this situation ?

[mrchief]

This is interesting. Let me see if I can reproduce this.

[mrchief]

Can't seem to reproduce with the demo. I also tried navigating to other links on the same page, navigating to other windows but I don't see this error or warning (this part is not in the gif but I did try).

Are you sure it's this component that's causing the warning? Can you upload a CodeSandbox that reproduces this?

[nreact]

hi , Thanks for looking into this issue.
I should have said in the original post, that my app is a SPA, so when I said navigating away from page, it is basically using router, to go to different part of component.. Sorry I should have been bit more clear :(

If you still need a sandbox code for SPA ..

[mrchief]

Yes, setting up a sandbox would be great.

[mrchief]

Although I think I have an idea as to what might be happening. However, it'd be great if you can provide a reproducible example.

[mrchief]

Can you try the branch https://github.com/dowjones/react-dropdown-tree-select/tree/remove_listener_on_unmount?

[nreact]

Let me know if am doing any thing wrong ..
I uninstalled the existing package, and installed using following npm install
npm install https://github.com/dowjones/react-dropdown-tree-select#remove_listener_on_unmount

I am still seeing the warning ..(I am wondering if I am getting right bits)

[mrchief]

Try running yarn build.

[nreact]

Still no luck..did the following ...I can still see the issue

c:\react npm install https://github.com/dowjones/react-dropdown-tree-select#remove_listener_on_unmount
npm WARN @progress/kendo-react-grid@0.3.0 requires a peer of @progress/kendo-data-query@^1.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @progress/kendo-react-intl@0.3.0 requires a peer of cldr-data@^32.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-errors@1.0.0 requires a peer of ajv@>=5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN awesome-typescript-loader@5.2.0 requires a peer of typescript@^2.7 but none is installed. You must install peer dependencies yourself.
npm WARN react-fa@4.2.0 requires a peer of react@>= 0.13.0 <16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN holden-ui@0.0.1 No repository field.
npm WARN holden-ui@0.0.1 No license field.

• react-dropdown-tree-select@0.0.0-semantic-release
  added 3 packages from 3 contributors in 9.651s

c:\react yarn build
yarn run v1.10.1
warning package.json: No license field
$ webpack
Building Dev: true and DevProd: false
Hash: 99be2013ac3c158ad2e9
Version: webpack 4.16.5
Child
Hash: 99be2013ac3c158ad2e9
Time: 16043ms
Built at: 2018-10-02 14:53:06
Asset Size Chunks Chunk Names
prime.js 223 KiB prime [emitted] prime
vendor.js 9.13 MiB vendor [emitted] vendor
prime.js.map 266 KiB prime [emitted] prime
vendor.js.map 8.32 MiB vendor [emitted] vendor
Done in 17.81s.

[mrchief]

Switch to node_modules/react-dropdown-tree-select and run yarn build there. From the logs, it seems like your app's build was run.

[nreact]

Running yarn build is throwing bunch of errrors when I try to switch that location..(rimraf not installed, crossenv etc) .. I installed both but still running into errors …

One thing I noticed that in node_modules\react-dropdown-tree-select … there is no dist folder I only see package.json, licensce and readme.cmd,

if I just run npm install --save react-dropdown-select , it copies a dist folder..

[mrchief]

Yeah you need to an yarn install in that folder first. But let's not do that. There are better and cleaner ways of handling this situation.

• git clone, checkout this branch
• run yarn or npm i
• run yarn build
• then do npm link in react-dropdown-tree-select folder. (you may need sudo or admin rights)
• then go to your app's folder and run npm link react-dropdown-tree-select. This will link your app's version to your local build.

I can also try to publish this as a beta version manually but I'm not sure if that'll mess up semantic-release's bots.

Or you can provide a sample repo or codesandbox and we can mess there.