Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] "componentWillMount" warning from React Helmet #1327

Closed
dallonf opened this issue Oct 11, 2019 · 5 comments
Closed

[Bug] "componentWillMount" warning from React Helmet #1327

dallonf opened this issue Oct 11, 2019 · 5 comments
Labels
bug 🐛 upstream ⬆ wontfix 🙅‍♀️ This won't be applied, fixed, worked on, continued.

Comments

@dallonf
Copy link
Contributor

dallonf commented Oct 11, 2019

Reporting a bug?

Whenever you use the Head component (which is basically aliased to React Helmet), React prints this warning in the console:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles 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: SideEffect(NullComponent)

Digging in deeper, the component in question appears to be rendered by React Helmet, and there is an open issue in that repo about this: nfl/react-helmet#465

This package doesn't seem to be very actively maintained - there's no maintainer comment on that issue from August 9, and the last commit on the master branch was May 2. Because of that, it might be valuable to move away from it, maybe to react-helmet-async as a couple others have mentioned in that thread. (and apparently has been discussed in this repo before too, in #788).

Environment

Run and copy the result of:

npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers

here:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 62.83 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 77.0.3865.90
    Firefox Developer Edition: 70.0
    Safari: 13.0.2
  npmPackages:
    react: ^16.9.0 => 16.10.2
    react-dom: ^16.9.0 => 16.10.2
    react-static: ^7.2.0 => 7.2.2
    react-static-plugin-reach-router: ^7.2.0 => 7.2.2
    react-static-plugin-sitemap: ^7.2.0 => 7.2.2
    react-static-plugin-source-filesystem: ^7.2.0 => 7.2.2

of course include any other package versions here if relevant.

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

  1. Start a new project with the "basic" template (npx react-static create)
  2. In src/pages/about.js, add a <Head> component:
import React from 'react';
import {Head} from 'react-static';

export default () => {
  return (
    <div>
      <Head>
        <title>About Us</title>
      </Head>
      <p>React Static is a progressive static site generator for React.</p>
    </div>
  );
};
  1. Navigate to the "About" page on the site and check the Console

Expected Behavior

There shouldn't be any React warnings in the console - not only are they distracting, but they're a sign that a future major release of React will break functionality.
@SleeplessByte
Copy link
Member

We'll move away from this package, but the warning is "moot". It happens during pre-render, and then we strip the problematic code and replace it with our own already. We have indeed until 17.x to make the change :)

@khanakia
Copy link

Same issue it gives error

react-dom.development.js:12357 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles 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: SideEffect(NullComponent)

@SleeplessByte
Copy link
Member

It's an upstream issue -- package no longer used in RS 8 (for now). You can ignore the warning for now.

@agonzalezcr
Copy link

is there a way to get rid of this issue? Any suggestions or alternate packages?

@SleeplessByte
Copy link
Member

It's not present in production. You can safely ignore it for now.

It will be fixed in the next major.

@SleeplessByte SleeplessByte mentioned this issue Jun 11, 2020
Closed
@SleeplessByte SleeplessByte added the wontfix 🙅‍♀️ This won't be applied, fixed, worked on, continued. label Apr 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 upstream ⬆ wontfix 🙅‍♀️ This won't be applied, fixed, worked on, continued.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@dallonf @SleeplessByte @khanakia @agonzalezcr