Added `UNSAFE_` prefix to componentWillMount()

[smrsan76]

Hello dear maintainers,

Please merge and publish this new code to omit the warning message. :pray:

Thanks

[rscotten]

Hello, this is a fairly important update. Anything we can do to help get some action on this?

[smrsan76]

Hello @rscotten ,

Anything we can do to help to get some action on this?

Just merge it, please...

Thanks

[muntasirsyed]

Without this PR, the library currently spews warnings from React on every server restart and every browser console session.

A very simple & straightforward merge, so it would be greatly appreciated.

On Tue, 5 Nov 2019, 21:14 SMRSAN, [email protected] wrote:

Hello @rscotten https://github.com/rscotten ,

Anything we can do to help to get some action on this?

Just merge it, please...

Thanks

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jamiebuilds/react-loadable/pull/213?email_source=notifications&email_token=AAN7XTQW7QQV4W6KYRDXMHDQSHO3PA5CNFSM4JATXPYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDEK5ZA#issuecomment-550022884, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN7XTWRPSFXG2FEBV7JQX3QSHO3PANCNFSM4JATXPYA .

[smrsan76]

Hi @muntasirsyed ,

Thanks for paying attention to this PR.

As you could see here, I've just edited one line of code.

I really don't have any idea about where the error message comes out from..! Because my PR is just related to editing one line of code in React, not test codes.

[ramirost]

Hi @muntasirsyed ,

Thanks for paying attention to this PR.

As you could see here, I've just edited one line of code.

I really don't have any idea about where the error message comes out from..! Because my PR is just related to editing one line of code in React, not test codes.

The error raises because UNSAFE_ was added in react 16.3 and the project depends on react 16.0, a version bump on react is needed to fix this.

[rscotten]

@smrsan76 Can you try @ramirost 's advice and bump the react dependency from 16.0.0 to 16.3.0 in package.json?

[smrsan76]

Uh oh... It seems that v16.11.0 (currently, the latest version) isn't compatible with this package. Let me try v16.3.0 as @ramirost said...

[smrsan76]

I've just tried both v16.11.0 (the latest) and v16.3.0, but none of them fixed the problem...

[ramirost]

I have the code with the minimum version upgrade on react components (to 16.3.x) in this branch: https://github.com/ramirost/react-loadable/tree/unsafe_prefix with the tests passing.

Should I create a new PR or maybe @smrsan76 can uptate this PR?

I attach also the patch file over master of the original repo of the unique commit on that branch that could fix this warning.

patch.diff.txt

[rscotten]

@ramirost Please create a new PR and then post a comment here linking to the new PR. If it passes and merges, we can close this PR

[ramirost]

@ramirost Please create a new PR and then post a comment here linking to the new PR. If it passes and merges, we can close this PR

I created PR #217 but tests already failed, then looking at previous tests results I see that the PR #216 solves the same issue and also solves the build problem (which was only on node 4 build for my PR), maybe we just need to merge PR #216 which seems OK and reject both this one and the one I just created.

[empav]

VM425 backend.js:6 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: LoadableComponent

Is there any fixed date for this pull request to be merged?

[smrsan76]

Hey @rscotten , I think @ramirost is right as he said:

I created PR #217 but tests already failed, then looking at previous tests results I see that the PR #216 solves the same issue and also solves the build problem (which was only on node 4 build for my PR), maybe we just need to merge PR #216 which seems OK and reject both this one and the one I just created.

So, please take a look at PR #216 and merge it, if it hasn't any other issues...

( I also have to apologize for delays between my contributions. :pray: )

[iKonrad]

Yes it'd be good to update the codebase for the recent React changes. @jamiebuilds any chance to have this fixed? (I can jump in and help if the library is going to be maintained)

[kopax]

Hello sorry if it's already in progress. I use this awesome package a lot (for each routes of my application) and thus produce an infinite number of warning in all our developer's console. Could you please merge the proposed solution or let us know if this won't be solved?

[iKonrad]

Alright, it seems that this library is not going to get support anytime soon. According to the official documentation, I advise you to move over to the loadable-components library as it is getting much more attention. I've done the migration in one project and it's pretty straightforward.

[rscotten]

@iKonrad Oh snap, yeah, good call. I'm bailing on this library and moving over to @loadable/component

[kopax]

@rscotten is it the same API?

[kopax]

For thoose who want to stick to the API and feature of this project, I have published on npm the fix: https://www.npmjs.com/package/@yeutech-lab/react-loadable

GitHub: https://github.com/yeutech-lab/react-loadable

[yumindev]

Don't bother to beg the author. Let use this: https://github.com/gregberge/loadable-components

[kopax]

Don't bother to beg the author. Let use this: https://github.com/gregberge/loadable-components

I bother because React.lazy is poor, for example it does not have a preload method that can be triggered whenever you want (on <a> mouseover for example.)

[slorber]

React infos

For those interested:

• React 17 still has both componentWillMount and UNSAFE_componentWillMount methods available.
• The removal of componentWillMount has been postponed to React 18 (https://github.com/facebook/react/pull/19031)

Solution

We use React-loadable in facebook/docusaurus. Until we migrate to loadable-components, I was looking for a solution to get rid of the warning.

I published a fork "@docusaurus/react-loadable": "5.5.0", with the minimal amount of changes to get rid of the warning (changes).

I didn't want to use someone else fork for security reasons, as our open-source project is widely used by thousands of users, as it would require me to inspect the published JS. If you use a fork, you'd rather fix the dependency to a specific version instead of using a semver range. In our case, it's very unlikely that we'll ever update this fork again.

Aliases

If you don't want to rename all your imports to @docusaurus/react-loadable, you can:

• use a webpack alias in your Webpack config:

module.exports = {
  resolve: {
    alias: {
      "react-loadable": "@docusaurus/react-loadable"
    }
  }
};

• use a NodeJS module alias if you need NodeJS/SSR:

import moduleAlias from "module-alias";

moduleAlias.addAliases({
  "react-loadable": "@docusaurus/react-loadable"
});

---

Hope anyone will find this useful :)